* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a, a:hover {
    text-decoration: none;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

/*.mt-50 {
    margin-top: 50px;
}*/

.mt-70 {
    margin-top: 70px;
}

.mt-90 {
    margin-top: 90px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-120 {
    margin-top: 120px;
}

.ml-20 {
    margin-left: 20px;
}

.no-padding {
    padding-left: 0 !important;
}

.menu {
    text-transform: uppercase;
}

    .menu .form-check-inline {
        margin-right: 100px;
    }

.signout {
    color: #B5B5B5;
}

.blue {
    color: #blue;
}

.beginer, .beginer:hover {
    background-color: #BAB86C;
    color: #fff;
}

.solo, .solo:hover {
    background-color: #2fac8c;
    color: #fff;
    margin-left: 20px;
    margin-right: 20px;
}

.group, .group:hover {
    background-color: #dc3545;
    color: #fff;
}

.play {
    background-color: #07B3FF;
    color: #fff;
    width: 40px;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    display: block;
    font-size: 12px;
    float: left;
}
.play28 {
    width: 70px;
}
.view {
    background-color: #A6BCD0;
    color: #fff;
    width: 40px;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    display: block;
    font-size: 12px;
}
.view28 {
    width: 70px;
}
.player {
    background-color: #FF0000;
    color: #fff;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    display: block;
    font-size: 12px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.46);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.46);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.46);
}

    .player:hover {
        color: antiquewhite;
    }

.play-table {
    background-color: #F0F4F8;
    border-radius: 10px;
    overflow-y: scroll;
    height: 500px;
}

.game-log-table {
    background-color: #F0F4F8;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: scroll;
    text-align: center;
}

.game-bidlog-table {
    background-color: #F0F4F8;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: auto;
    height: 300px;
    text-align: center;
}

.play-table table tr td, .play-table table tr th {
    border-right: 1px solid #D9E3EC;
}

.chatbox {
    background: #fff;
    border-radius: 10px;
    min-width: 250px;
    height: 300px;
    padding: 10px;
    max-width: 300px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.28);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.28);
}

.chat-msg {
    position: absolute;
    font-weight: bold;
    margin-left: 30px;
    width: 70%;
    float: right;
    max-width: 250px;
}

.chat-type {
    margin-bottom: 10px;
    background-color: #F0F4F8;
    height: 35px;
    border-radius: 8px;
    float: left;
}

.smile {
    width: 11%;
    float: left;
    padding-left: 5px;
    padding-top: 2px;
}

.msgt {
    width: 89%;
    float: left;
}

    .msgt textarea {
        background-color: transparent;
        border: none;
    }

.chat {
    height: 170px;
    overflow-y: scroll;
    margin-bottom: 15px;
    max-width: 300px;
}

.online {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.28);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.28);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.28);
}

ul.msg {
    margin: 0;
    padding: 0;
}

    ul.msg li {
        list-style: none;
        border-bottom: 1px solid #A6BCD0;
        font-size: 12px;
        margin-top: 10px;
    }

        ul.msg li span.user {
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            color: #748A9D;
        }

        ul.msg li span.date {
            font-size: 12px;
            display: inline-block;
            color: #A6BCD0;
            margin-right: 5px;
        }

        ul.msg li p {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            margin-bottom: 10px;
            line-height: 15px;
        }

.posttoall {
    background-color: #dc3545 !important;
}

.post {
    background-color: #07B3FF;
    color: #fff;
    width: 60px;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    display: block;
    font-size: 12px;
    float: left;
}

.lobby {
    background-color: #FF0000;
    color: #fff;
    width: 60px;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    display: block;
    font-size: 12px;
    float: left;
}

.on {
    color: red;
}

.users {
    height: 145px;
    overflow-y: scroll;
    margin-bottom: 15px;
}

ul.live li {
    color: #A6BCD0;
}

ul.links li {
    list-style: none;
    float: left;
}

    ul.links li a {
        padding: 0 7px;
        border-right: 1px solid #A6BCD0;
        display: block;
        color: #A6BCD0;
    }

    ul.links li:first-child {
        padding: 0;
    }

/*======== Game table =======*/

.game-table {
    height: 500px;
    background: none;
    display: flex;
}

    .game-table .left {
        width: 122px;
        float: left;
    }

    .game-table .center {
        width: 597px;
        float: left;
    }

    .game-table .right {
        width: 121px;
        float: left;
    }

table.point {
    background-color: #D9E3EC;
    border: 1px solid #000;
    max-width: 250px;
    min-width: 250px;
    /* width: 70%; */
}

    table.point tr th {
        color: #07B3FF;
        padding-left: 4px;
        border-bottom: 1px solid #000;
    }

    table.point tr td {
        padding-left: 4px;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
    }

.ch-no {
    color: #FF9100;
    font-weight: bold;
    font-size: 20px;
}

.ch-no2 {
    color: #0000FF;
    font-weight: bold;
    font-size: 20px;
}

.tb-points {
    color: #FF00FF;
}

.bar {
    width: 94px;
}

.btn-group {
    height: 26px;
}

    .btn-group .btn {
        line-height: 15px;
    }

.hold {
    background-color: #748A9D;
    color: #fff;
}

.push {
    background-color: #A6BCD0;
    color: #fff;
}

/* ============ Profile ======== */

.profile1, .profile2 {
    width: 150px;
    height: 110px;
}

.pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: aliceblue;
    margin: 4px auto;
}

    .pic img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }

.profile1 .name {
    background-color: #946832;
    height: 26px;
    border-radius: 4px;
    color: #fff;
    margin: 4px 0;
}

.name span.chair {
    border-right: 1px solid #fff;
    padding: 0 5px;
}

.name span.user {
    font-size: 14px;
    font-weight: bold;
}

.name {
    width: 150px;
    text-align: center;
}

ul.pro-points {
    width: 120px;
    margin: 0 auto;
}

    ul.pro-points li {
        list-style: none;
        display: block;
        float: left;
        width: 45px;
        height: 41px;
        border-radius: 50%;
        border: 1px solid #000;
        text-align: center;
        font-weight: bold;
        font-size: 26px;
        background: #adb5bd;
    }


    ul.pro-points.highlight li {
        background-color: black;
        color: white;
    }

.selfraise_highlight {
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    /*background-color: red;*/
}

@keyframes blink {
    from {
        background-color: white;
    }

    to {
        background-color: #07B3FF;
    }
}

ul.pro-points li.space {
    margin-left: 5px;
    margin-right: 5px;
}

.profile2 .name {
    background-color: #69699d;
    height: 26px;
    border-radius: 4px;
    color: #fff;
    margin: 4px 0;
}

.borad-top {
    height: 71px;
}

.borad-bottom {
    padding-top: 8px;
    margin-top: 12px;
    margin-left: 50px;
}

/* ============ Board ========*/

.board {
    height: 356px;
}

.abs {
    position: relative;
}

    .abs .icons {
        text-align: center;
        vertical-align: middle;
        position: absolute;
        background-color: #a7aaad;
        -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
        -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
        box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    }

        .abs .icons a, a:hover {
            color: black;
            font-weight: bold;
            text-decoration: none;
        }

    .abs .iconbutton {
        text-align: center;
        vertical-align: middle;
        position: absolute;
        background-color: #0d81b5;
        -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
        -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
        box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    }

        .abs .iconbutton a, a:hover {
            color: black;
            font-weight: bold;
            text-decoration: none;
        }

.selfRaisingMode {
    text-align: center;
    vertical-align: middle;
    background-color: #a85c00;
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 10px;
    border: 1px solid #07B3FF;
    line-height: 25px;
    width: 100px;
    height: 30px;
    font-weight: bold;
    font-size: 14px;
    left: 596px;
    top: 236px;
    color: white;
    position: absolute;
}

/*Current Bid Box Settings*/

.currentbidbox {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 50%;
    border: 1px solid #07B3FF;
    line-height: 25px;
    width: 45px;
    height: 45px;
    font-weight: bold;
    font-size: 24px;
    padding: 3px;
    z-index: 99;
}

.currentbidboxX {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 5px;
    border: 1px solid #07B3FF;
    line-height: 25px;
    width: 30px;
    height: 30px;
    font-weight: bold;
    font-size: 14px;
    background-color: white;
    color: black;
}

.whiteInBlue {
    background-color: #69699d !important;
    color: white;
}

.whiteInOrange {
    background-color: #946832 !important;
    color: white;
}

.currentbidboxback {
    position: absolute;
    z-index: 98;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border: 1px solid #07B3FF;
    line-height: 25px;
    width: 206px;
    height: 55px;
    border-radius: 5px;
    background-color: #808080;
}

.currentbidboxbackX {
    position: absolute;
    left: 335px;
    top: 0px;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border: 1px solid #07B3FF;
    line-height: 25px;
    width: 103px;
    height: 55px;
    border-radius: 5px;
    background-color: #a85c00;
}

.currentbidboxBidBy {
    left: 605px;
    top: -48px;
}

.currentbidboxXLabel {
    left: 340px;
    top: 5px;
}

.currentbidboxXXLabel {
    left: 388px;
    top: 5px;
}

.currentbidboxXBy {
    left: 350px;
    top: 40px;
}

.currentbidboxXXBy {
    left: 397px;
    top: 40px;
}


.abs .twenty {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: #314050;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 40px;
    height: 33px;
    border: 2px solid rgba(0,0,0,0.28);
    line-height: 25px;
    font-size: 20px;
}

    .abs .twenty a, a:hover {
        color: #dee2e6;
        text-decoration: none;
    }


.abs .fourty {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: #314050;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 40px;
    height: 33px;
    border: 2px solid rgba(0,0,0,0.33);
    line-height: 25px;
    font-size: 20px;
}

    .abs .fourty a, a:hover {
        color: #dee2e6;
        text-decoration: none;
    }


.abs .fifty {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: #314050;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 40px;
    height: 33px;
    border: 2px solid rgba(0,0,0,0.28);
    line-height: 25px;
    font-size: 20px;
}

    .abs .fifty a, a:hover {
        color: #dee2e6;
        text-decoration: none;
    }


.abs .fifty56 {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: darkred;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 40px;
    height: 33px;
    border: 2px solid rgba(0,0,0,0.33);
    line-height: 25px;
    font-size: 20px;
}

    .abs .fifty56 a, a:hover {
        color: #fff;
        text-decoration: none;
    }


.abs .plus {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: #314050;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 33px;
    height: 33px;
    border: 2px solid rgba(0,123,255,.25);
    line-height: 25px;
    font-size: 18px;
}

    .abs .plus a {
        color: #dee2e6;
        text-decoration: none;
    }





.abs .fold {
    width: 65px;
    height: 30px;
    border-radius: 10px;
    left: 367px;
    top: 295px;
    color: white;
    background-color: #0d81b5;
    font-size: 18px;
    font-weight: bold;
}

.abs .card1 {
    left: 260px;
    top: 210px;
    position: absolute;
}

.abs .card2 {
    left: 392px;
    top: 170px;
    position: absolute;
}

.abs .card3 {
    left: 392px;
    top: 60px;
    position: absolute;
}

.abs .card4 {
    left: 260px;
    top: 30px;
    position: absolute;
}

.abs .card5 {
    left: 126px;
    top: 60px;
    position: absolute;
}

.abs .card6 {
    left: 126px;
    top: 170px;
    position: absolute;
}




/* ==== Edits ====== */
.c5 {
    margin-left: 25px;
    margin-top: 34px;
}

.c6 {
    margin-left: 23px;
    margin-top: 149px;
}

.c2 {
    margin-left: -46px;
    margin-top: 155px;
}

.c3 {
    margin-left: -56px;
    margin-top: 35px;
}

.c4 {
    width: 250px;
    margin-left: 180px;
    margin-top: -4px;
}

.c1 {
    width: 350px;
    margin-left: 135px;
    margin-top: -5px;
    z-index: 100;
}

.c4buttons {
    margin-top: 3px;
    margin-left: 10px;
    z-index: 100;
}

.c1buttons {
    margin-top: 20px;
    margin-left: 10px;
    z-index: 100;
}

.c5 .button {
    margin-left: -15px;
    z-index: 100;
}

.c6 .button {
    margin-top: -35px;
    margin-left: 0px;
    z-index: 100;
}

.c3 .button {
    margin-left: 30px;
    z-index: 100;
}

.c2 .button {
    margin-left: 10px;
    margin-top: -10px;
}

.button {
    margin-top: 18px;
    margin-left: 10px;
}

/* ============= Cards ============ */

ul.cards li {
    list-style: none;
    float: left;
    margin-right: 10px;
}

    ul.cards li img {
        width: 105%;
    }



@media only screen and (max-width: 1200px) {
    .to-below-home {
        flex: 0 0 100% !important;
        max-width: 50% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}






@media (max-width: 576px) {

    .chatboxarea {
        margin-left: 286px;
    }

    .contract {
        position: absolute;
        top: -50px;
        left: 300px;
    }
}

.handCardNormal {
    top: 0px;
    position: relative
}

.handCardZoom {
    top: -10px;
    position: relative
}

.handCardNormal img {
    width: 71px;
    height: 96px;
}



.spade {
    background: #adb5bd url(/img/spade-black.svg) no-repeat center !important;
    background-size: 31px !important;
}


.heart {
    background: #adb5bd url(/img/heart-red.svg) no-repeat center !important;
    background-size: 31px !important;
}

.diamond {
    background: #adb5bd url(/img/diamond-red.svg) no-repeat center !important;
    background-size: 31px !important;
}

.clubs {
    background: #adb5bd url(/img/club-black.svg) no-repeat center !important;
    background-size: 31px !important;
}

.pointtable {
    width: 100%;
    min-width: 350px;
    font-size: 19px;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center
}

.overlay {
    position: absolute;
    z-index: 20;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f00;
    filter: alpha(opacity=10);
    -moz-opacity: 0.1;
    opacity: 0.1;
    cursor: pointer;
}
/*Setting dialog*/

.dialog {
    position: absolute;
    border: 2px solid #3366CC;
    background-color: #ffffff;
    z-index: 22;
}

.auto-style11 {
    height: 46px;
}

.auto-style12 {
    width: 116px;
}

.auto-style13 {
    height: 46px;
    width: 136px;
}

#settingstable tr:nth-child(even) {
    background-color: #f2f2f2;
}

#settingstable tr:hover {
    background-color: #9966FF;
}

.bidboxred {
    background-color: #FF9100;
    color: white;
}

.bidboxblue {
    background-color: blue;
    color: white;
}

.abs .pl {
    left: 175px;
    top: 30px;
}

.abs .pl1 {
    left: 215px;
    top: 30px;
}

.abs .pl2 {
    left: 255px;
    top: 30px;
}

.abs .pl3 {
    left: 295px;
    top: 30px;
}

.abs .pl4 {
    left: 335px;
    top: 30px;
}

.abs .pl5 {
    left: 375px;
    top: 30px;
}

.abs .pl6 {
    left: 375px;
    top: 30px;
}

.abs .pl7 {
    left: 415px;
    top: 30px;
}

.abs .pl8 {
    left: 450px;
    top: 30px;
}

.abs .t8 {
    left: 100px;
    top: 70px;
}

.abs .t9 {
    left: 150px;
    top: 70px;
}

.abs .t30 {
    left: 200px;
    top: 70px;
}

.abs .t31 {
    left: 250px;
    top: 70px;
}

.abs .t32 {
    left: 300px;
    top: 70px;
}

.abs .t33 {
    left: 350px;
    top: 70px;
}

.abs .t34 {
    left: 100px;
    top: 110px;
}

.abs .t35 {
    left: 150px;
    top: 110px;
}

.abs .t36 {
    left: 200px;
    top: 110px;
}

.abs .t37 {
    left: 250px;
    top: 110px;
}

.abs .t38 {
    left: 300px;
    top: 110px;
}

.abs .t39 {
    left: 350px;
    top: 110px;
}

.abs .f40 {
    left: 200px;
    top: 70px;
}

.abs .f41 {
    left: 250px;
    top: 70px;
}

.abs .f42 {
    left: 300px;
    top: 70px;
}

.abs .f43 {
    left: 350px;
    top: 70px;
}

.abs .f44 {
    left: 200px;
    top: 110px;
}

.abs .f45 {
    left: 250px;
    top: 110px;
}

.abs .f46 {
    left: 300px;
    top: 110px;
}

.abs .f47 {
    left: 350px;
    top: 110px;
}

.abs .f48 {
    left: 150px;
    top: 70px;
}

.abs .f49 {
    left: 200px;
    top: 70px;
}

.abs .f50 {
    left: 250px;
    top: 70px;
}

.abs .f51 {
    left: 300px;
    top: 70px;
}

.abs .f52 {
    left: 150px;
    top: 110px;
}

.abs .f53 {
    left: 200px;
    top: 110px;
}

.abs .f54 {
    left: 250px;
    top: 110px;
}

.abs .f55 {
    left: 300px;
    top: 110px;
}

.abs .f56 {
    left: 350px;
    top: 90px;
}

.abs .f40self {
    left: 220px;
    top: 90px;
}

.abs .f48self {
    left: 270px;
    top: 90px;
}

.abs .f56self {
    left: 320px;
    top: 90px;
}

.abs .bidleft {
    left: 420px;
    top: 70px;
}

    .abs .bidleft a:hover {
        color: red;
        text-decoration: none;
    }

.abs .bidright a:hover {
    color: red;
    text-decoration: none;
}

.abs .bidright {
    left: 420px;
    top: 110px;
}

.abs .icon4 {
    left: 200px;
    top: 155px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    font-size: 20px;
}

.abs .icon3 {
    left: 250px;
    top: 155px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    font-size: 20px;
}

.abs .icon2 {
    left: 300px;
    top: 155px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    font-size: 20px;
}

.abs .icon1 {
    left: 350px;
    top: 155px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    font-size: 20px;
}

.abs .value1 {
    left: 240px;
    top: 200px;
    width: 48px;
    height: 36px;
    border-radius: 10px;
    color: black;
    font-weight: bold;
    font-size: 25px;
    background-color: #adb5bd;
}

.abs .value2 {
    left: 295px;
    top: 200px;
    width: 48px;
    height: 36px;
    border-radius: 10px;
    color: black;
    font-weight: bold;
    font-size: 25px;
    background-color: #adb5bd;
}

.abs .ns {
    left: 360px;
    top: 200px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    color: black;
    font-size: 20px;
}

.abs .nt {
    left: 180px;
    top: 200px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    color: black;
    font-size: 20px;
}

.abs .pa {
    left: 360px;
    top: 245px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    color: black;
    font-size: 20px;
}

.abs .x {
    left: 180px;
    top: 245px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    color: #f8f9fa;
    font-size: 20px;
}

.abs .xx {
    left: 125px;
    top: 245px;
    width: 40px;
    height: 35px;
    border-radius: 10px;
    color: black;
    font-size: 20px;
}

.abs .clear {
    left: 240px;
    top: 245px;
    width: 100px;
    height: 23px;
    border-radius: 10px;
    color: black;
    font-size: 15px;
}

.abs .bid {
    left: 250px;
    top: 278px;
    width: 85px;
    height: 35px;
    border-radius: 10px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 3px 5px;
}

.abs .pas {
    left: 365px;
    top: 295px;
    width: 91px;
    height: 25px;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.abs .perm {
    left: 135px;
    top: 295px;
    width: 105px;
    height: 25px;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.matchscore_td {
    background-color: #a7aaad;
}

.matchscore_style {
    font-weight: bold;
    background-color: white;
    border-radius: 10px;
    margin-right: 4px;
    width: 30px;
    text-align: center;
}

.gamescore_style {
    font-weight: bold;
    background-color: white;
    border-radius: 10px;
    margin-right: 4px;
    width: 55px;
    text-align: center;
}

.pointstable tr td {
    padding: 5px 10px;
    border-bottom: 5px solid #fff;
    text-align: center;
    border-radius: 15px;
}

    .pointstable tr td.greentext {
        color: white;
        font-size: 20px;
        font-weight: bold;
    }

.m-auto {
    margin-left: auto;
    margin-right: auto;
}

.settings tr td {
    padding: 2px;
}

.boldAndCenter {
    font-weight: bold;
    text-align: center;
}

.right-menu {
    padding: 10px;
}

.abs .right-menu a, a:hover {
    color: #FCE;
    text-decoration: none;
}


a.tip {
    text-decoration: none
}

    a.tip:hover {
        cursor: help;
        position: relative
    }

    a.tip span {
        display: none
    }

    a.tip:hover span {
        padding: 5px 20px 5px 5px;
        display: block;
        z-index: 100;
        left: 0px;
        margin: 10px;
        width: 40px;
        position: absolute;
        top: 5px;
        color: black;
    }

/* ============= Home Page New Css ============ */
.btn-card {
    background-color: #748A9D;
    color: #fff;
}

.ml-97 {
    margin-left: 50px;
}

.back-lightgreen {
    background-color: lightgreen;
}

.member {
    border: 1px solid #748A9D;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.m-badge {
    position: absolute;
    top: 0;
    left: 15px;
}

ul.m-points {
    padding-top: 10px;
}

    ul.m-points li {
        list-style: none;
        border-bottom: 1px solid #D9E3EC;
        padding: 5px;
        color: #748A9D;
    }

#myTab .nav-link {
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

    #myTab .nav-link.active {
        color: #dc3545 !important;
    }

.tab-pane {
    height: 600px;
    overflow-y: scroll;
}

ul.rules {
    margin-left: 20px;
    margin-top: 15px;
}

    ul.rules li {
        margin-bottom: 15px;
    }

.txt-col {
    color: #dc3545;
}

/* ============= Complete Profile Css ============ */
.com-profile {
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #EEF6FE;
    border-radius: 10px;
    padding: 20px;
}

.reg-pro tr td {
    padding-bottom: 20px;
}

.btn-submit {
    background-color: #07B3FF;
    color: #fff;
}

/* =============== View Profile ==============*/
.verify {
    position: absolute;
    left: 55%;
}

.pro-data {
    padding: 20px;
}

    .pro-data table {
        width: 100%;
    }

        .pro-data table tr td {
            border-bottom: 1px solid #D9E3EC;
            padding: 8px 0;
            font-size: 14px;
        }

.txt-value {
    color: #e17043;
    font-weight: bold;
}

.txt-won {
    color: #1EB107;
    font-weight: bold;
}

.modal-header {
    padding: 5px 1rem;
}

.modal-footer {
    padding: 0 0 15px 0;
    border-top: none;
}

.profilebadge {
    position: absolute;
    left: 12px;
    top: 31px;
    width: 20px !important;
    height: 20px !important;
}


.profilebadgec1 {
    left: 332px;
    top: 485px;
}

.profilebadgec4 {
    left: 326px;
    top: 48px
}

.fileUpload {
    width: 50%;
}

.fileUploadError {
    margin-left: 120px;
}

.validityLabel {
    min-width: 160px;
}

.ranking {
    position: absolute;
    background-color: white;
    font-size: 10px;
    color: mediumblue;
    border-radius: 5px;
    border: 1px solid mediumblue;
    width: 26px;
    padding-left: 1px;
    text-align: center;
}



.rank1 {
    left: 300px;
    top: 464px;
}

.rank2 {
    left: 34px;
    top: 13px;
}

.rank3 {
    left: 34px;
    top: 13px;
}

.rank4 {
    left: 295px;
    top: 26px;
}

.rank5 {
    left: -22px;
    top: 13px;
}

.rank6 {
    left: -22px;
    top: 13px;
}

.games {
    background-color: lightblue;
    font-weight: bold;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: center;
}

.listmargin10 label {
    margin-left: 5px;
}


.profilebadgetoprank {
    left: 30px;
    top: -2px;
}

.profilebadgehighest {
    left: 30px;
    top: -2px;
}

.ranktop {
    left: 7px;
    top: 40px;
}

.bid3 {
    width: 30px !important;
    height: 30px !important;
    font-size: 20px !important;
    position: absolute !important;
    border-radius: 30% !important
}

.bid3c1 {
    left: 102px;
    top: 10px;
}

.bid3c2 {
    left: 30px;
    top: 40px;
}

.bid3c3 {
    left: 30px;
    top: -29px;
}

.bid3c4 {
    left: 92px;
    top: 10px;
}

.bid3c5 {
    left: 30px;
    top: -29px;
}

.bid3c6 {
    left: 30px;
    top: 40px;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }


.abs .cardlog1 {
    left: 260px;
    top: 210px;
    position: absolute;
}

.abs .cardlog2 {
    left: 420px;
    top: 141px;
    position: absolute;
}

.abs .cardlog3 {
    left: 420px;
    top: 20px;
    position: absolute;
}

.abs .cardlog4 {
    left: 260px;
    top: 0px;
    position: absolute;
}

.abs .cardlog5 {
    left: 106px;
    top: 20px;
    position: absolute;
}

.abs .cardlog6 {
    left: 106px;
    top: 141px;
    position: absolute;
}

.log-game-table {
    height: 500px;
    background: none;
    display: flex;
}

    .log-game-table .left {
        width: 27px;
        float: left;
    }

    .log-game-table .center {
        width: 500px;
        float: left;
    }

    .log-game-table .right {
        width: 121px;
        float: left;
    }

.log-points {
    left: 200px;
    top: 125px;
    position: absolute;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    border: 1px solid black;
    padding: 2px;
    min-width: 200px;
    max-width: 200px;
}

.logboard {
    height: 345px;
}


.playlogpointstable tr td {
    padding: 1px 10px;
    border-bottom: 5px;
    text-align: center;
}

    .playlogpointstable tr td.greentext {
        color: darkgreen;
        font-size: 20px;
        font-weight: bold;
    }

.bg-black {
    background-color: black;
}

.top-length {
    top: -40px
}

.teamname {
    padding: 6px;
    text-align: center;
    width: 150px;
    font-size: 12px;
    color: white;
}

.team2color {
    background-color: #946832;
}

.team1color {
    background-color: #69699d;
}

ul.log-cards li {
    list-style: none;
    float: left;
    margin-right: 5px;
}


.loghandCard img {
    width: 55px;
    height: 74px;
}

.log-bid-table-td {
    width: 62px;
    min-width: 62px;
    text-align: center;
    border: 1px solid;
}

.log-hand-name {
    padding: 10px 0px;
    text-align: center;
    font-size: 12px;
    width: 105px;
    min-width: 105px;
}

.moderator {
    margin-right: 5px;
    top: 220px;
    position: absolute;
}

.moderatorName {
    width: 135px;
    background-color: gray;
    border-radius: 4px;
    padding: 0px 2px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.moderatorTable {
    background-color: darkslateblue;
}



.abs .bidarrow {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: antiquewhite;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 75px;
    height: 33px;
    border: 2px solid rgba(0,0,0,0.33);
    line-height: 25px;
    font-size: 20px;
    font-weight: bold;
}

.c1bidbox {
    left: 380px;
    top: 395px;
    position: absolute;
}

.c2bidbox {
    position: absolute;
    left: 660px;
    top: 278px;
}

.c3bidbox {
    left: 660px;
    top: 185px;
    position: absolute;
}

.c4bidbox {
    position: absolute;
    left: 380px;
    top: 48px;
}

.c5bidbox {
    position: absolute;
    left: 112px;
    top: 184px;
}

.c6bidbox {
    position: absolute;
    left: 112px;
    top: 278px;
}

.bgkhaki {
    background-color: khaki !important;
}

.contractBid {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    background-color: khaki;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    border-radius: 30%;
    width: 40px;
    height: 33px;
    border: 2px solid rgba(0,0,0,0.28);
    line-height: 25px;
    font-size: 20px;
    color: black;
    font-weight: bold;
    z-index: 50;
}

.contractBidC1 {
    left: 330px;
    top: 405px;
}

.contractBidC2 {
    left: 648px;
    top: 414px;
}

.contractBidC3 {
    left: 648px;
    top: 67px;
}

.contractBidC4 {
    left: 330px;
    top: 66px;
}

.contractBidC5 {
    left: 30px;
    top: 200px;
}

.contractBidC6 {
    left: 30px;
    top: 290px;
}

.contractBidC1XX {
    left: 515px;
    top: 405px;
}

.contractBidC2XX {
    left: 645px;
    top: 330px;
}

.contractBidC3XX {
    left: 640px;
    top: 130px;
}

.contractBidC4XX {
    left: 515px;
    top: 66px;
}

.contractBidC5XX {
    left: 185px;
    top: 130px;
}

.contractBidC6XX {
    left: 185px;
    top: 330px;
}

.currentbidboxBidByplayInt {
    left: 329px;
    top: 210px;
}

.currentbidbox1playInt {
    left: 379px;
    top: 210px;
}

.currentbidbox2playInt {
    left: 429px;
    top: 210px;
}

.currentbidboxBidByplayKerala {
    left: 354px;
    top: 210px;
}

.currentbidbox1playKerala {
    left: 404px;
    top: 210px;
}

.currentbidbox2playKerala {
    left: 454px;
    top: 210px;
}

.currentbidbox3play {
    left: 479px;
    top: 210px;
}

.currentbidboxBidBybid {
    left: 605px;
    top: -48px;
}

.currentbidbox1bid {
    left: 655px;
    top: -48px;
}

.currentbidbox2bid {
    left: 705px;
    top: -48px;
}

.currentbidbox3bid {
    left: 755px;
    top: -48px;
}

.currentbidboxbackbidKerala {
    left: 600px;
    top: -52px;
    width: 158px;
}

.currentbidboxbackbidInt {
    left: 600px;
    top: -52px;
    width: 208px;
}

.currentbidboxbackplay {
    left: 325px;
    top: 205px;
    display: none;
}

.contractTrump {
    left: 408px;
    top: 210px;
    z-index: 90;
}

.statsbox {
    border: 1px solid #748A9D;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}

.kunuku {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    width: 45px;
    transition: .5s ease;
    color: yellow;
    text-align: center;
    opacity: 1;
    left: -3px;
    z-index: 99;
}
.dialogboxback {
    position: absolute;
    z-index: 98;
    -webkit-box-shadow: 4px 4px 2px 0px rgb(0 0 0 / 33%);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 4px 4px 2px 0px rgb(0 0 0 / 33%);
    border: 1px solid #07B3FF;
    line-height: 25px;
    width: 350px;
    height: 110px;
    border-radius: 5px;
    background-color: white;
    left: 250px;
    top: 200px;
    text-align: center;
}
.command {
    background-color: black;
    color: #fff;
}
.command:hover {
    color: #2655ff;
    text-decoration: none;
}
.trumpclose {
    left: 255px;
    top: 138px;
    position: absolute;
    border: 9px solid #c62616;
    border-radius: 22%;
}