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

    body {
      font-family: Arial, sans-serif;
      
    }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
    .window {
      width: 100%;
  height: 100%;

  position: relative;

  transform: none !important;
  scale: 1 !important;
      background: black;
      backdrop-filter: blur(14px);
      padding: 0px;
     
    
      border: solid 0.5px #00ffb3;
      -webkit-app-region: drag;
       z-index: 1;
           user-select: none !important;
    }

    /* TITLE BAR */
    .titlebar {
      height: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 6px;
        color: #fff;
      -webkit-app-region: drag;
    }

    .titlebar::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: auto;
      left: 0;
      width: 100%;
      height: 1.1rem;

      background: linear-gradient(to right,
          transparent,
          #00ffb3,
          transparent);

      box-shadow: 0 0 3px #00ffb3;
    }


   

    .title-actions {
      display: flex;
      gap: 4px;
    }

    .btn {
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      -webkit-app-region: no-drag;
      text-align: right;
    }

    .close {
      background: #ff3b3b;
    }

    .min {
      background: #ffb300;
    }

    .full {
      background: #2bd576;
    }

    .clock-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5px 10px;
    }

    .time-display {
      text-align: center;
      font-size: 17px;
      color: #00ffb3;
      font-weight: bold;

    }

    #sessionStatus {
      text-align: center;
      font-size: 9px;
      margin-bottom: 6px;
      font-weight: bold;
      color: #888;
    }

    /* RULERS */
    .ruler-wrap {
      margin-bottom: 6px;
      transition: all 0.3s;
    }

    .ruler-title {
      font-size: 10px;
      color: #00ffb3;
      margin-bottom: 3px;
      font-weight: bold;
    }

    .ruler {
      position: relative;
      height: 30px;
    }

    /* ✅ ONLY BORDER TOP EFFECT */
    .ruler::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0.05rem;

      background: linear-gradient(to right,
          transparent,
          #00ffb3,
          transparent);

      box-shadow: 0 0 3px #00ffb3;
    }



    .tick {
      position: absolute;
      bottom: 0;
      width: 1px;
    }

    .label {
      position: absolute;
      font-size: 9px;
      transform: translateX(-50%);
      bottom: 14px;
       color: white;
      font-weight: bold;
    }

    /* SESSION LABELS */
    .label-top {
      position: absolute;
      font-size: 9px;
      transform: translateX(-50%);
      bottom: 16px;
     
      font-weight: bold;
    }

    .label-bottom {
      position: absolute;
      font-size: 9px;
      transform: translateX(-50%);
      bottom: -13px;
      /* FIXED LOWER */
      font-weight: bold;
    }

    /* POINTERS */
    .pointer {
      position: absolute;
      top: 16px;
      width: 2px;
      height: 50%;
      z-index: +1;
      box-shadow:0 0 2px yellow;

    }

    .pointer.hour {
      background: yellow;
    }

    .pointer.minute {
      background: yellow;
    }

    .pointer.second {
      background: yellow;
      z-index: +1;

    }
   

    /* MULTI SESSION RULER */
    /* 🔥 taller for multiple lines */


    .multi-ruler {
      position: relative;
      height: 70px;
      /* 🔥 increased height */
      margin-top: 5px;
    }

    /* 24 tick lines */
    .multi-ruler .tick {
      position: absolute;
      top: 20px;
      width: 1px;
      height: 100%;
      background: #222;
    }

    /* TOP LABEL (0,2,4...) */
    .top-label {
      position: absolute;
      top: 5px;
      font-size: 9px;
      color: #ffffff;
      transform: translateX(-50%);
      font-weight: bold;
    }

    /* SESSION LINE (DEEP COLOR + BIG HEIGHT) */
    .session-line {
      position: absolute;
      height: 14px;
      /* 🔥 bigger */
      border-radius: 3px;
      z-index: 5;
    }

    /* TEXT INSIDE LINE */
    .session-label {
      position: absolute;
      font-size: 7px;
      color: #fff;
      /* 🔥 white */
      font-weight: bolder;
      left: 3px;
      /* 🔥 start of line */
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .jbname {
      position: absolute;
      right: 10px;
      margin-top: 5px;
      font-size: 8px;
      color: #fce518;
      
      font-style: italic;
    }

    /* 🔥 taller for multiple lines end */
/* TITLE */

.title{
     font-size: 9px;
      font-weight: bolder;
      color: #076d4b;
}

  /*side menu start*/


/* SIDE MENU */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 218px;
  height: 100%;

  backdrop-filter: blur(10px);
   background: #0000007a;
  border: 1px solid #222;
  transform: translateX(-100%);
  transition: transform 0.35s ease;

  padding-top: 30px;
  z-index: 9999;
    -webkit-app-region: no-drag;
}

/* OPEN STATE */
.side-menu.open {
  transform: translateX(0);
}

/* MENU ITEMS */
.menu-item {
    display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 5px;
  margin: 5px 5px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}
.menu-item:hover {
  background: rgba(0, 255, 179, 0.08);
  color: #00ffb3;
  box-shadow: 0 0 10px rgba(0, 255, 179, 0.2);
  transform: translateX(4px);
}
.menu-btn{
  width: 40px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  color: #00ffb3;
  z-index: 1000;
   cursor: pointer;
   transition: 0.25s;

}
.menu-btn:hover {
 
  color: yellow;
  
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #ff3b3b;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 59, 59, 0.6);
  transition: 0.2s;
  z-index: 1000;
    -webkit-app-region: no-drag;
}

.close-btn:hover {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(255, 59, 59, 0.9);
}


.menu-item-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 5px;
  padding-bottom:0px;
  margin: 5px 5px;
  margin-bottom:  0px;
  border-radius: 10px;
  color: #00ffb3;
  font-size: 10px;

  transition: all 0.25s ease;
  position: relative;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
   padding-left:15px;
   padding-right: 5px;
   padding-top: 2px;
   padding-bottom: 2px;
 
  font-size: 9px;
  color: #00ffb3;
}

.setting-row input {
  accent-color: #00ffb3;
  cursor: pointer;
}


.switch-text {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 18px;
}

.switch-text input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 20px;
  transition: 0.3s;
  overflow: hidden;
}

/* ON OFF TEXT */
.slider .on,
.slider .off {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  font-weight: bold;
  transition: 0.3s;
}

.slider .on {
  left: 6px;
  color: #00ffb3;
  opacity: 0;
}

.slider .off {
  right: 6px;
  color: yellow;
  opacity: 1;
}

/* knob */
.slider::before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  top: 2px;
  background: #666;
  border-radius: 50%;
  transition: 0.3s;
}

/* ON STATE */
.switch-text input:checked + .slider {
  background: #002b22;
  border-color: #00ffb3;
}

.switch-text input:checked + .slider::before {
  transform: translateX(22px);
  background: #00ffb3;
}

.switch-text input:checked + .slider .on {
  opacity: 1;
}

.switch-text input:checked + .slider .off {
  opacity: 0;
}




/*side menu end*/

.forexRuler {
  position: relative;
  width: 100%;
  height: 95px;

}

/* =========================
   MODAL START
========================= */

.modal {
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0,0,0,0.6);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.25s ease, visibility 0.25s ease;

  -webkit-app-region: no-drag;
  z-index: 999999;
}

.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================
   MODAL BOX
========================= */

.modal-box {
  width: 90%;
  height: 70%;
  max-width: 520px;
  max-height: 380px;

  background: #000000d3;
  border: 1px solid #222;
  border-radius: 8px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0,0,0,0.6);

  transform: scale(0.85);
  opacity: 0;

  transition: transform 0.25s ease, opacity 0.25s ease;

  -webkit-app-region: no-drag;
  z-index: 999999;
}

.modal.show .modal-box {
  transform: scale(1);
  opacity: 1;
}

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

.modal-header {
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 8px;
  font-size: 10px;
  color: yellow;
font-weight: bold;
  background: #151515;
  border-bottom: 1px solid #222;
}

/* =========================
   CLOSE BUTTON
========================= */

.modal-close {
  width: 10px;
  height: 10px;
  background: #ff3b3b;
  border-radius: 50%;
  cursor: pointer;

  transition: transform 0.2s ease;
}

.modal-close:hover {
  transform: scale(1.2);
}

/* =========================
   BODY (SCROLL ENABLED)
========================= */
.modal-body {
  flex: 1;
  padding: 12px;
  font-size: 11px;
  color: #d6d6d6;
  overflow-y: auto;
  line-height: 1.5;
  user-select: text !important;
    -webkit-user-select: text;
  user-select: text;
  cursor: text;

  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* Headings */
.modal-body h3 {
  font-size: 11px;
  color: #00ffb3;
  margin: 8px 0 6px;
  font-weight: 500;
}

/* Paragraph */
.modal-body p {
  margin: 0 0 10px;
  color: #bbb;
  
}
.jbParagraphs{
  text-align: center;
}


/* List */
.modal-body ul {
  margin: 0 0 8px;
  padding-left: 14px;
}

.modal-body li {
  margin-bottom: 2px;
  color: #ccc;
}

/* Separator */
.modal-body hr {
  border: none;
  height: 1px;
  background: #222;
  margin: 10px 0;
}

/* Scrollbar */
.modal-body::-webkit-scrollbar {
  width: 8px;   /* 🔥 thicker than default */
}

.modal-body::-webkit-scrollbar-thumb {
  background: #00ffb3;
  border-radius: 10px;
  border: 2px solid #1a1a1a; /* keeps it clean inside dark UI */
}

.modal-body::-webkit-scrollbar-track {
  background: #111;
  border-radius: 10px;
}

/* =========================
   OPTIONAL ANIMATION (unused but safe)
========================= */

@keyframes modalFade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================
   MODAL END
========================= */

/*right side panal*/
/* =========================
   TRADING BUTTON
========================= */
.trading-btn {
  margin-top: 5px;
  padding: 6px;
  font-size: 10px;
  text-align: center;
  background: #002b22;
  color: #00ffb3;
  border: 1px solid #00ffb3;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
  -webkit-app-region: no-drag;
}

.trading-btn:hover {
  background: #00ffb3;
  color: #000;
}

/* =========================
   RIGHT SIDE MENU
========================= */
/* =========================
   MODAL SYSTEM
========================= */

.calc-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  z-index:9999999;
   -webkit-app-region: no-drag;
}

.calc-modal-content{
  width:99%;
  max-width:900px;
  height:700px;
  background:#111;
  margin:5% auto;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #00ffb3;
  display:flex;
  flex-direction:column;
   animation: modalFade 0.35s ease;
}

.calc-modal-header{
  height: 22px;
  background:#1a1a1a;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-bottom:1px solid #333;
  flex-shrink:0;

}
.calc-modal-header::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: auto;
      left: 0;
      width: 100%;
      height: 1.1rem;

      background: linear-gradient(to right,
          transparent,
          #00ffb3,
          transparent);

      box-shadow: 0 0 3px #00ffb3;
    }

.calc-title{
    color: #076d4b;
  font-weight:bold;
  font-size:10px;
  z-index:2;
  
}

.calc-close{
  position: absolute;
  top: 5px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #ff3b3b;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 59, 59, 0.6);
  transition: 0.2s;
  z-index: 1000000;
    -webkit-app-region: no-drag;
}
.calc-close:hover {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(255, 59, 59, 0.9);
}

/* BODY SCROLL AREA */
.calc-modal-body{
  flex:1;
  padding:0;
  overflow-y:auto;
  background:#0b0b0b;
  scroll-behavior:smooth;
}

/* scrollbar */
.calc-modal-body::-webkit-scrollbar{
  width:6px;
}

.calc-modal-body::-webkit-scrollbar-thumb{
  background:#00ffb3;
  border-radius:10px;
}

/* =========================
   RIGHT MENU WRAPPER
========================= */

.right-menu{
  position:relative;
  width:100%;
  height:auto;
  border:none;
  transform:none;
  opacity:1;
  visibility:visible;
  background:#111;
}

/* HEADER */
.right-header{
  position:relative;
  height:20px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:0 10px;
}

.jbRightTital{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:bold;
  color:#00ffb3;
}

/* RED CLOSE */
.right-close{
  width:12px;
  height:12px;
  background:#ff3b3b;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 0 6px rgba(255,59,59,0.6);
  transition:0.2s;
}

.right-close:hover{
  transform:scale(1.2);
  box-shadow:0 0 10px rgba(255,59,59,0.9);
}

/* BODY */
.right-body{
  padding:10px;
  color:#ccc;
  font-size:10px;
}

/* =========================
   CALCULATOR CORE
========================= */

.jbcalc{
  font-family:Arial;
  color:#00ffb3;
}

/* PANEL */
.jbcalc-panel{
  background:#111;
  border:1px solid #333;
  padding:6px;
  border-radius:6px;
  margin-bottom:8px;
  box-shadow:0 0 10px rgba(0,255,179,0.08);
  transition:0.2s;
}

.jbcalc-panel:hover{
  box-shadow:0 0 12px rgba(0,255,179,0.15);
}

/* highlight */
.jbcalc-highlight{
  border:1px solid #ffd400;
  color:#ffd400;
}

/* GRID */
.jbcalc-input-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
   -webkit-app-region: no-drag;
}

/* INPUT */
.jbcalc input,
.jbcalc select{
  width:100%;
  padding:8px;
  background:#000;
  border:1px solid #333333;
  color:#00ffb3;
  font-size:10px;
  border-radius:4px;
   -webkit-app-region: no-drag;
}


/* labels */
.jbcalc-label{
  font-size:9px;
  color:#ffd400;
  margin-bottom:3px;
  display:block;
}



/* row */

.jbcalc-row{
  display: flex;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* দুইটা panel equal + bounded */
.jbcalc-row .jbcalc-panel{
  flex: 1 1 50%;
  min-width: 0;          /* 👈 IMPORTANT: overflow stop */
  box-sizing: border-box;
}
/* headings */
.jbcalc h3{
  font-size:11px;
  margin:0;
  color:#00ff62;
}

/* =========================
   SUMMARY
========================= */

.jbcalc-summary{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.jbcalc-summary-left,
.jbcalc-summary-right{
  flex:1;
}

/* =========================
   LIVE TOGGLE (unchanged UI safe)
========================= */

/*live price toggle start*/

/* container */

/* container */
.jb-live-box {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

/* label */
.jb-live-label {
  font-size: 8px;
  color: #00ffb3;
  font-weight: bold;
}

/* toggle */
.jb-toggle {
  width: 35px;
  height: 15px;
  background: #111;
  border: 1px solid #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-shadow: 0 0 3px rgba(0,255,179,0.1);
}

/* knob */
.jb-toggle-knob {
  width: 12px;
  height: 12px;
  background: #555;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 3px;
  transition: 0.2s;
  z-index: 2;
  padding:0px;
  margin: 0px!important;
}

/* ON/OFF text */
.jb-toggle-text {
  font-size: 6px;
  font-weight: bold;
  z-index: 1;
}

.jb-toggle-text.off {
  color: #ff3b3b;
}

.jb-toggle-text.on {
  color: #555;
}

/* ACTIVE STATE */
.jb-toggle.active {
  border-color: #00ffb3;
  box-shadow: 0 0 3px rgba(0,255,179,0.4);
}

/* knob move */
.jb-toggle.active .jb-toggle-knob {
  left: 18px;
  background: #00ffb3;
}

/* ON/OFF color swap */
.jb-toggle.active .off {
  color: #555;
}

.jb-toggle.active .on {
  color: #00ffb3;
}


/* network status */
.jb-net-status {
  font-size: 8px;
  font-weight: bold;
  margin-left: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #333;
}

/* ONLINE */
.jb-net-online {
  color: #00ff55;
  border-color: #00ff55;
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.2);
}

/* OFFLINE */
.jb-net-offline {
  color: #ff3b3b;
  border-color: #ff3b3b;
  box-shadow: 0 0 6px rgba(255,59,59,0.2);
}
/*live price toggle end*/

/* =========================
   DOWNLOAD BUTTON STYLE
========================= */

.download-btn{
  margin-top:5px;
  padding:6px;
  font-size:10px;
  text-align:center;
  background:#2b2b00;
  color:#ffd400;
  border:1px solid #ffd400;
  border-radius:6px;
  cursor:pointer;
 
   transition:0.2s;
   -webkit-app-region: no-drag !important;
}

.download-btn:hover{
  background:#ffd400;
  color:#000;
}
/*calculator modal end*/

#cursorToast{
  position: fixed !important;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  z-index: 9999999;
  opacity: 0;
  transition: 0.2s ease;
}

#cursorToast.show{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

select option{
  font-size:10px;
}

/* dropdown scrollbar (Chromium browsers only) */
select::-webkit-scrollbar{
  width:6px;
}

select::-webkit-scrollbar-track{
  background:#111;
}

select::-webkit-scrollbar-thumb{
  background:#00ffb3;
  border-radius:10px;
}

select::-webkit-scrollbar-thumb:hover{
  background:#ffd400;
}
.copy-icon {
  margin-left: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #00ffb3;
  transition: 0.2s;
  display: inline-block;
}

.copy-icon:hover {
  transform: scale(1.2);
  color: yellow;
}

.cursor-toast {
  position: fixed;
  pointer-events: none;
  height:13px;

  background: #00ffb3;
  color: #000;
  font-size: 8px;

  padding: 2px 4px;
  border-radius: 5px;

  opacity: 0;
  transform: translate(-50%, -120%);

  transition: 0.2s ease;
  z-index: 999999;
}

.cursor-toast.show {
  opacity: 1;
  transform: translate(-50%, -140%);
}

.contact-item{
  font-size: 10px;
  color: #00ffb3;
  text-decoration: none;
  margin: 5px 0px;
  
}

.fb-btn {
  margin-top: 5px;
  padding: 2px 3px;
  font-size: 9px;
  text-align: center;

  background: #001a2b;
  color: #00c3ff;

  border: 1px solid #00c3ff;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.fb-btn:hover {
  background: #00c3ff;
  color: #000;

  box-shadow: 0 0 8px rgba(0, 195, 255, 0.7);
}

/* BACKDROP */
.jbcalc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(34, 34, 34, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
  z-index: 999;
}

/* ACTIVE STATE */
.jbcalc-backdrop.active {
  opacity: 1;
  visibility: visible;
}
/*blur bg when side menu open end*/
.app-backdrop {
  position: fixed;
  inset: 0;
 
  background: rgba(34, 34, 34, 0.4);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;

   z-index: 99998;
}

/* ACTIVE STATE */
.app-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.tp-label {
  color: #00ffb3; /* Green (your theme primary) */
}

.sl-label {
  color: #ff3b3b; /* Red */
}
.JbDividedLine{
  height: 1px;
  background:#00ffb3; /* Green (your theme primary) */
 margin-bottom: 8px;

  z-index:1;
}


/* =========================
   ALERT ROW (FULL WIDTH)
========================= */
.jb-alert-box {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  display: none;
  font-weight: 500;
  text-align: center;
}

/* ERROR */
.jb-alert-box.error {
  background: rgba(255, 59, 59, 0.15);
  color: #ff3b3b;
  border: 1px solid #ff3b3b;
}

/* SUCCESS */
.jb-alert-box.success {
  background: rgba(0, 255, 179, 0.15);
  color: #00ffb3;
  border: 1px solid #00ffb3;
}


/* =========================
   BUTTON ROW (SECOND ROW)
========================= */
.jbcalc-btn-row {
  display: flex;
  justify-content: center;   /* center buttons */
  gap: 12px;
  width: 100%;
  margin-top: 5px;
}

/* BUTTON STYLE */
.btn-calc,
.btn-clear {
  width: 100px;
  padding: 4px 6px;
  border: none;
  cursor: pointer;
  font-size:10px;
  font-weight: bold;
  border-radius: 6px;
}

/* GREEN */
.btn-calc {
  background: #00996b;
  color: #ffffff;
}

/* RED */
.btn-clear {
  background: #ff3b3b;
  color: #fff;
}

/* hover */
.btn-calc:hover,
.btn-clear:hover {
  opacity: 0.85;
}


/* =========================
   LABEL COLORS (TP/SL)
========================= */
.tp-label {
  color: #00ffb3;
}

.sl-label {
  color: #ff3b3b;
}


/* target profitdropdown options start */

.tp-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #333;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
}

/* input */
.tp-input {
  flex: 1;
  padding: 10px !important;
  border: none !important;
  outline: none !important;
  background: transparent;
  color: #fff;
}

/* dropdown right side */
.tp-select {
  width: 90px !important;
  border: none !important;
  outline: none !important;
  background: #222;
  color: #00ffb3;
  font-weight: bold;
  cursor: pointer;
  padding: 10px !important;
  border-left: 1px solid #333 !important;
}
/* target profitdropdown options end */