@font-face {
    font-family: 'NaverNanumSquareNeo';
    src: url('/NaverNanumSquareNeo/Webfont/woff/NanumSquareNeo-Variable.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
#chatRoom *, #chatInput *{
    font-family: "NaverNanumSquareNeo";
}
#root {
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
}
body{
}
.titleHeader {
    margin: 10px 0 !important;
}

.titleHeader .headerIcon {
    vertical-align: middle !important;
}

.titleHeader .headerIcon .backButton{
    width: 38px !important;
}

.headerTitle {
    font-size: 2rem !important;
}

.backButton {
    width: 20rem;
}


/* == 공통 스타일 지정 == */

/* 공통 - 레이아웃 관련 */
.header-fix-20 {
    width: 100%;
    height: 20vh;
}
.content-fix-80 {
    width: 100%;
    height: 80vh;
    overflow-y: auto;
}

.header-fix-8 {
    width: 100%;
    height: 8vh;
}
.content-fix-84 {
    width: 100%;
    height: 84vh;
    padding-bottom: 2vh;
}
.content-fluid-fix {
    width: 100%;
    padding-top: 10vh;
    height: 100vh;
    padding-bottom: 10vh;
}
.footer-fix-8 {
    width: 100%;
    height: 8vh;
    position: absolute;
    bottom: 0;
}
.content-fix-92 {
    width: 100%;
    height: 92vh;
    overflow-y: hidden;

}

/* 공통 - 링크 색상 */
a {
    --bs-link-color: #111;
    color: #111 !important;
}
a:hover {
    --bs-link-hover-color: #116e51;
    color: #116e51 !important;
}

/* 공통 - 탭(tabs) 관련 */
.pm-under-tab.nav.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-radius: none;
}

.pm-under-tab.nav.nav-tabs .nav-link {
    color: #333333;
}

.pm-under-tab.nav.nav-tabs .nav-link.active {
    color: #111111;
    font-weight: 600;
    border-bottom: 2px solid #000;
    padding-bottom: 1vh;
}

.pm-under-tab.bg-pm-green.nav.nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.5);
    background-color: #086e50;
}

.pm-under-tab.bg-pm-green.nav.nav-tabs .nav-link.active {
    color: #fff;
    font-weight: 600;
    border-bottom: 3px solid #fff;
    padding-bottom: 1vh;
}

.pm-under-tab.relay.nav.nav-tabs {
    position: fixed;
    width: 100%;
}
.textrelay .tab-content{
    padding-top: 50px;
}
.pm-under-tab.relay.nav.nav-tabs .nav-link {
    color: rgba(17, 17, 17, 0.5);
}

.pm-under-tab.relay.nav.nav-tabs .nav-link.active {
    color: #116e51;
    font-weight: 600;
    border-bottom: 3px solid #116e51;
    padding-bottom: 1vh;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: #fff;
}

.pm-hr-weight {
    border-top: 1vh solid #f1f1f1;
    opacity: 1;
}


.pm-terms-tab.nav.nav-tabs {
    font-size: 1.4rem;
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-radius: none;
    flex-wrap: nowrap;
    width: 100vw;
    overflow-x: scroll;
    white-space: nowrap;
}

.pm-terms-tab.nav.nav-tabs::-webkit-scrollbar {
    height:1px;
}
.pm-terms-tab.nav.nav-tabs::-webkit-scrollbar-thumb {
    height:1px;
}

.pm-terms-tab.nav.nav-tabs .nav-link {
    color: #333333;
    width: 100%;
}

.pm-terms-tab.nav.nav-tabs .nav-item {
    width: 100%;
}

.pm-terms-tab.nav.nav-tabs .nav-link.active {
    width: 100%;
    color: #111111;
    font-weight: 600;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5vh;
}

/* 공통 - 아이콘(svg) 색상 */
.icon.fill.white { fill: #fff; }
.icon.stroke.white { stroke: #fff; }
.icon.fill.green { fill: #116e51; }
.icon.stroke.green { stroke: #116e51; }
.icon.fill.dullgreen { fill: #73b394; }
.icon.stroke.dullgreen { stroke: #73b394; }
.icon.fill.gray { fill: #d4d4d4; }
.icon.stroke.gray { stroke: #d4d4d4; }
.icon.fill.darkgray { fill: #424142; }
.icon.stroke.darkgray { stroke: #424142; }
.icon.fill.mint { fill: #1cb484; }
.icon.stroke.mint { stroke: #1cb484; }
.icon.fill.yellow { fill: #fff368; }
.icon.stroke.yellow { stroke: #fff368; }
.icon.fill.team { fill: #A2A2A2; }

.icon.iw-20 { width: 2rem; margin-right: .5rem; }
.icon.iw-25 { width: 2.5rem; margin-right: .5rem; }
.icon.iw-30 { width: 3rem; margin-right: .5rem; }


.stamp { width: 10rem; margin-right: 0.5rem; margin-bottom: .15rem; }
/* 공통 - 아이콘 크기 */
/* .icon.iwr-1 { width: 4.25rem; margin-right: 0.5rem; margin-bottom: .15rem; }
.icon.iwr-2 { width: 3.75rem; margin-right: 0.5rem; margin-bottom: .15rem; }
.icon.iwr-2-5 { width: 3rem; margin-right: 0.5rem; margin-bottom: .15rem; }
.icon.iwr-3 { width: 2.25rem; margin-right: 0.5rem; margin-bottom: .15rem; }
.icon.iwr-4 { width: 2rem; margin-right: 0.5rem; margin-bottom: .15rem; }
.icon.iwr-5 { width: 1.5rem; margin-right: 0.5rem; margin-bottom: .15rem; } */

.icon.iwr-1 { width: 9vw; margin-right: 1vw; margin-bottom: .3vh; }
.icon.iwr-2 { width: 7vw; margin-right: 1vw; margin-bottom: .3vh; }
.icon.iwr-2-5 { width: 6vw; margin-right: 1vw; margin-bottom: .3vh; }
.icon.iwr-3 { width: 5vw; margin-right: 1vw; margin-bottom: .3vh; }
.icon.iwr-4 { width: 4vw; margin-right: 1vw; margin-bottom: .3vh; }
.icon.iwr-5 { width: 3vw; margin-right: 1vw; margin-bottom: .3vh; }

/* .icon.iwn-1 { width: 4.25rem; margin-bottom: .15rem; }
.icon.iwn-2 { width: 3.75rem; margin-bottom: .15rem; }
.icon.iwn-3 { width: 2.25rem; margin-bottom: .15rem; }
.icon.iwn-4 { width: 2rem; margin-bottom: .15rem; }
.icon.iwn-5 { width: 1.5rem; margin-bottom: .15rem; }
.icon.iwn-6 { width: 1rem; margin-bottom: .15rem; }  */
  
.icon.iwn-1 { width: 9vw; margin-bottom: .3vh; }
.icon.iwn-2 { width: 7vw; margin-bottom: .3vh; }
.icon.iwn-3 { width: 5vw; margin-bottom: .3vh; }
.icon.iwn-4 { width: 4vw; margin-bottom: .3vh; }
.icon.iwn-5 { width: 3vw; margin-bottom: .3vh; }
.icon.iwn-6 { width: 2vw; margin-bottom: .3vh; }
.icon.pancel { width: 4.6vw; margin-bottom: .3vh; }
.icon.my { width: 3vw; } 
  

/* .icon.iw-1 { width: 4.25rem; } 
.icon.iw-2 { width: 3.75rem; }
.icon.iw-3 { width: 2.25rem; }
.icon.iw-4 { width: 2rem; }
.icon.iw-5 { width: 1.5rem; }
.icon.iw-6 { width: 1rem; } */

.icon.iw-1 { width: 9vw; }
.icon.iw-2 { width: 7vw; }
.icon.iw-3 { width: 5vw; }
.icon.iw-4 { width: 4vw; }
.icon.iw-5 { width: 3vw; }
.icon.iw-6 { width: 2vw; }

/* 공통 - 글씨 크기 */
/* .fsz-1 { font-size: 4rem!important; }
.fsz-2 { font-size: 3.5rem!important; }
.fsz-3 { font-size: 3.25rem!important; }
.fsz-4 { font-size: 3rem!important; }
.fsz-5 { font-size: 2.75rem!important; }
.fsz-6 { font-size: 2.5rem!important; }
.fsz-7 { font-size: 2.25rem!important; }
.fsz-8 { font-size: 2rem!important; }
.fsz-9 { font-size: 1.75rem!important; }
.fsz-10 { font-size: 1.5rem!important; }
.fsz-11 { font-size: 1.25rem!important; }
.fsz-12 { font-size: 1rem!important; } */

.fsz-1 { font-size: 8vw!important; }
.fsz-2 { font-size: 7vw!important; }
.fsz-3 { font-size: 6.5vw!important; }
.fsz-4 { font-size: 6vw!important; }
.fsz-5 { font-size: 5.5vw!important; }
.fsz-6 { font-size: 5vw!important; }
.fsz-7 { font-size: 4.5vw!important; }
.fsz-8 { font-size: 4vw!important; }
.fsz-9 { font-size: 3.5vw!important; }
.fsz-10 { font-size: 3vw!important; }
.fsz-11 { font-size: 2.5vw!important; }
.fsz-12 { font-size: 2vw!important; }

/* 공통 - 글씨 굵기 */
.fbd-1 { font-weight:600!important; }
.fbd-2 { font-weight:500!important; }
.fbd-3 { font-weight:400!important; } /* 기본굵기 */
.fbd-4 { font-weight:300!important; }

/* 공통 - 글씨 색상 */
.txt-pm-black { color: #111111!important; }
.txt-pm-gray { color: rgba(51, 51, 51, 0.7)!important; }
.txt-pm-mint { color: #1cb484!important; }
.txt-pm-orange { color: #ff8135!important; }
.txt-pm-lightmint { color: #2bfdbc!important; }
.txt-pm-green { color: #116e51!important; }
.txt-pm-purple { color: #7483b7!important; }
.txt-pm-soccer { color: #169f74!important; }
.txt-pm-basketball { color: #d59020!important; }
.txt-pm-basetball { color: #25c0be!important; }
.txt-pm-vallyball { color: #b12d6d!important; }
.txt-pm-win { color: #ff3939!important; }
.txt-pm-lose { color: #8c77ff!important; }
.txt-pm-due { color: #56be86!important; }
.txt-pm-minus { color: #2c54e7!important; }
.txt-pm-plus { color: #ff3d3d!important; }
.txt-pm-ama { color: #3494c0!important; }
.txt-pm-semi { color: #a287ce!important; }
.txt-pm-pro { color: #e25761!important; }
.txt-pm-gold { color: #f9c33b!important; }

/* 공통 - 외곽선 색상 */
.bor-pm-black { --bs-border-color: #111111!important; }
.bor-pm-gray { --bs-border-color: rgba(17, 17, 17, 0.5)!important; }
.bor-pm-lightgray { --bs-border-color: #f4f4f4!important;}
.bor-pm-mint { --bs-border-color: #1f9b74!important; }
.bor-pm-green { --bs-border-color: #116e51!important; }
.bor-pm-purple { --bs-border-color: #7483b7!important; }
.bor-pm-win { --bs-border-color: #ff3939!important; }
.bor-pm-lose { --bs-border-color: #8c77ff!important; }
.bor-pm-due { --bs-border-color: #56be86!important; }
.bor-pm-bronze { border-color: #8c6747!important; }
.bor-pm-silver { border-color: #7e7e7e!important; }
.bor-pm-gold { border-color: #d1a71e!important; }
.bor-pm-premium { --bs-border-color: #fc8288!important; }
.bor-pm-combo { --bs-border-color: #dfbda0!important; }
.bor-pm-lotto { --bs-border-color: #ffe89e!important; }


/* 공통 - 배경 색상 */
.bg-pm-black { background-color: #000000; }
.bg-pm-white { background-color: #ffffff; }
.bg-pm-gray { background-color: #f4f4f4 !important; }
.bg-pm-green { background-color: #116e51; color: #fff; }
.bg-pm-yellow { background-color: #ffdf1b; }
.bg-pm-win { background-color: #fff1f1; }
.bg-pm-lose { background-color: #f4f2ff; }
.bg-pm-due { background-color: #ecfff5; }
.bg-pm-ama { background-color: #3494c0; color: #fff; }
.bg-pm-semi { background-color: #a287ce; color: #fff; }
.bg-pm-pro { background-color: #e25761; color: #fff; }
.bg-pm-premium { background-color: #e9454d; color: #fff; }
.bg-pm-combo { background-color: #d39662; color: #fff; }
.bg-pm-lotto { background-color: #ffd13a; color: #fff; }



/* 승패무 */
.circle-pm {
    display: inline-block;
    vertical-align: middle;
    font-size: 2.5vw;
    font-weight: bold;
    text-align: center;
    width: 5vw;
    height: 5vw;
    padding: 0.2vh 0;
    margin-right: 0.5vw;
}
.circle-pm.win{
    background-color: #fff1f1;
    color: #ff3939!important;
    --bs-border-color: #ff3939!important;
}
.circle-pm.lose {
    background-color: #f4f2ff;
    color: #8c77ff!important;
    --bs-border-color: #8c77ff!important;
}
.circle-pm.due {
    background-color: #ecfff5;
    color: #56be86!important;
    --bs-border-color: #56be86!important;
}


/* 공통 - 입력폼 */
.form-control.ip-pm-gray {
    background-color: #f7f7f7;
    border-color: #dddddd;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.2em;
}

.form-control.ip-pm-gray-my {
    background-color: #f7f7f7;
    border-color: #dddddd;
    padding-top: 0.8vh;
    padding-bottom: 0.8vh;
    font-size: 1.7vh;
}

.form-control.ip-pm-white {
    color: rgba(51, 51, 51, 0.5);
    background-color: transparent;
    border-color: #dddddd;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.2em;
}

/* 공통 - 게시물 텍스트 박스 */
.text-area {
    white-space: pre-line;
}

/* 공통 - 버튼 색상 */
.btn.btn-pm-green {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: rgba(17, 110, 81, 0.7);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(17, 110, 81, 0.7);
    --bs-btn-hover-color: rgba(17, 110, 81, 0.7);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: rgba(17, 110, 81, 0.7);
    --bs-btn-active-bg: rgba(17, 110, 81, 0.7);
    --bs-btn-active-color: rgba(17, 110, 81, 0.7);
    --bs-btn-active-border-color: rgba(17, 110, 81, 0.7);
}

.btn.btn-pm-green.active {
    --bs-btn-color: #fff;
    --bs-btn-bg: #116e51;
    --bs-btn-active-bg: #116e51;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #116e51;
}

.btn.btn-pm-darkgreen {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: #fff;
    --bs-btn-bg: #133e31;
    --bs-btn-border-color: #116e51;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #133e31;
    --bs-btn-hover-border-color: #116e51;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #133e31;
    --bs-btn-active-border-color: #116e51;
}

.btn.btn-pm-darkgreen.active {
    --bs-btn-color: #fff;
    --bs-btn-bg: #116e51;
    --bs-btn-active-bg: #116e51;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #116e51;
}

.btn.btn-pm-gray {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: rgba(17, 17, 17, 0.5);
    --bs-btn-bg: #f7f7f7;
    --bs-btn-border-color: #999999;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d0d0d0;
    --bs-btn-hover-border-color: #d0d0d0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9e9e9e;
    --bs-btn-active-border-color: #9e9e9e;
}

.btn.btn-pm-gray.active {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: #fff;
    --bs-btn-bg: #d0d0d0;
    --bs-btn-border-color: #d0d0d0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d0d0d0;
    --bs-btn-hover-border-color: #d0d0d0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9e9e9e;
    --bs-btn-active-border-color: #9e9e9e;
}

.btn.btn-pm-darkgray.active {
    font-weight: 500;
    padding-top: .9rem;
    padding-bottom: .9rem;
    color: #e0e0e0!important;

    --bs-btn-color: #e0e0e0;
    --bs-btn-bg: #444444;
    --bs-btn-border-color: #444444;
    --bs-btn-hover-color: #e0e0e0;
    --bs-btn-hover-bg: #444444;
    --bs-btn-hover-border-color: #444444;
    --bs-btn-active-color: #e0e0e0;
    --bs-btn-active-bg: #444444;
    --bs-btn-active-border-color: #444444;
}

.btn.btn-pm-white {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: #444444;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #bbbbbb;
    --bs-btn-hover-color: #444444;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #bbbbbb;
    --bs-btn-active-color: #444444;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #bbbbbb;
}
.btn.btn-pm-white-only-color {
    --bs-btn-color: #444444;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #bbbbbb;
    --bs-btn-hover-color: #444444;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #bbbbbb;
    --bs-btn-active-color: #444444;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #bbbbbb;
}

.btn.btn-pm-yellow {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: #111111;
    --bs-btn-bg: #ffdf1b;
    --bs-btn-border-color: #ffdf1b;
    --bs-btn-hover-color: #444444;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #bbbbbb;
    --bs-btn-active-color: #444444;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #bbbbbb;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #2D2805;
    --bs-btn-disabled-border-color: #2D2805;
}

.btn.btn-pm-mpevent {
    width: 88%;
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: rgba(17, 17, 17, 0.5);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #999999;
    --bs-btn-hover-color: rgba(17, 17, 17, 0.5);
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #999999;
    --bs-btn-active-color: rgba(17, 17, 17, 0.5);
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #999999;
}

.btn.btn-pm-mpevent.active {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;

    --bs-btn-color: #fff;
    --bs-btn-bg: #116e51;
    --bs-btn-border-color: #116e51;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #116e51;
    --bs-btn-hover-border-color: #116e51;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #116e51;
    --bs-btn-active-border-color: #116e51;
}

.btn.btn-pm-moadmin {
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-width: 0.5px;
    font-size: 1.8rem;

    --bs-btn-color: rgb(36, 118, 90);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #000000;
    --bs-btn-hover-color: rgb(36, 118, 90);
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-active-color: rgb(36, 118, 90);
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #000000;
}

/* 공통-박스 */
.box-pm-lightblue {
    color: #7092ff;
    background-color: #f0f4ff;
    border: 1px solid #7092ff;
}
.box-pm-gray {
    color: #444749;
    background-color: #f5f5f5;
    border: 1px solid #abb1c9;
    text-align: center;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    font-weight: 500;
    font-size: 3.5vw;
}



/* 공통-커스텀 토글버튼 */
.pm-toggle.form-switch .form-check-input {
    background-color: #bcbcbc;
    border: none;
    width: 2.5em;
    margin-left: -3em;
    background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23e7e7e7%27/%3e%3c/svg%3e');
    background-size: 30px 30px;
}

.pm-toggle.form-switch .form-check-input:checked {
    background-color: #b9e4d7;
    background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23116e51%27/%3e%3c/svg%3e');
    background-size: 30px 30px;
}

.pm-toggle .form-check.form-switch > input[type="checkbox"] {
    display: none;
}

.pm-toggle .form-check.form-switch > label {
    cursor: pointer;
    height: 0;
    position: relative;
    width: 4rem;
    top: -.4rem;
}

.pm-toggle .form-check.form-switch > label::before {
    background: #bcbcbc;
    border-radius: 1rem;
    content: '';
    margin-top: -.8rem;
    position: absolute;
    transition: all 0.4s ease-in-out;
    width: 4rem;
    height: 1.5rem;
}

.pm-toggle .form-check.form-switch > label::after {
    background: #e7e7e7;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    border-radius: 2.5rem;
    content: '';
    left: -.5rem;
    margin-top: -.9rem;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 2.5rem;
    height: 2.5rem;
}

.pm-toggle .form-check.form-switch > input[type="checkbox"]:checked + label::before {
    background: #b9e4d7;
}
.pm-toggle .form-check.form-switch > input[type="checkbox"]:checked + label::after {
    background: #116e51;
    left: 20px;
}


.schedule {
   
    white-space: nowrap;
    overflow-x: auto;
    padding: 1rem 0;
    letter-spacing: -0.83px;
}
.schedule .day {
    width: 70px;
    padding: 5px 10px;
    text-align: center;
}
 
.schedule.yellow .day {
    color: rgba(255, 255, 255, 0.5);
}
.schedule.yellow .day.active {
    background-color: #ffdf1b;
    border-radius: 10px;
    border-color: #ffdf1b;
    color: #116e51;
}

.schedule.green .day {
    color: #116e51;
}
.schedule.green .day.active {
    background-color: #116e51;
    border-radius: 10px;
    border-color: #ffdf1b;
    color: #ffffff;
}

.schedule.mint .day.active {
    background-color: #2bfdbc;
    border-radius: 10px;
    border-color: #2bfdbc;
    color: #116e51;
}

.category {
    color: rgba(17, 110, 81, 0.5);
}

.category.green .item {
    padding-bottom: 1vh;
    font-weight: 400;
}

.category.green .item.active{
    font-size: 2vw;
    font-weight: bold;
    color: #116e51;
    border-bottom: 4px solid #116e51;
}

.category.white {
    color: rgba(255, 255, 255, 0.5);
}
.category.white .item{
    padding-bottom: 1vh;
    font-weight: 400;
}
.category.white .item.active{
    font-size: 2vw;
    font-weight: 600;
    color: #fff;
    border-bottom: 4px solid #fff;
    margin-bottom: 0.1vh;
}


/* 배경이미지 지정 */
@media all and (min-height:600px){
    .bg-receipt {
        background: url("./static/bg-receipt.png") no-repeat top center;
        background-size: 95%;
        min-height: 50vh;
    }
    .bg-picknote {
        background: url("./static/bg-picknote-top.png") no-repeat top center;
        margin-left: 1rem;
        margin-right: 1rem;
        /* background-size: 95%; */
        /* min-height: 54vh; */
    }
    .textrelay-non-list {
        min-height: 25vh;
    }
}
@media all and (min-height:800px){
    .bg-receipt {
        background: url("./static/bg-receipt.png") no-repeat top center;
        background-size: 95%;
        min-height: 72vh;
    }
    .bg-picknote {
        background: url("./static/bg-picknote-top.png") no-repeat top center;
        margin-left: 1rem;
        margin-right: 1rem;
        /* background-size: 95%; */
        /* min-height: 45vh; */
    }
    .textrelay-non-list {
        min-height: 40vh;
    }
}
@media all and (min-height:900px){
    .bg-receipt {
        background: url("./static/bg-receipt.png") no-repeat top center;
        background-size: 95%;
        min-height: 74vh;
    }

    .bg-picknote {
        background: url("./static/bg-picknote-top.png") no-repeat top center;
        margin-left: 1rem;
        margin-right: 1rem;
        /* background-size: 95%; */
        /* min-height: 45vh; */
    }
    .textrelay-non-list {
        min-height: 40vh;
    }
}


/* 배경이미지 관련 */
.bg-splash {
    background: url("./static/bg-splash.png") no-repeat top center;
    background-size: cover;
}

.bg-login {
    background: url("./static/bg-login.png") no-repeat top center;
    background-size: 100%;
}

.bg-moadmin-main {
    background: url("./static/bg-moadmin.png") no-repeat top center;
    background-size: cover;
}

.bg-prof-pointcard {
    background: url("./static/bg-mypage-prof.png") no-repeat top center;
    background-size: 100%;
}

.bg-user-pointcard {
    background: url("./static/bg-mypage-user.png") no-repeat top center;
    background-size: 100%;
}

.bg-pickmarket-black {
    background: url("./static/bg-pickmarket-black.png") no-repeat top center;
    background-size: cover;
}

/* 색상테마 - 픽관련, 축구 */
.bg-blur {
    background-image: url('./static/bg-blur-top.png'), url('./static/bg-blur-bottom.png');
    background-position: 0 0, 0 100%;
    background-size: cover;
    background-blend-mode: soft-light;
}
.theme-soccer .bg-blur {
    background-color: #086e50!important;
}
.bg-soccer {
    background-color: #0e8063!important;
}
.theme-soccer .txt-pm-game {
    color: #2bfdbc;
}
.theme-soccer .txt-pm-date {
    color: #fff600;
}
.theme-soccer .txt-pm-record {
    color: #169f74;
}

/* 색상테마 - 야구 */
.theme-baseball .bg-blur {
    background-color: #0eb9b7!important;
}
.bg-baseball {
    background-color: #18c3c1!important;
}
.theme-baseball .txt-pm-game {
    color: #70fffd;
}
.theme-baseball .txt-pm-date {
    color: #fff600;
}
.theme-baseball .txt-pm-record {
    color: #25c0be;
}

/* 색상테마 - 배구 */
.theme-volleyball .bg-blur {
    background-color: #b2296d!important;
}
.bg-volleyball {
    background-color: #b2296d!important;
}
.theme-volleyball .txt-pm-game {
    color: #ff92c7;
}
.theme-volleyball .txt-pm-date {
    color: #fff600;
}
.theme-volleyball .txt-pm-record {
    color: #b12d6d;
}

/* 색상테마 - 농구 */
.theme-basketball .bg-blur {
    background-color: #d6911a!important;
}
.bg-basketball {
    background-color: #dc9f29!important;
}
.theme-basketball .txt-pm-game {
    color: #ffd388;
}
.theme-basketball .txt-pm-date {
    color: #fff600;
}
.theme-basketball .txt-pm-record {
    color: #d59020;
}






.bg-admin {
    background: url("./static/bg-admin.png") no-repeat top center;
    background-size: cover;
}

.bg-admin-header {
    background: url("./static/bg-admin-header.png") no-repeat top center;
    background-size: cover;
    position: fixed;
    width: 100%;
}

/* 공통 - 텍스트 입력 창 */
.form-control.input-text-bottom {
    border-radius: 0;
    border-bottom : 1px solid #aaaaaa;
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: #fff;
}

table.ji-table01{
    width:100%;
}
table.ji-table01 th{
    height: auto;
    font-weight:bold;
    padding-top:5px;
    padding-bottom:5px;
    background-color : #00000088;
    white-space: nowrap;
}
table.ji-table01 tr.row{
    background-color : #cccccc11;
}
table.ji-table01 td{
    border: 1px solid #373b3e;
    text-align: center;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
}
table.ji-table01.ji-table01-large th{
    min-width : 120px;
    max-width : 200px;
    text-align: center;
}
table.ji-table01 .nowrap{

}
table.ji-table01 td{
    text-align: left;
}
table.ji-table01 th, table.ji-table01 td{
    vertical-align: middle;
    font-size: 12px;
}
table.ji-table01.ji-table01-large th, table.ji-table01.ji-table01-large td{
    font-size: 1.1em;
    padding-top:7px;
    padding-bottom:7px;
}
table.ji-table01.ji-table01-left th, table.ji-table01.ji-table01-left td{
    font-size: 1.1em;
}
table.ji-table01.ji-table01-left td{
    padding-top:10px;
    padding-bottom:10px;
}
.pm-container{
    padding-top: 63px !important;
    padding-bottom: 63px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin : 0 !important;;
}

/* 선택상자 */
.orderList.form-select {
    color: rgba(17, 17, 17, 0.5);
    text-align: right;
    padding-right: 7vw;
    /* padding-right: 3.75rem; */
    background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23777777%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e');
    border: none;
    font-size: 3vw;
    /* font-size: 1.5rem; */
    font-weight: 400;
}

/* 테이블 */
.table.non-border > tr, th, td {
    border-bottom-width: 0!important;
}

/* 카드컴포넌트 관련 */
.card-header:first-child {
    border-bottom: none!important;
    border-top-left-radius: var(--bs-border-radius-xl)!important;
    border-top-right-radius: var(--bs-border-radius-xl)!important;
}
.card.yellow {
    --bs-card-border-radius: var(--bs-border-radius-xl)!important;
    --bs-card-cap-bg: #ffe014;
}
.card.green {
    --bs-card-cap-bg: #116e51;
    --bs-card-border-width: 0;
    --bs-card-bg: #f5f5f5;
    color: #ffffff;
}

.card.gray {
    opacity: 50%;
    --bs-card-cap-bg: #707070;
    --bs-card-border-color: #707070;
    --bs-card-bg: #ffffff;
    --bs-card-border-width: 0.5px;
    --bs-card-border-radius: 0.75rem;
    --bs-border-radius-xl: 0.75rem;
    --bs-card-inner-border-radius: 0.75rem;
    color: #ffffff;
}
.card.gray.active {
    opacity: 100%;
    --bs-card-cap-bg: #707070;
    --bs-card-border-color: #707070;
}

/* 배당관련 버튼 색상 */
.allocButton {
    border-radius: var(--bs-border-radius-lg)!important;
    text-align: center;
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
    border: 1.5px solid transparent;
    font-weight: bold;
    font-size: 4vw;
}
.allocButton.bronze {
    background-color: #d39662;
    color: white;
    border-color: #dfbda0;
}
.allocButton.silver {
    background-color: #b3b3b3;
    color: white;
    border-color: #dbdbdb;
}
.allocButton.gold {
    background-color: #ffd13a;
    color: white;
    border-color: #ffe89e;
}
.allocButton.yellow {
    background-color: #ffd249;
    color: white;
}
.allocButton.purple {
    background-color: #bb5ce8;
    color: white;
}
.allocButton.hot {
    background-color: #f2442d;
    color: white;
}

/* 픽구매관련 버튼 색상 */
.pickButton {
    border-radius: var(--bs-border-radius-xl)!important;
    text-align: center;
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
    border: 1.5px solid #39866e;
    font-weight: bold;
    font-size: 4vw;
    background-color: #116e51;
    color: #fff;
}

/* 글자 하이라이트 */
.txt-highlight-yellow {
    background-image: linear-gradient(to bottom, transparent 60%, #fff775 40%);
}

.btn-pm-live {
    background-color: #fff;
    color: #ff3c3c;
    border: 2px solid #ff3c3c;
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
}

/* 문자 */
.box-chat {
    background-color: #f6f6f6;
    color: #111111;
}

/* 스크롤 안보이게 하기 */
.no_scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no_scroll::-webkit-scrollbar {display: none !important; }

.pm-loading{
    position: absolute;
    top : 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #00000055;
    z-index: 1000;
}
.pm-loading > div:first-child{
    margin: auto;
    margin-top: 50vh;
    width : 80px;
    height : 80px;
}
.pm-loading img{
    width : 80px;
    height : 80px;
}
input[type="range"].pm-slider {
    -webkit-appearance: none;
    cursor: pointer;
    background: #eaeaea;
    border-radius: 2rem;
}
input[type="range"].pm-slider:focus {
    outline: none;
}

input[type="range"].pm-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -1.5rem; /* Centers thumb on the track */
    height: 4rem;
    width: 4rem;
    background: url('/slider.png') no-repeat center;
    background-size: contain;
}
input[type="range"].pm-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: 1rem;
}
input[type=range].pm-slider:focus::-ms-fill-lower {
    background: #30b38a;
}
input[type=range].pm-slider:focus::-ms-fill-upper {
    background: #888;
}
.pm-btn-01{
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
    background-color: #999;
    border-width: 0;
    color: white;
}
.pm-footer-fix-8{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    bottom: 0;
}

/* 애니메이션 */
@keyframes motion-t {
    0% { opacity: 1; transform: translate3d(0, 100%, 0);}
    100% { opacity: 0; transform: translateZ(100px);}
}
@keyframes motion-i {
    0% { transform: translate3d(0, 0, 0); filter:none;}
    100% { transform: rotate(-20deg) translatez(10px); filter:none;}
}

@keyframes motion-pick {
    0% {background-image: url('./static/icon-star-0.png'); background-size: contain;}
    20% {background-image: url('./static/icon-star-20.png'); background-size: contain;}
    40% {background-image: url('./static/icon-star-40.png'); background-size: contain;}
    60% {background-image: url('./static/icon-star-60.png'); background-size: contain;}
    80% {background-image: url('./static/icon-star-80.png'); background-size: contain;}
    100% {background-image: url('./static/icon-star-100.png'); background-size: contain;}
}

.pick-animation {
    animation: motion-pick 0.3s linear 1 normal;
    width: 66px;
    height: 98px;
    position: absolute;
    z-index: 999999;
}

.thumbup-text {
    animation: motion-t 0.5s linear 2 normal;
    margin-top: 0;
}

.thumbup-img {
    filter:none;
    animation: motion-i 0.25s linear 4 alternate;
    margin-top: 0;
}
#chatRoom{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

.tab-content {
    background-color: #fff;
}

.pm-chat-contents{
    word-break:break-all;
    white-space: break-spaces;
}
.pm-chat-contents .pm-link{
    background-color:#eaecff !important;
    border-radius: var(--bs-border-radius-xl)!important;
}
.pm-chat-contents .pm-link a{
    color:#4294ff !important;
    font-weight:bold;
}
.pm-chat-text{
    word-break:break-all;
    white-space: break-spaces;
}
.pm-numeric{
    display: inline;
}
.nowrap{
    white-space: nowrap;
}
.stop-scrolling {
    height: 100% !important;
    overflow: hidden !important;
}
.pickDrag{
    z-index: 1 !important;
}

.terms-text {
    white-space: pre-line;

}


::-webkit-scrollbar {
    display: none;
  }



.jb-wrap {
	/* width: 40%; */
	/* margin: 10px auto; */
	/* border: 1px solid #000000; */
	position: relative;
}
.jb-wrap img {
	width: 13vw;
	vertical-align: middle;
}
.jb-text {
	/* padding: 5px 10px; */
	/* background-color: yellow; */
    color: #e01050;
    /* margin-top: 0.5rem; */
	text-align: center;
	position: absolute;
    width: 100%;
    top : 5.1vw;
	/* top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ); */
}

.jb-text-toto {
	/* padding: 5px 10px; */
	/* background-color: yellow; */
    color: #e01050;
    /* margin-top: 0.5rem; */
	text-align: center;
	position: absolute;
    width: 100%;
    top : 3.9vw;
	/* top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ); */
}

.jb-wrap-none {
	/* width: 40%; */
	/* margin: 10px auto; */
	/* border: 1px solid #000000; */
	position: relative;
}
.jb-wrap-none img {
	width: 14vw;
	vertical-align: middle;
}
.jb-text-none {
	/* padding: 5px 10px; */
	/* background-color: yellow; */
    color: #e01050;
    /* margin-top: 0.5rem; */
	text-align: center;
	position: absolute;
    width: 100%;
    /* top : 6.6vw; */
    top : 3.6vw;
	/* top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ); */
    /* background-image: linear-gradient(to left, #e01050, rgba(255, 156, 156, 1));
    background-clip: text;

	  -webkit-background-clip: text;

	  color: transparent; */
}

.jb-text-none-toto {
	/* padding: 5px 10px; */
	/* background-color: yellow; */
    color: #e01050;
    /* margin-top: 0.5rem; */
	text-align: center;
	position: absolute;
    width: 100%;
    /* top : 6.6vw; */
    top : 2.3vw;
	/* top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ); */
    /* background-image: linear-gradient(to left, #e01050, rgba(255, 156, 156, 1));
    background-clip: text;

	  -webkit-background-clip: text;

	  color: transparent; */
}


.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  
   
} 

.category-card {
    display: inline-block;
    width:22%;
    border-style : none
}