@charset "utf-8";

/****************************************************************************************************************************************
베팅내역 및 경기결과
*****************************************************************************************************************************************/
.history-wrap {position: relative; margin:0 auto; padding:0 15px 40px 15px; width: 100%;}

/* history-top */
.history-top {position: relative; margin:20px 0; padding:10px 0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.history-info {font-size: 18px; font-weight: 500; color: #6a7f9a;}
.history-info > span {font-size: 18px; font-weight: 500; color:#fff;}

/* history-date */
.history-date {position: relative; height: 44px; display: flex; justify-content: flex-end; align-items: center; gap:10px;}
.date-box {position: relative; padding:0; height: 100%; background: #1b222c; border-radius: 5px;}
.date-box > select {display:block; padding: 0 10px; min-width: 130px; height: 100%; line-height: 44px; font-weight: 500; color:#9f9f9f; background: none; border: none;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
}
.date-box > select::-ms-expand {display: none;}
.date-box > .select-icon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 500; color: #9f9f9f; pointer-events: none;}
.date-box > select > option {font-weight: 500; color:#fff; background: #1b222c;}

.date-box > input {display:block; padding: 0 10px; min-width: 130px; line-height: 44px; font-weight: 500; color:#9f9f9f; background: none; border: none;}
.date-box > select:focus,
.date-box > input:focus {outline: none;}

/* 기본 달력 아이콘 제거 */
.date-input::-webkit-calendar-picker-indicator {opacity: 0;}
.calendar-icon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 500; color: #9f9f9f; pointer-events: none;}

.btn-date {position: relative; padding:0 20px; line-height: 44px; color:#fff; background: #54565a; border-radius: 5px;}

@media (hover: hover) and (pointer: fine) {
    .btn-date:hover {background: #717172;}
}

/****************************************************************************************************************************************
bet-group
*****************************************************************************************************************************************/
.bet-group {position: relative; margin:5px auto; padding:10px 15px; width: 100%; background: #151b23; border-radius: 10px;}
.bet-info {position: relative; margin:0 0 10px 0; padding:10px 0; width: 100%; display: flex; justify-content: space-between; align-items: center;}

ul.left-info,
ul.right-info {display: flex; align-items: center; gap:10px;}
ul.left-info {justify-content:flex-start;}
ul.right-info {justify-content:flex-end;}

ul.left-info > li,
ul.right-info > li {font-size: 15px; font-weight: 500; color:#6a7f9a;}
ul.right-info > li > button {padding:1px 10px 3px 10px; font-size: 13px; font-weight: bold; color:#fff; background:#ff0000; border-radius: 5px;}

/* bet-choice */
.bet-inner {position: relative; margin: 0 auto; padding:0; width: 100%; text-align: center;}
ul.bet-choice {position:relative; margin:2px 0; padding:0; width: 100%; display: flex; justify-content:center; align-items: center; gap: 4px;}
ul.bet-choice > li {position:relative; flex: 1; margin:0 auto; padding:0 10px; line-height: 50px; text-align: center; font-weight:600; color: #ded9e3; background: #263140; border-radius: 5px; cursor: default;}
ul.bet-choice > li.bet-team {flex:2; min-width: 290px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.bet-choice > li.bet-short {flex:0.5;} 
ul.bet-choice > li.bet-On {color: #ffd3b5; background: #67300b; border: 1px solid #ff7a21;}


@media (hover: hover) and (pointer: fine) {
    ul.right-info > li > button:hover {background:#f6493c;}
}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 800px) { 
    .history-wrap {padding:0 5px;}

    /* history-top */
    .history-top {margin:10px 0; justify-content: center; align-items: flex-start; flex-direction: column;}
    .history-info {width:100%; font-size: 14px;}
    .history-date {margin-top:10px; gap:2px; width: 100%; height: auto; flex-wrap: wrap; justify-content: space-between;}
    .date-box {margin-top:3px; width: calc(100% / 2 - 2px);}
    .date-box:first-child {width: 100%;}
    .date-box > select,
    .date-box > input {min-width: 90%; width: 90%; height: 35px; line-height: 35px;}
    .btn-date {margin-top:3px; width: calc(100% / 2 - 2px); line-height: 35px;}

    /* bet-group */
    .bet-group {padding:10px 8px; border: 1px #495767 solid;}
    .bet-info {margin:0 0 5px 0; padding:0; justify-content: center; align-items: flex-start; flex-direction: column;}

    ul.left-info, 
    ul.right-info {gap:5px; width: 100%;}
    ul.right-info {justify-content: flex-start; flex-wrap: wrap;}

    ul.left-info > li, 
    ul.right-info > li,
    ul.left-info > li > span, 
    ul.right-info > li > span {font-size: 13px;}

    .bet-inner {padding-bottom:5px; overflow-x: auto;}
    ul.bet-choice {width: 850px; gap:2px; justify-content: space-between;}
    ul.bet-choice > li.mo-bethid {display: none;}
    ul.bet-choice > li {padding:0 5px; line-height: 35px; font-size: 12px;}
    ul.bet-choice > li.bet-team {flex: 1.5; min-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}

/* InfiniteScroll wrapper div 스타일 */
#game-result-scroll .infinite-scroll-component__outerdiv,
#game-result-scroll .infinite-scroll-component {width: 100% !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important;}
#game-result-scroll .infinite-scroll-component__outerdiv {position: relative !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important;}
#game-result-scroll .infinite-scroll-component {height: auto !important; overflow: visible !important; width: 100% !important; max-width: 100% !important;}
#game-result-scroll .infinite-scroll-component > * {width: 100% !important; box-sizing: border-box !important;}