/* table */
.proto-table {
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
}

.proto-table > tbody > tr > td {text-align: center; white-space: nowrap;}
.proto-table > tbody > tr > td:nth-child(9) {padding:0 9px;}
.proto-table > tbody > tr > td:nth-child(10) >img {width:16px !important}
.proto-table > tbody > tr > td:nth-child(9) div {
    padding:3px 0;
    display: inline-block;
    width:40px; height:23px; font-size:11px !important; color:#fff; text-align: center; letter-spacing: -1px; border-radius: 2px; border:1px solid #000;
}

[data-prop="percent1"].cancel, [data-prop="percent2"].cancel, [data-prop="percent3"].cancel {
    text-decoration: line-through;
}

/* PC */
.proto-table > tbody > tr.bg-darkgray {
    background-color:#a9a9a9 !important;
}

.proto-table > tbody > tr > td:nth-child(2) > img {width:14px; vertical-align: -2px;}

.proto-table > tbody > tr > td:nth-child(1) {
    width: 49px !important;
    height: 40px;
    font-weight: normal;
    font-size: 13px;
}/* add4 coding */
.proto-table > tbody > tr > td:nth-child(1) [class$="_18dp"]:before {margin: 0 3px;}

.proto-table > tbody > tr > td:nth-child(2) {
    padding-left: 10px;
    text-align: left;
    width: 75px;
}

.proto-table > tbody > tr > td:nth-child(3) {
    width: 55px;
}
.proto-table > tbody > tr > td:nth-child(3) div {display:inline; margin:0 0 0 3px;}
.proto-table > tbody > tr > td:nth-child(4) {
    width: 55px;
}

.proto-table > tbody > tr > td:nth-child(5),
.proto-table > tbody > tr > td:nth-child(7) {
    width: 170px; /* add coding */
}

.proto-table > tbody > tr > td:nth-child(6) {
    width: 120px; /* add coding */
}

.proto-table > tbody > tr > td:nth-child(8) {
    width: 40px;
}

.proto-table > tbody > tr > td:nth-child(9),
.proto-table > tbody > tr > td:nth-child(10) {
    width: 30px;
}

.proto-table > thead > tr > th:nth-child(6),
.proto-table > thead > tr > th:nth-child(7),
.proto-table > tbody > tr > td:nth-child(6),
.proto-table > tbody > tr > td:nth-child(7) {
    border-left:none;
}

.proto-table .percent-button {
    position: relative;
    user-select: none;
    margin: 2px !important;
    padding: 0px 0 3px !important;
}

.proto-table .percent-button [data-prop] {
    font-weight: bold;
    font-family: tahoma;
}

.proto-table .percent-button > div {
    display: inline-block;
    font-size:14px;
    font-weight:800;
}/* add4 coding */

/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .proto-table > tbody > tr:hover {
        background: #a9a9a9 !important;
    }
}
*/

.proto-table > tbody > tr > td:nth-child(5) > .percent-button > [data-prop="team1"],
.proto-table > tbody > tr > td:nth-child(7) > .percent-button > [data-prop="percent2"] {
    float: left;
    padding-top: 6px;
    padding-left: 10px;
}/* add4 coding */

.proto-table > tbody > tr > td:nth-child(6) > .percent-button > [data-prop] {
    padding-top: 6px;
    text-align: center;
}/* add4 coding */

.proto-table > tbody > tr > td:nth-child(5) > .percent-button > [data-prop="percent1"],
.proto-table > tbody > tr > td:nth-child(7) > .percent-button > [data-prop="team2"] {
    float: right;
    padding-top: 6px;
    padding-right: 10px;
}/* add4 coding */

.proto-table > tbody > tr > td:nth-child(8) {
    padding-left: 5px;
    padding-right: 5px;
}

.percent-button {
    border: 1px solid #bdc7d8;
    color: black;
    cursor: pointer;
    margin: 9px;
    padding:0 0 6px; overflow: hidden;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e8f5f4+49,dcf0ee+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(232,245,244,1) 49%, rgba(220,240,238,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(232,245,244,1) 49%,rgba(220,240,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(232,245,244,1) 49%,rgba(220,240,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcf0ee',GradientType=0 ); /* IE6-9 */
    border-radius:3px;
    -ms-user-select: none;
    -webkit-user-select: none;
}/* add4 coding */

.selected {background: orange;}
.selected.disabled {color: black !important;}
.shaft-selected {background: skyblue;}

.percent-button.disabled {
    background: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.percent-button.selected {
    border: 1px solid #ff5a00;
}

.percent-button.shaft-selected {
    border: 1px solid #005aff;
}

.team1 .percent-button span {font-size:11px;letter-spacing: -0.5px;font-weight:bold; vertical-align: 1px;} /* add coding */

[data-prop^="percent"] {
    font-weight: bold;
}

.detail-img {
    cursor: pointer;
}

.proto-table {
    border-top: 2px solid #e60510;
}

/* 프로토: 조합기 */
#combiner {
    border: 1px solid #d2d2d2;
    border-top: none;
    background-color: #fff;
    width: 100%;
}

#combiner-ul {
    background-color: #edf0f2;
    width: 100%; box-sizing:border-box;
    padding:6px 1.5% 0;border-bottom:1px solid #d2d2d2;
}
#combiner-ul li {user-select: none; width:16.66%;}
#combiner-ul li a.nav-link {text-align:center; padding:6px 0; font-size:11px; color:#666; font-weight: 600; border:1px solid #d2d2d2; border-left:none; border-radius:3px 3px 0 0}
#combiner-ul li:first-child a.nav-link {border-left:1px solid #d2d2d2; }
#combiner-ul li a.nav-link.active { color:#e60510 !important; border-bottom:1px solid #fff;}

#combiner-result {
    padding:16px 18px;
    background-color: #001329;
    color:#fff;
    border-top:1px solid #d2d2d2;
}
#combiner-result .orange, #comb-result .orange {color:#fc7800 !important; font-family:"tahoma"; font-weight: 600;}
#combiner-result .top {list-style: none}
#combiner-result .top li { display: inline-block; width:45%; font-weight: 600; list-style: none}
#combiner-result .top li .form-control {display: inline-block; width:70%; border: none;font-family:"tahoma" ;font-weight: 600; background-color: #edf0f2;}
#combiner-result .top li:last-child {width:100%;}
#combiner-result .bottom {margin:0 0 14px}
#combiner-result .bottom .form-control {display: inline-block; vertical-align:middle; width:58%; padding:0 13px; text-align: right;}
#combiner-result .bottom > span {display: inline-block}
#combiner-print-button {display: block; width:100%; height:45px;font-weight: 600; font-size:14px; line-height:45px; letter-spacing: -1px;padding:0; text-align: center;}
#betmoney-up {width:18px; height: 18px; text-indent: -99999px;background: url('./img/proto/bt_up.png') no-repeat left top;}
#betmoney-down {width:18px; height: 18px; text-indent: -99999px; background: url('./img/proto/bt_dw.png') no-repeat left top;}

/* 프로토: 금액리셋 */
.reset_list {overflow: hidden;}
.reset_list li {float: left; width:20%; padding:0 1.5px; box-sizing: border-box; }
.reset_list li button {width:100%;}

/* 프로토 타입 */
.proto-type1, .proto-type2, .proto-type3, .proto-type4, .proto-type5, .proto-type6, .proto-type7, .proto-type8, .proto-type11, .proto-type21 {
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 11px !important;
    height: 16px;
    user-select: none;
    width: 46px;
}

.proto-type1, .proto-type11 {
    background: #bcbcbc;
}

.proto-type2 {
    background: #ff8a00;
}

.proto-type3 {
    background: #00a0e4;
}

.proto-type7{background: #bcbc56}

.proto-type4, .proto-type5, .proto-type6, .proto-type8, .proto-type21 {
    background: #333333;
}

.detail-img {
    background: #fc7800;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 12px !important;
    font-weight: bold;
    height: 19px;
    user-select: none;
    width: 16px;
}