@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

body {
    background-color: transparent;
    font-family: 'Noto Sans KR', sans-serif;
}

input, button {
    font-family: 'Noto Sans KR', sans-serif;
}

.mainRow {
    display: flex;
    flex-direction: row;
    width: 1290px;
    gap: 20px;
}
.mainRow .gameWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mainRow #iframeWrapper {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}
.mainRow #betSlip {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mainRow #leftTime {
    background-color: #501023;
    color: white;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    text-align: center;
}
.mainRow .leftTime--round, .mainRow #gameName {
    color: #ffc428;
}
.mainRow .leftTime--time {
    color: #ffc428;
    font-size: 22px;
}
.mainRow #oddsWrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mainRow .betItemWrapper {
    background-color: white;
    border-radius: 10px;
    padding: 5px 5px 0 5px;
}

.mainRow #betAmountWrapper {
    margin-top: 10px;
    background-color: #e5e5e5;
    border-radius: 10px;
    padding: 8px;
}
.mainRow #betAmountWrapper #betAmountWrapper--betItem {
    border: 1px solid gray;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    background-color: white;
}
.mainRow #betAmountWrapper .betAmountWrapper--row {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    border-bottom: 1px dotted gray;
    font-size: 14px;
    font-weight: bold;
    padding: 0 5px 5px 5px;
    vertical-align: middle;
}
.mainRow #betAmountWrapper .betAmountWrapper--row .betAmountWrapper--row-label {
    flex: 1;
    height: 20px;
    line-height: 20px;
}
.mainRow #betAmountWrapper .betAmountWrapper--row .betAmountWrapper--row-value {
    flex: 1;
    text-align: right;
    vertical-align: middle;
    height: 20px;
}
.mainRow #betAmountWrapper .betAmountWrapper--row .betAmountWrapper--row-value input {
    width: 120px;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 3px;
    text-align: right;
    vertical-align: middle;
    margin-top: -4px;
}
.mainRow #betAmountWrapper #betAmountWrapper--selector {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}
.mainRow #betAmountWrapper #betAmountWrapper--selector .betAmountWrapper--selector-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex: 1;
}
.mainRow #betAmountWrapper #betAmountWrapper--selector .betAmountWrapper--selector-row button {
    flex: 1;
    cursor: pointer;
    display: inline;
    font-weight: 600;
    height: 25px;
    padding: 0;
    border-radius: 5px;
    transition: 0.2s;
    box-sizing: border-box;
    text-align: center;
    color: #333;
    box-shadow: inset 2px 2px 3px rgb(255 255 255 / 30%), inset -2px -2px 3px rgb(0 0 0 / 20%);
    background: #fff;
    border: 1px solid #ccc;
    font-size: 13px;
}

.mainRow #betAmountWrapper #betAmountWrapper--button {
    font-size: 20px;
    width: 100%;
    display: block;
    font-weight: 700;
    height: 40px;
    background: #cc001b;
    border: 1px solid #000;
    border-radius: 5px;
    color: #fff;
    margin-top: 10px;
    box-shadow: inset 0 2px 0 0 rgb(255 255 255 / 30%);
    background: linear-gradient(to bottom, rgba(154,16,53,1) 0%,rgba(71,16,33,1) 100%);
}
.mainRow #betAmountWrapper #betAmountWrapper--button:disabled {
    background: #62000d;
    background: linear-gradient(to bottom, rgb(75, 8, 26) 0%, rgb(21, 4, 9) 100%);
}

.mainRow #betListWrapper table {
    width: 100%;
    border-collapse: collapse;
}
.mainRow #betListWrapper table thead tr th {
    background: #333;
    color: white;
    text-align: center;
    font-size: 14px;
    padding: 5px 0;
}
.mainRow #betListWrapper table thead tr th:first-child {
    border-top-left-radius: 10px;
}
.mainRow #betListWrapper table thead tr th:last-child {
    border-top-right-radius: 10px;
}
.mainRow #betListWrapper table tbody tr td {
    text-align: center;
    background-color: white;
    font-size: 14px;
    padding: 3px 0;
}
.mainRow #betListWrapper table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
.mainRow #betListWrapper table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.BetItem .BetItem--header {
    background-color: #333;
    font-size: 13px;
    color: #ffc428;
    text-align: center;
    padding: 3px;
    border-radius: 8px;
    font-weight: bolder;
}
.BetItem .BetItem--wrapper {
    margin: 5px 0;
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.BetItem .BetItem--wrapper .BetItem--item {
    cursor: pointer;
    padding: 6px 0;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 0 2px #000;
    border-radius: 15px;
    font-weight: bolder;
    transition-duration: 300ms;
    box-sizing: border-box;
}
.BetItem .BetItem--wrapper .BetItem--item:hover {
    transition-duration: 300ms;
}
.BetItem .BetItem--wrapper .BetItem--item:nth-child(2n-1) {
    background-color: #207ce5;
    border: 3px solid #207ce5;
}
.BetItem .BetItem--wrapper .BetItem--item:not(.selected):nth-child(2n-1):hover {
    background-color: #175eb0;
}
.BetItem .BetItem--wrapper .BetItem--item:nth-child(2n) {
    background-color: #ff3019;
    border: 3px solid #ff3019;
}
.BetItem .BetItem--wrapper .BetItem--item:not(.selected):nth-child(2n):hover {
    background-color: #b72211;
}
.BetItem .BetItem--wrapper .BetItem--item.selected {
    transition-duration: 300ms;
    background-color: black;
    color: #ffc428;
}

.format-date, .format-time {
    display: inline-block;
}