/* ===========================================
   GLOBAL
=========================================== */

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

body{

    background:#f2f4f7;

    font-family:Segoe UI,Arial,sans-serif;

    

    font-size:14px;

}


/* ===========================================
   HEADER
=========================================== */

.header{

    background:#212529;

    color:#fff;

    padding:12px 20px;

    border-radius:8px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.title{

    font-size:24px;

    font-weight:bold;

    letter-spacing:1px;

}

.market-status{

    color:#00ff66;

    font-weight:bold;

}


/* ===========================================
   PANELS
=========================================== */

.panel-container{

    background:#fff;

    border-radius:8px;

    height:calc(100vh - 95px);

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}

.left-panel{

    border-top:6px solid #198754;

}

.right-panel{

    border-top:6px solid #e40303;

}
.panelBody{

    display:flex;

    gap:12px;

    align-items:flex-start;

}
.leftControls{

    width:42%;

}
.rightControls{

    width:58%;

}

/* ===========================================
   PANEL HEADER
=========================================== */

.panel-header{

    padding:8px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    color:#fff;

}

.left-panel .panel-header{

    background:#198754;

}

.right-panel .panel-header{

    background:#fd7e14;

}


/* ===========================================
   TRADING PANEL BODY
=========================================== */

.trade-panel{

    padding:8px;

}
.row{

    --bs-gutter-x:10px;

    --bs-gutter-y:6px;

}

.form-label{

    font-size:12px;

    font-weight:600;

    margin-bottom:2px;

}

.form-control,
.form-select{

    height:32px;

    padding:3px 8px;

    font-size:13px;

}
.mb-3{

    margin-bottom:6px !important;

}

/* ===========================================
   LOT BUTTONS
=========================================== */

.qty-group{

    display:flex;

}


.qty-group input{

    text-align:center;

    font-weight:bold;

}
.qty-group button,
.input-group button{

    width:38px;

    padding:0;

}


/* ===========================================
   STEP BUTTONS
=========================================== */

.step-buttons{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:5px;

}

.step-buttons button{

    font-size:13px;

}

.priceLadder{

    height:500px;

    overflow-y:auto;

    overflow-x:hidden;

    border:1px solid #cfcfcf;

    background:#ffffff;

    scroll-behavior:auto;

}

.ladderRow{

    height:28px;

    line-height:28px;

    text-align:center;

    border-bottom:1px solid #eeeeee;

    cursor:pointer;

    user-select:none;

    font-size:15px;

}

.ladderRow:hover{

    background:#f3f3f3;

}

.liveRow{

    background:#198754;

    color:white;

    font-weight:bold;

}
.selectedRow{

    background:#0d6efd;

    color:white;

    font-weight:bold;

}
/* ===========================================
   PRICE WHEEL
=========================================== */




.priceItem:hover{

    background:#e8f5e9;

}

.currentPrice{

    background:#198754;

    color:white;

    font-size:17px;

    font-weight:bold;

}

.priceListContainer{

    height:520px;

    border:1px solid #cccccc;

    border-radius:6px;

    overflow:hidden;

}

.priceList{

    height:100%;

    overflow-y:auto;

    background:#ffffff;

}

.priceItem{

    height:30px;

    line-height:30px;

    text-align:center;

    border-bottom:1px solid #eeeeee;

    cursor:pointer;

    user-select:none;

    font-size:15px;

}

.priceItem:hover{

    background:#f5f5f5;

}

.selectedPrice{

    background:#e90303;

    color:#ffffff;

    font-weight:bold;

}
.livePremiumRow{

    background:#198754;

    color:white;

    font-weight:bold;

    border:2px solid #0d6efd;

}


/* ===========================================
   BUY BUTTON
=========================================== */

.buyButton{

    width:100%;

    height:42px;

    font-size:18px;

    font-weight:bold;

    margin-top:6px;

}

/* ===========================================
   STATUS BAR
=========================================== */

.statusBar{

    display:flex;

    justify-content:space-between;

    padding:5px;

    margin-top:6px;

    font-size:12px;

    background:#f5f5f5;

    border-radius:5px;

}


/* ===========================================
   FOOTER
=========================================== */

.footer{

    padding:6px 10px;

    font-size:12px;

}


/* ===========================================
   SCROLL BAR
=========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:5px;

}

::-webkit-scrollbar-track{

    background:#eee;

}


/* ===========================================
   MOBILE
=========================================== */

@media(max-width:991px){

.panel-container{

    height:auto;

    margin-bottom:15px;

}

body{

    overflow:auto;

}

}