/* =========================================================
   IMPELUP VICIDIAL THEME
   CARBON — v3.8
   Brand: ImpelUp Red #CC1A1A · ImpelUp Green #6DBE2E
   Target: /var/www/html/theme/impelup-theme.css
   ========================================================= */

:root {
  /* Carbon palette */
  --bg:              #161b22;
  --card:            #ffffff;
  --nav:             #21262d;
  --nav2:            #2d333b;
  --nav3:            #373e47;
  --nav-dark:        #0d1117;
  --text:            #1f2d3d;
  --muted:           #6e7681;
  --border:          #d8e2ec;
  /* Brand */
  --red:             #CC1A1A;
  --red-dark:        #9b1313;
  --red-hover:       #e02020;
  --green:           #6DBE2E;
  --green-dark:      #4e8c1e;
  /* Aliases kept for compatibility */
  --accent:          #CC1A1A;
  --danger:          #e53935;
  /* Effects */
  --shadow:          0 8px 22px rgba(0,0,0,.20);
  --shadow-strong:   0 12px 28px rgba(0,0,0,.35);
  --radius:          16px;
  /* Layout */
  --header-h:        60px;
  --tabbar-h:        48px;
  --total-top:       108px;
}

/* =========================================================
   BASE RESET
   ========================================================= */

html, body {
  margin:   0 !important;
  padding:  0 !important;
  background: var(--bg) !important;
  color:    var(--text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body {
  padding-top: var(--total-top) !important;
  overflow-x: auto !important;
  min-height: 100vh !important;
}

font {
  font-family: Arial, Helvetica, sans-serif !important;
}

table {
  border-spacing: 0 !important;
}

img {
  image-rendering: auto !important;
}

#LoadingBox {
  z-index: 999999 !important;
}

/* =========================================================
   GLOBAL LINK COLOR
   body.impel-ui covers all absolutely-positioned spans
   that live outside #MainPanel (DiaLlOgButtonspan, etc.)
   ========================================================= */

body.impel-ui a:not(.vdc-tab) {
  color:           rgba(255,255,255,.85) !important;
  text-decoration: none !important;
}

body.impel-ui a:not(.vdc-tab):hover {
  color:           #ffffff !important;
  text-decoration: underline !important;
}

/* Restore dark text inside the white customer card */
#MainPanelCustInfo a,
#MainPanelCustInfo a:hover {
  color: var(--red) !important;
}

/* =========================================================
   HEADER — fixed
   ========================================================= */

#Header {
  position: fixed !important;
  top:  0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9998 !important;
}

/* =========================================================
   TOP UTILITY BAR
   ========================================================= */

#oneTeamTopUtilityBar {
  width: 100% !important;
  height: var(--header-h) !important;
  background: var(--nav) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
  display: flex !important;
  align-items: center !important;
}

#oneTeamTopUtilityBar table {
  width: 100% !important;
  border-collapse: collapse !important;
}

#oneTeamTopUtilityBar td {
  vertical-align: middle !important;
}

#oneTeamTopUtilityBar .queue_text,
#oneTeamTopUtilityBar .body_text,
#oneTeamTopUtilityBar font {
  color: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
}

#oneTeamTopUtilityBar a {
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  font-size: 12px !important;
}

#oneTeamTopUtilityBar a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Logo in header */
#impelup-logo {
  display: block !important;
  height:  36px !important;
  width:   auto !important;
}

/* =========================================================
   QUEUE STAT PILLS
   ========================================================= */

#AgentStatusCalls,
#AgentStatusEmails {
  display:       inline-block !important;
  background:    rgba(255,255,255,.12) !important;
  color:         #ffffff !important;
  padding:       4px 14px !important;
  border-radius: 20px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  margin:        0 4px !important;
  border:        1px solid rgba(255,255,255,.16) !important;
  vertical-align: middle !important;
  white-space:   nowrap !important;
}

#status,
#sessionIDspan {
  display: none !important;
}

/* =========================================================
   LIVE CALL IMAGE
   ========================================================= */

img[name="livecall"] {
  display:        inline-block !important;
  border-radius:  8px !important;
  vertical-align: middle !important;
  height:         30px !important;
}

/* =========================================================
   TAB BAR
   ========================================================= */

#Tabs {
  position: fixed !important;
  top:  var(--header-h) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9997 !important;
}

#Tabs > table {
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.10) !important;
  margin: 0 !important;
}

#Tabs td {
  height:         var(--tabbar-h) !important;
  vertical-align: middle !important;
}

#Tabs font {
  color: var(--text) !important;
}

/* Hide old gif tab images */
#Tabs img[src*="vdc_tab_"] {
  display: none !important;
  width:   0 !important;
  height:  0 !important;
}

#Tabs td[width="72"] {
  width: auto !important;
}

/* =========================================================
   TEXT TABS
   ========================================================= */

.vdc-tab {
  display:         inline-block !important;
  padding:         0 18px !important;
  line-height:     var(--tabbar-h) !important;
  color:           var(--muted) !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  border-bottom:   3px solid transparent !important;
  box-sizing:      border-box !important;
  transition:      color .15s, border-color .15s !important;
  white-space:     nowrap !important;
}

.vdc-tab:hover {
  color:             var(--red) !important;
  border-bottom-color: rgba(204,26,26,.25) !important;
}

/* Active tab uses ImpelUp red — brand integration */
.vdc-tab.vdc-tab-active {
  color:        var(--red) !important;
  border-bottom: 3px solid var(--red) !important;
}

/* =========================================================
   HIDE UNUSED / CLUTTER
   ========================================================= */

#WelcomeBoxA,
#debugbottomspan,
#busycallsdisplay,
#AgentAlertSpan,
#BannerPanel,
#post_phone_time_diff_span {
  display: none !important;
}

/* =========================================================
   HIDE SECONDS & COMMIT
   Nuclear approach: offscreen + zero size + invisible
   Survives VICIdial JS that may re-set display
   ========================================================= */

#SecondSspan,
#MainCommit,
#ScriptRefresH {
  display:        none !important;
  visibility:     hidden !important;
  opacity:        0 !important;
  pointer-events: none !important;
  position:       fixed !important;
  left:           -9999px !important;
  top:            -9999px !important;
  width:          0 !important;
  height:         0 !important;
  overflow:       hidden !important;
}

#SecondSspan *,
#MainCommit * {
  display:    none !important;
  visibility: hidden !important;
}

/* =========================================================
   MAIN PANEL LAYOUT
   ========================================================= */

#MainPanel {
  top:        var(--total-top) !important;
  left:       0 !important;
  width:      100% !important;
  background: var(--bg) !important;
  min-height: calc(100vh - var(--total-top)) !important;
}

#MainTable {
  background:      transparent !important;
  width:           100% !important;
  border-spacing:  0 !important;
  border-collapse: separate !important;
  table-layout:    auto !important;
}

/* Hide status bar row entirely */
#MainTable > tbody > tr:first-child > td {
  display: none !important;
}

#MainTable > tbody > tr:nth-child(2) > td {
  background: transparent !important;
  padding:    0 !important;
  height:     0 !important;
}

#MainTable > tbody > tr > td {
  background:     transparent !important;
  vertical-align: top !important;
}

#MainStatuSSpan {
  display: none !important;
}

/* Left column */
#MainTable > tbody > tr > td:first-child,
.oneTeamLeftRailCell {
  width:     180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  padding:   0 !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* Center column */
#MainTable > tbody > tr > td:nth-child(2),
.oneTeamMainPanelCell {
  width:         auto !important;
  min-width:     0 !important;
  padding-left:  12px !important;
  padding-top:   12px !important;
  padding-right: 390px !important;
  vertical-align: top !important;
}

/* =========================================================
   LEFT RAIL SHELL — Carbon gradient
   ========================================================= */

#oneTeamLeftRailShell {
  display:    block !important;
  background: linear-gradient(180deg, #2d333b 0%, var(--nav) 100%) !important;
  border:     0 !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 18px rgba(0,0,0,.30) !important;
  padding:    12px 10px 16px 10px !important;
  width:      180px !important;
  min-width:  180px !important;
  max-width:  180px !important;
  margin:     0 !important;
  box-sizing: border-box !important;
  overflow:   visible !important;
  min-height: calc(100vh - var(--total-top)) !important;
}

.oneTeamLeftRailInner {
  width:      100% !important;
  display:    block !important;
  box-sizing: border-box !important;
}

#oneTeamLeftRailShell * {
  box-sizing: border-box !important;
}

#oneTeamLeftRailShell center {
  display: block !important;
  width:   100% !important;
}

#oneTeamLeftRailShell span {
  display:     block !important;
  width:       100% !important;
  margin:      0 0 3px 0 !important;
  line-height: 1.1 !important;
}

#oneTeamLeftRailShell img:not([src*="vdc_LB_"]) {
  display: block !important;
  height:  auto !important;
  margin:  0 auto 8px auto !important;
  border:  0 !important;
}

/* Hide ALL VICIdial legacy button GIFs in the left rail */
#oneTeamLeftRailShell img[src*="vdc_LB_"] {
  display: none !important;
}

#oneTeamLeftRailShell .body_text,
#oneTeamLeftRailShell .body_tiny,
#oneTeamLeftRailShell .body_small,
#oneTeamLeftRailShell .body_small_bold,
#oneTeamLeftRailShell .preview_text,
#oneTeamLeftRailShell .skb_text,
#oneTeamLeftRailShell #RecorDingFilename,
#oneTeamLeftRailShell #RecorDID,
#oneTeamLeftRailShell #ParkCounterSpan,
#oneTeamLeftRailShell a,
#oneTeamLeftRailShell font {
  color: #ffffff !important;
}

#oneTeamLeftRailShell .body_tiny  { font-size: 11px !important; line-height: 1.2 !important; }
#oneTeamLeftRailShell .body_small { font-size: 12px !important; }
#oneTeamLeftRailShell .preview_text,
#oneTeamLeftRailShell .skb_text   { font-size: 11px !important; }

/* Override VICIdial default-CSS green (#CCFFCC) background on preview_text */
#oneTeamLeftRailShell .preview_text {
  background: transparent !important;
}
/* Lead Preview & Alt Phone Dial — dark pill */
#DiaLLeaDPrevieW,
#DiaLDiaLAltPhonE {
  background:    rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
  padding:       5px 8px !important;
}

#SpacerSpanA,
#SpacerSpanC,
#SpacerSpanD {
  display: none !important;
}

/* =========================================================
   LEFT RAIL — AGENT STATS BLOCKS
   ========================================================= */

#oneTeamAgentStats {
  margin-bottom:  10px !important;
  border-bottom:  1px solid rgba(255,255,255,.15) !important;
  padding-bottom: 8px !important;
}

.otub-stat-block {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     center !important;
  padding:         6px 2px !important;
  border-bottom:   1px solid rgba(255,255,255,.06) !important;
}

.otub-stat-block:last-child {
  border-bottom: none !important;
}

.otub-stat-label {
  color:       rgba(255,255,255,.75) !important;
  font-size:   11px !important;
  font-weight: 500 !important;
  display:     inline !important;
  width:       auto !important;
}

.otub-stat-value {
  background:    var(--red) !important;
  color:         #ffffff !important;
  border-radius: 12px !important;
  border:        none !important;
  padding:       2px 10px !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  min-width:     28px !important;
  text-align:    center !important;
  display:       inline-block !important;
  width:         auto !important;
  line-height:   1.6 !important;
}

/* Sales + Close Rate — ImpelUp green */
#stat-sales,
#stat-close-rate {
  background: var(--green) !important;
}

/* Use #oneTeamAgentStats prefix to beat #oneTeamLeftRailShell span specificity */
#oneTeamAgentStats .otub-stat-label {
  display:     inline !important;
  width:       auto !important;
  color:       rgba(255,255,255,.90) !important;
  font-size:   11px !important;
  font-weight: 600 !important;
  margin:      0 !important;
  line-height: normal !important;
}

#oneTeamAgentStats .otub-stat-value {
  display:       inline-block !important;
  width:         auto !important;
  background:    var(--red) !important;
  color:         #ffffff !important;
  border-radius: 12px !important;
  padding:       2px 10px !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  min-width:     28px !important;
  text-align:    center !important;
  line-height:   1.6 !important;
  margin:        0 !important;
}

/* =========================================================
   LEFT RAIL — ACTION BUTTONS
   ========================================================= */

#DiaLControl,
#RecorDControl,
#SendDTMF,
#WebFormSpan,
#WebFormSpanThree,
#ParkControl,
#ivrParkControl,
#XferControl,
#QuickXfer,
#CustomXfer,
#HangupControl {
  display:   block !important;
  width:     100% !important;
  max-width: 100% !important;
  margin:    0 0 5px 0 !important;
}

#DiaLControl > *,
#RecorDControl > *,
#SendDTMF > *,
#WebFormSpan > *,
#WebFormSpanTwo > *,
#WebFormSpanThree > *,
#ParkControl > *,
#ivrParkControl > *,
#XferControl > *,
#QuickXfer > *,
#CustomXfer > *,
#HangupControl > * {
  display:   block !important;
  width:     100% !important;
  max-width: 100% !important;
}

/* All action buttons — base style */
#DiaLControl a, #RecorDControl a, #SendDTMF a,
#WebFormSpan a, #WebFormSpanTwo a, #WebFormSpanThree a,
#ParkControl a, #ivrParkControl a, #XferControl a,
#QuickXfer a, #CustomXfer a, #HangupControl a,
#DiaLControl button, #RecorDControl button,
#WebFormSpan button, #ParkControl button,
#XferControl button, #HangupControl button {
  display:         block !important;
  width:           100% !important;
  padding:         8px 10px !important;
  margin:          0 !important;
  border-radius:   8px !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  text-align:      center !important;
  text-decoration: none !important;
  background:      rgba(255,255,255,.10) !important;
  color:           #ffffff !important;
  border:          1px solid rgba(255,255,255,.10) !important;
  transition:      all .15s ease !important;
  box-sizing:      border-box !important;
  line-height:     1.3 !important;
}

/* Override PHP inline-style spans for buttons that use <span> not <a> */
#WebFormSpan > span,
#WebFormSpanTwo > span,
#WebFormSpanThree > span,
#ParkControl > span,
#ivrParkControl > span,
#XferControl > span,
#QuickXfer > span,
#CustomXfer > span,
#HangupControl > span {
  background:      rgba(255,255,255,.10) !important;
  color:           #ffffff !important;
  border:          1px solid rgba(255,255,255,.12) !important;
  border-radius:   8px !important;
  display:         block !important;
  width:           100% !important;
  padding:         8px 10px !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  text-align:      center !important;
  box-sizing:      border-box !important;
  cursor:          pointer !important;
}

#HangupControl > span {
  background: var(--nav-dark) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* ImpelUp Red — primary dial action */
#DiaLControl a {
  background:  var(--red) !important;
  border-color: transparent !important;
}

#DiaLControl a:hover {
  background: var(--red-hover) !important;
}

/* START RECORDING — ImpelUp green */
#RecorDControl a {
  background:   var(--green) !important;
  border-color: var(--green-dark) !important;
}

#RecorDControl a:hover {
  background: #7fd93a !important;
}

/* SEND DTMF — Carbon neutral slate */
#SendDTMF a {
  background:   var(--nav3) !important;
  border-color: rgba(255,255,255,.12) !important;
}

#SendDTMF a:hover {
  background: #444d58 !important;
}

/* Near-black — hangup (serious action) */
#HangupControl a {
  background:  var(--nav-dark) !important;
  border:      1px solid rgba(255,255,255,.12) !important;
}

#HangupControl a:hover {
  background: #1a1f24 !important;
}

/* During calls: VICIdial replaces #HangupControl with <a><img src="vdc_LB_hangupcustomer.gif"> */
#HangupControl img[src*="hangupcustomer"] {
  display: none !important;
}
#HangupControl a::after {
  content: 'HANGUP CUSTOMER' !important;
}

#SendDTMFdiv {
  width:      100% !important;
  margin:     4px 0 0 0 !important;
  text-align: center !important;
}

/* Hide the DTMF text input box (oval) below SEND DTMF button */
#SendDTMFdiv input[type="text"],
#SendDTMFdiv input.cust_form {
  display: none !important;
}

/* Hide WEB FORM 2 checkbox */
#WebFormSpanTwo input[type="checkbox"],
#inert_button {
  display: none !important;
}

/* =========================================================
   CUSTOMER CARD PANEL
   ========================================================= */

#MainPanelCustInfo {
  display:       block !important;
  background:    #ffffff !important;
  border:        1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow:    var(--shadow) !important;
  padding:       10px 18px 12px 18px !important;
  margin:        0 0 12px 0 !important;
  box-sizing:    border-box !important;
  min-height:    0 !important;
  height:        auto !important;
  width:         100% !important;
}

#MainPanelCustInfo table { border-collapse: collapse !important; }

#MainPanelCustInfo .body_text,
#MainPanelCustInfo .cust_form,
#MainPanelCustInfo .log_title { color: var(--text) !important; }

#MainPanelCustInfo .body_text { font-size: 13px !important; }

#CusTInfOSpaN { display: inline-block !important; width: 100% !important; }

/* =========================================================
   FORM CONTROLS
   ========================================================= */

input[type="text"],
select,
textarea {
  border:        1px solid var(--border) !important;
  border-radius: 8px !important;
  padding:       4px 8px !important;
  background:    #ffffff !important;
  color:         var(--text) !important;
  box-sizing:    border-box !important;
  box-shadow:    none !important;
  font-size:     12px !important;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  outline:      none !important;
  border-color: #9b9b9b !important;
  box-shadow:   0 0 0 2px rgba(204,26,26,.12) !important;
}

textarea    { resize: vertical !important; }
.cust_form  { font-size: 12px !important; }

/* =========================================================
   WEBPHONE PANEL
   ========================================================= */

#webphoneSpan,
#webphoneSpan > *,
#webphonecontent,
#webphonecontent > * {
  background:    var(--nav-dark) !important;
  border-radius: 0 !important;
  border:        0 !important;
}

#webphoneSpan {
  opacity:        0 !important;
  pointer-events: none !important;
  overflow:       hidden !important;
}

#webphonecontent iframe {
  border:     0 !important;
  background: transparent !important;
}

/* Hide the "WebPhone View" toggle link — users use our dialpad instead */
#webphoneLinkSpan { display: none !important; }

/* =========================================================
   CUSTOM ALERT MODAL
   ========================================================= */

#otdp-alert-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.72);
  z-index:         999999;
  align-items:     center;
  justify-content: center;
}
#otdp-alert-overlay.otdp-active {
  display: flex;
}
#otdp-alert-box {
  background:    var(--nav);
  border:        1px solid var(--nav3);
  border-radius: 8px;
  padding:       28px 32px 24px;
  min-width:     340px;
  max-width:     520px;
  width:         90vw;
  box-shadow:    0 12px 50px rgba(0,0,0,0.7);
}
#otdp-alert-title {
  font-size:      11px;
  font-weight:    700;
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom:  14px;
}
#otdp-alert-msg {
  font-size:   13px;
  color:       #d0d8e4;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break:  break-word;
  max-height:  320px;
  overflow-y:  auto;
  margin-bottom: 22px;
}
#otdp-alert-ok {
  float:         right;
  background:    var(--danger);
  color:         #fff;
  border:        none;
  border-radius: 4px;
  padding:       8px 28px;
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  letter-spacing:.03em;
}
#otdp-alert-ok:hover { background: #c62828; }
#otdp-alert-footer   { overflow: hidden; }

/* =========================================================
   CALLS IN QUEUE
   ========================================================= */

#callsinqueuedisplay {
  background:    var(--nav-dark) !important;
  color:         #ffffff !important;
  border-radius: 0 0 10px 10px !important;
  padding:       4px 8px !important;
}

#callsinqueuedisplay font {
  color:     rgba(255,255,255,.8) !important;
  font-size: 11px !important;
}

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

#MaiNfooter {
  background: var(--nav-dark) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

#MaiNfooter font,
#MaiNfooter a {
  color:     rgba(255,255,255,.4) !important;
  font-size: 11px !important;
}

#MaiNfooterspan { background: transparent !important; }

/* Bottom spans */
#DiaLlOgButtonspan,
#AgentTimeSpan,
#PauseCodeButtons {
  color:       rgba(255,255,255,.85) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
}

/* Force pill style on ALL bottom nav links */
#ManualDialButtons a,
#ManuaLDiaLButtons a,
#MDstatusSpan a,
#CallLogButtons a {
  display:         inline-block !important;
  padding:         6px 18px !important;
  border-radius:   20px !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  color:           rgba(255,255,255,.75) !important;
  background:      transparent !important;
  border:          1px solid rgba(255,255,255,.25) !important;
  margin:          0 4px !important;
  letter-spacing:  0.3px !important;
}

#ManualDialButtons a:hover,
#MDstatusSpan a:hover,
#CallLogButtons a:hover {
  background:   rgba(255,255,255,.1) !important;
  color:        #ffffff !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* Hide VICIdial version/build/server info */
#MaiNfooterspan {
  display: none !important;
}

/* =========================================================
   LOGOUT LINK
   ========================================================= */

a[href*="logout"],
a[href*="LOGOUT"] {
  color:           rgba(255,255,255,.82) !important;
  font-weight:     bold !important;
  text-decoration: none !important;
}

a[href*="logout"]:hover,
a[href*="LOGOUT"]:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* =========================================================
   YOU ARE PAUSED BADGE
   Badge is a GIF image — use hue-rotate to shift yellow→red
   ========================================================= */

/* =========================================================
   DIALCONTROL — secondary pause/resume pill (steel blue, neutral).
   Synced with top-right #agent-avail-toggle — both trigger the same
   VICIdial AutoDial_ReSume_PauSe. Different wording on purpose:
     top-right = state (AVAILABLE / UNAVAILABLE)
     left-col  = action (RESUME / PAUSE)
   ========================================================= */

/* Hide every GIF variant VICIdial swaps into DiaLControl */
#DiaLControl img { display: none !important; }

/* =========================================================
   Hide native transfer panel + left-column duplicate buttons
   All these functions are now in the dialpad
   ========================================================= */
html body #TransferMain,
html body #ParkControl,
html body #HangupControl,
html body #SendDTMF,
html body #XferControl,
html body #QuickXfer,
html body #CustomXfer,
html body #ivrParkControl {
  display:        none !important;
  visibility:     hidden !important;
  height:         0 !important;
  width:          0 !important;
  overflow:       hidden !important;
  pointer-events: none !important;
  position:       absolute !important;
  left:           -99999px !important;
}

/* =========================================================
   Dialpad — new compact warm-transfer action buttons
   ========================================================= */
.otdp-xfer-row {
  display:        grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:            6px !important;
  margin-top:     6px !important;
}
.otdp-xfer-full {
  display:        block !important;
  width:          100% !important;
  margin-top:     6px !important;
  white-space:    normal !important;
  line-height:    1.2 !important;
  min-height:     38px !important;
}

/* =========================================================
   OFFICE-PHONE LAYOUT — dialpad moves BELOW customer card.
   Left column = numeric pad + call controls.
   Right column = extension board (stacked transfer/QA/verif).
   ========================================================= */

/* Relocate dialpad — JS will physically move the node below the customer card
   inside the main panel cell. No float tricks. */
#oneTeamDialpad {
  position:    static !important;
  float:       none !important;
  right:       auto !important;
  top:         auto !important;
  bottom:      auto !important;
  margin:      20px 0 0 0 !important;
  width:       100% !important;
  max-width:   1500px !important;
  z-index:     auto !important;
  display:     block !important;
  clear:       both !important;
}

/* Panel spans the dialpad wrapper */
#oneTeamDialpad .otdp-panel {
  width:       100% !important;
  max-width:   1500px !important;
  padding:     18px !important;
  box-sizing:  border-box !important;
}

/* Customer card no longer needs to reserve space for a right-side dialpad */
html body #MainTable > tbody > tr > td:nth-child(2),
html body .oneTeamMainPanelCell {
  padding-right: 12px !important;
}

/* Force the left rail td to stay visible (nth-child 1 in the layout row) */
html body #MainTable > tbody > tr > td:first-child {
  display:        table-cell !important;
  visibility:     visible !important;
  width:          180px !important;
}
html body #oneTeamLeftRailShell {
  display:        block !important;
  visibility:     visible !important;
}

/* Two-column office-phone split — flex so it tolerates cell-width changes */
.otdp-office {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      nowrap !important;
  gap:            20px !important;
  align-items:    stretch !important;
}
.otdp-side-num {
  flex:           0 0 300px !important;
  max-width:      300px !important;
}
.otdp-side-ext {
  flex:           0 0 340px !important;
  max-width:      340px !important;
  min-width:      280px !important;
}

/* Numeric pad side (left) */
.otdp-side-num {
  display:        flex !important;
  flex-direction: column !important;
  gap:            8px !important;
  min-width:      0 !important;
}

/* Extension board side (right) */
.otdp-side-ext {
  display:        flex !important;
  flex-direction: column !important;
  gap:            10px !important;
  min-width:      0 !important;
}

/* Extension board buttons — consistent full-width, centered text */
.otdp-ext-btn {
  display:        flex !important;
  align-items:    center !important;
  justify-content:center !important;
  width:          100% !important;
  min-height:     52px !important;
  padding:        12px 14px !important;
  border:         none !important;
  border-radius:  8px !important;
  font-size:      14px !important;
  font-weight:    700 !important;
  letter-spacing: 0.3px !important;
  color:          #ffffff !important;
  background:     #4169E1 !important;
  cursor:         pointer !important;
  text-align:     center !important;
  white-space:    normal !important;
  line-height:    1.2 !important;
  font-family:    inherit !important;
  transition:     background .15s, transform .1s !important;
}
.otdp-ext-btn:hover:not(:disabled) {
  background:     #5878EC !important;
  transform:      translateY(-1px) !important;
}
.otdp-ext-btn:disabled {
  opacity:        0.4 !important;
  cursor:         not-allowed !important;
}
.otdp-ext-btn.otdp-ext-complete {
  background:     #6DBE2E !important;
}
.otdp-ext-btn.otdp-ext-complete:hover:not(:disabled) {
  background:     #7bd333 !important;
}

/* HANGUP full-width row in numpad side (spans both MUTE/PARK columns) */
.otdp-hangup-wrap {
  width:          100% !important;
  margin-top:     6px !important;
}
.otdp-hangup-full {
  display:        block !important;
  width:          100% !important;
  min-height:     46px !important;
}

/* =========================================================
   COMPACT CUSTOMER CARD — 3-row rebuild via rebuildCustomerCard()
   JS physically moves inputs out of VICIdial's native table into
   #otdp-cust-compact. Original table is display:none but stays in
   DOM so hidden inputs still serialize on form submit.
   ========================================================= */

/* Force parent to block so block children render */
html body #MainPanelCustInfo {
  display:        block !important;
  width:          100% !important;
}

/* Container — constrained width, 3 stacked rows */
html body #MainPanelCustInfo #otdp-cust-compact {
  display:        flex !important;
  flex-direction: column !important;
  gap:            10px !important;
  padding:        10px 8px !important;
  width:          100% !important;
  max-width:      100% !important;
  box-sizing:     border-box !important;
  background:     transparent !important;
}

/* Each row: flex row, wrap permitted so nothing overflows off-screen */
#MainPanelCustInfo .otdp-cust-row {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      wrap !important;
  gap:            10px !important;
  align-items:    center !important;
  width:          100% !important;
  min-width:      0 !important;
}
#MainPanelCustInfo .otdp-cust-row-3 {
  align-items:    flex-start !important;
}

/* Each field: label + input inline */
#MainPanelCustInfo .otdp-cust-field {
  display:        flex !important;
  align-items:    center !important;
  gap:            5px !important;
  flex:           1 1 0 !important;
  min-width:      0 !important;
}

/* Label — DARK text because parent card has white background */
#MainPanelCustInfo .otdp-cust-lbl {
  white-space:    nowrap !important;
  font-size:      11px !important;
  color:          #1f2d3d !important;
  font-weight:    600 !important;
  letter-spacing: 0.2px !important;
  flex:           0 0 auto !important;
}

/* Input — white card means dark text on light input bg.
   Triple-stack selector + !important beats VICIdial's `.cust_form`. */
#MainPanelCustInfo #otdp-cust-compact input.otdp-cust-input,
#MainPanelCustInfo #otdp-cust-compact select.otdp-cust-input,
#MainPanelCustInfo #otdp-cust-compact textarea.otdp-cust-input {
  display:        block !important;
  flex:           1 1 auto !important;
  min-width:      50px !important;
  width:          auto !important;
  padding:        5px 8px !important;
  margin:         0 !important;
  border-radius:  4px !important;
  border:         1px solid #d8e2ec !important;
  background:     #ffffff !important;
  color:          #1f2d3d !important;
  font-size:      12px !important;
  font-family:    inherit !important;
  box-sizing:     border-box !important;
  height:         auto !important;
  line-height:    1.3 !important;
}
#MainPanelCustInfo #otdp-cust-compact input.otdp-cust-input:focus,
#MainPanelCustInfo #otdp-cust-compact textarea.otdp-cust-input:focus,
#MainPanelCustInfo #otdp-cust-compact select.otdp-cust-input:focus {
  border-color:   var(--accent, #CC1A1A) !important;
  outline:        none !important;
  box-shadow:     0 0 0 2px rgba(204,26,26,.12) !important;
}

/* Field-specific flex weights — proportional sizing */
#MainPanelCustInfo .otdp-cust-title           { flex: 0 0 90px !important; }
#MainPanelCustInfo .otdp-cust-middle-initial  { flex: 0 0 60px !important; }
#MainPanelCustInfo .otdp-cust-state           { flex: 0 0 90px !important; }
#MainPanelCustInfo .otdp-cust-postal-code     { flex: 0 0 90px !important; }
#MainPanelCustInfo .otdp-cust-phone-number    { flex: 1 1 140px !important; }
#MainPanelCustInfo .otdp-cust-alt-phone       { flex: 1 1 140px !important; }
#MainPanelCustInfo .otdp-cust-email           { flex: 2 1 160px !important; }
#MainPanelCustInfo .otdp-cust-address1        { flex: 2 1 180px !important; }
#MainPanelCustInfo .otdp-cust-address2        { flex: 1.5 1 140px !important; }
#MainPanelCustInfo .otdp-cust-city            { flex: 1 1 110px !important; }
#MainPanelCustInfo .otdp-cust-first-name      { flex: 1 1 100px !important; }
#MainPanelCustInfo .otdp-cust-last-name       { flex: 1 1 100px !important; }

/* Comments = full-width textarea */
#MainPanelCustInfo .otdp-cust-comments {
  flex:           1 1 auto !important;
  width:          100% !important;
}
#MainPanelCustInfo #otdp-cust-compact textarea.otdp-cust-input {
  min-height:     40px !important;
  max-height:     80px !important;
  resize:         vertical !important;
  width:          100% !important;
}

/* (Customer Time dialpad-header pill removed 2026-04-23) */

/* =========================================================
   (Old) 3-row rebuild layout — kept in case revived later
   ========================================================= */

/* New compact container */
.otdp-cust-compact {
  display:        flex !important;
  flex-direction: column !important;
  gap:            8px !important;
  padding:        8px 6px !important;
  width:          100% !important;
  box-sizing:     border-box !important;
}

.otdp-cust-row {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      nowrap !important;
  gap:            10px !important;
  align-items:    center !important;
  width:          100% !important;
}

.otdp-cust-row-3 {
  align-items:    flex-start !important;
}

/* Each field = label + input inline */
.otdp-cust-field {
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
  flex:           1 1 0 !important;
  min-width:      0 !important;
}

.otdp-cust-lbl {
  white-space:    nowrap !important;
  font-size:      11px !important;
  color:          rgba(255,255,255,.8) !important;
  font-weight:    600 !important;
  letter-spacing: 0.2px !important;
}

.otdp-cust-input {
  flex:           1 1 auto !important;
  min-width:      60px !important;
  padding:        5px 8px !important;
  border-radius:  4px !important;
  border:         1px solid rgba(255,255,255,.15) !important;
  background:     rgba(255,255,255,.06) !important;
  color:          #ffffff !important;
  font-size:      12px !important;
  box-sizing:     border-box !important;
  margin:         0 !important;
}

/* Field-specific size weights */
.otdp-cust-title       { flex: 0 0 110px !important; }
.otdp-cust-middle-initial { flex: 0 0 60px !important; }
.otdp-cust-state       { flex: 0 0 90px !important; }
.otdp-cust-postal-code { flex: 0 0 100px !important; }
.otdp-cust-email       { flex: 2 1 0 !important; }
.otdp-cust-address1    { flex: 2 1 0 !important; }
.otdp-cust-address2    { flex: 1.5 1 0 !important; }

/* Comments = full width textarea */
.otdp-cust-comments .otdp-cust-input,
.otdp-cust-comments textarea.otdp-cust-input {
  min-height:     32px !important;
  resize:         vertical !important;
}
.otdp-cust-comments {
  flex:           1 1 auto !important;
}
.otdp-xfer-btn {
  padding:        8px 6px !important;
  border-radius:  6px !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: 0.3px !important;
  border:         none !important;
  cursor:         pointer !important;
  text-align:     center !important;
  transition:     background .15s, transform .1s !important;
  line-height:    1.1 !important;
  background:     #1d4a74 !important;
  color:          #ffffff !important;
  font-family:    inherit !important;
}
.otdp-xfer-btn:hover:not(:disabled) {
  background:     #2d6298 !important;
  transform:      translateY(-1px) !important;
}
.otdp-xfer-btn.otdp-xfer-hot {
  background:     #4169E1 !important;
}
.otdp-xfer-btn.otdp-xfer-hot:hover:not(:disabled) {
  background:     #5878EC !important;
}
.otdp-xfer-btn.otdp-xfer-complete {
  background:     #4a7a3a !important;
}
.otdp-xfer-btn.otdp-xfer-complete:hover:not(:disabled) {
  background:     #5c9349 !important;
}
.otdp-xfer-btn:disabled {
  opacity:        0.35 !important;
  cursor:         not-allowed !important;
}

/* =========================================================
   Hide RECORDING FILE + RECORD ID display (internal, cluttered UI)
   ========================================================= */
#recordingFileLabel,
#RecorDingFilename,
font.body_tiny:has(#RecorDingFilename),
#recordIdRow {
  display: none !important;
}

/* Paused state → click STARTS the dialer */
#DiaLControl a:has(img[src*="vdc_LB_paused"])::after {
  content: 'START DIALER' !important;
}

/* Active/ready state → click STOPS the dialer */
#DiaLControl a:has(img[src*="vdc_LB_active"])::after {
  content: 'STOP DIALER' !important;
}

/* Manual dial-next state (predictive off) */
#DiaLControl a:has(img[src*="dialnextnumber"])::after {
  content: 'DIAL NEXT LEAD' !important;
}

/* Shared label rendering for any state with an <a> inside DiaLControl */
#DiaLControl a::after {
  display:        block !important;
  color:          #ffffff !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: 0.5px !important;
  text-align:     center !important;
}

/* Steel blue base + hover — OVERRIDES the generic red left-rail style */
#DiaLControl a {
  background: #4169E1 !important;
  border:     1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 2px 6px rgba(58,110,165,.30) !important;
}
#DiaLControl a:hover {
  background: #5878EC !important;
  transform:  translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(58,110,165,.50) !important;
}

/* Disabled state (bare <img> without <a>) — dim placeholder */
#DiaLControl:has(img[src*="vdc_LB_"]):not(:has(a))::after {
  content:      '—' !important;
  display:      block !important;
  color:        rgba(255,255,255,.35) !important;
  font-size:    11px !important;
  text-align:   center !important;
  padding:      8px 10px !important;
  background:   rgba(58,110,165,.15) !important;
  border:       1px dashed rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
}

/* =========================================================
   LEFT RAIL — ALL OTHER LEGACY GIF BUTTONS
   VICIdial replaces button innerHTML with <a><img src="vdc_LB_*.gif">.
   GIF is hidden above; text label supplied via ::after on the <a>.
   ========================================================= */

#ParkControl a::after       { content: 'PARK CALL' !important; }
#ivrParkControl a::after    { content: 'IVR PARK CALL' !important; }
#XferControl a::after       { content: 'TRANSFER - CONF' !important; }
#QuickXfer a::after         { content: 'QUICK TRANSFER' !important; }
#CustomXfer a::after        { content: 'CUSTOM TRANSFER' !important; }
#RecorDMute a::after        { content: 'MUTE RECORDING' !important; }

/* Recording: distinguish start vs stop via :has() */
#RecorDControl a:has(img[src*="stop"])::after  { content: 'STOP RECORDING' !important; }
#RecorDControl a:has(img[src*="start"])::after { content: 'START RECORDING' !important; }

/* Disabled state: VICIdial puts direct <img> (no <a>) — _OFF GIFs.
   GIF is hidden; show dim button text via span::after.
   Condition: has a vdc_LB_ img AND does NOT have an <a> child. */
#ParkControl:has(img[src*="vdc_LB_"]):not(:has(a))::after,
#ivrParkControl:has(img[src*="vdc_LB_"]):not(:has(a))::after,
#XferControl:has(img[src*="vdc_LB_"]):not(:has(a))::after,
#QuickXfer:has(img[src*="vdc_LB_"]):not(:has(a))::after,
#CustomXfer:has(img[src*="vdc_LB_"]):not(:has(a))::after,
#RecorDMute:has(img[src*="vdc_LB_"]):not(:has(a))::after,
#RecorDControl:has(img[src*="vdc_LB_"]):not(:has(a))::after {
  display:       block !important;
  width:         100% !important;
  padding:       8px 10px !important;
  background:    rgba(255,255,255,.07) !important;
  color:         rgba(255,255,255,.40) !important;
  border:        1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  text-align:    center !important;
  box-sizing:    border-box !important;
}
#ParkControl:has(img[src*="vdc_LB_"]):not(:has(a))::after    { content: 'PARK CALL' !important; }
#ivrParkControl:has(img[src*="vdc_LB_"]):not(:has(a))::after { content: 'IVR PARK CALL' !important; }
#XferControl:has(img[src*="vdc_LB_"]):not(:has(a))::after    { content: 'TRANSFER - CONF' !important; }
#QuickXfer:has(img[src*="vdc_LB_"]):not(:has(a))::after      { content: 'QUICK TRANSFER' !important; }
#CustomXfer:has(img[src*="vdc_LB_"]):not(:has(a))::after     { content: 'CUSTOM TRANSFER' !important; }
#RecorDMute:has(img[src*="vdc_LB_"]):not(:has(a))::after     { content: 'MUTE RECORDING' !important; }
#RecorDControl:has(img[src*="vdc_LB_"]):not(:has(a))::after  { content: 'START RECORDING' !important; }

/* Keep inline-style yellow overrides as fallback */
body.impel-ui [style*="background-color: yellow"],
body.impel-ui [style*="background-color:yellow"],
body.impel-ui [style*="background-color:#FFFF00"],
body.impel-ui [style*="background-color:#ffff00"],
body.impel-ui [style*="background: yellow"],
body.impel-ui [style*="background:yellow"] {
  background:       var(--red) !important;
  background-color: var(--red) !important;
  color:            #ffffff !important;
  border-radius:    6px !important;
}

/* =========================================================
   ALL VICIDIAL GREEN PANELS
   Covers: Manual Dial, Call Log, Disposition, Wrapup,
   Callbacks, Pause Code, Lead Search, etc.
   VICIdial hardcodes bgcolor="#CCFFCC" on all panel tables
   ========================================================= */

[bgcolor="CCFFCC"],
[bgcolor="#CCFFCC"] {
  background:       var(--bg) !important;
  background-color: var(--bg) !important;
}

[bgcolor="CCFFCC"] td,
[bgcolor="#CCFFCC"] td,
[bgcolor="CCFFCC"] tr,
[bgcolor="#CCFFCC"] tr {
  background: transparent !important;
  color:      rgba(255,255,255,.9) !important;
}

[bgcolor="CCFFCC"] font,
[bgcolor="#CCFFCC"] font,
[bgcolor="CCFFCC"] .sd_text,
[bgcolor="#CCFFCC"] .sd_text,
[bgcolor="CCFFCC"] .sh_text,
[bgcolor="#CCFFCC"] .sh_text {
  color: rgba(255,255,255,.9) !important;
}

[bgcolor="CCFFCC"] input[type="text"],
[bgcolor="#CCFFCC"] input[type="text"],
[bgcolor="CCFFCC"] textarea,
[bgcolor="#CCFFCC"] textarea {
  background:    var(--nav2) !important;
  color:         #ffffff !important;
  border:        1px solid rgba(255,255,255,.25) !important;
  border-radius: 6px !important;
}

[bgcolor="CCFFCC"] select,
[bgcolor="#CCFFCC"] select {
  background: var(--nav2) !important;
  color:      #ffffff !important;
  border:     1px solid rgba(255,255,255,.25) !important;
}

[bgcolor="CCFFCC"] a,
[bgcolor="#CCFFCC"] a {
  display:         inline-block !important;
  padding:         7px 18px !important;
  border-radius:   8px !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  color:           #ffffff !important;
  background:      var(--nav3) !important;
  border:          1px solid rgba(255,255,255,.15) !important;
  margin:          3px !important;
}

[bgcolor="CCFFCC"] input[type="checkbox"],
[bgcolor="#CCFFCC"] input[type="checkbox"] {
  accent-color: var(--red) !important;
}

/* =========================================================
   CALL LOG — POLISH
   ========================================================= */

/* Column header row — subtle separator */
[bgcolor="#CCFFCC"] tr:has(td b),
[bgcolor="#CCFFCC"] tr:has(th) {
  border-bottom: 2px solid rgba(255,255,255,.2) !important;
}

[bgcolor="#CCFFCC"] td b,
[bgcolor="#CCFFCC"] th {
  color:         #ffffff !important;
  font-weight:   700 !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid rgba(255,255,255,.2) !important;
  display:       block !important;
}

/* Hide the '#' row-number column — first td in every call log row */
#CallLogSpan table tr td:first-child {
  display: none !important;
}

/* close [X] — red danger button */
a[onclick*="CalLLoGVieWClose"] {
  background:      var(--red) !important;
  border-color:    transparent !important;
  color:           #ffffff !important;
}

/* =========================================================
   BOTTOM NAV — MANUAL DIAL / FAST DIAL / VIEW CALL LOG
   ========================================================= */

#ManualDialButtons a,
#ManuaLDiaLButtons a,
#CallLogButtons a {
  display:         inline-block !important;
  padding:         6px 18px !important;
  border-radius:   20px !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  color:           rgba(255,255,255,.75) !important;
  background:      transparent !important;
  border:          1px solid rgba(255,255,255,.25) !important;
  margin:          0 4px !important;
  transition:      all .15s ease !important;
  letter-spacing:  0.3px !important;
}

#ManualDialButtons a:hover,
#ManuaLDiaLButtons a:hover,
#CallLogButtons a:hover {
  background:   rgba(255,255,255,.1) !important;
  color:        #ffffff !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* =========================================================
   AGENT AVAILABILITY TOGGLE — top-right, replaces 1TEAM READY
   Injected by fixavailtoggle.py. Two states synced with VICIdial:
   - AVAILABLE (green)   = agent is READY   (receives predictive + inbound)
   - UNAVAILABLE (red)   = agent is PAUSED  (safe to place manual/preview)
   ========================================================= */

img[name="livecall"] {
  display: none !important;
}

#agent-avail-toggle {
  display:        inline-block !important;
  font-weight:    700 !important;
  font-size:      12px !important;
  padding:        7px 18px !important;
  border-radius:  8px !important;
  letter-spacing: 0.5px !important;
  vertical-align: middle !important;
  border:         none !important;
  cursor:         pointer !important;
  transition:     background .15s, transform .1s, box-shadow .15s !important;
  color:          #ffffff !important;
  font-family:    inherit !important;
  min-width:      140px !important;
  text-align:     center !important;
}

#agent-avail-toggle.avail-on {
  background:     var(--green) !important;
  box-shadow:     0 2px 8px rgba(109,190,46,.35) !important;
}
#agent-avail-toggle.avail-on:hover {
  background:     #7fd13d !important;
  transform:      translateY(-1px) !important;
  box-shadow:     0 4px 14px rgba(109,190,46,.55) !important;
}

#agent-avail-toggle.avail-off {
  background:     var(--red) !important;
  box-shadow:     0 2px 8px rgba(204,26,26,.35) !important;
}
#agent-avail-toggle.avail-off:hover {
  background:     #e03a3a !important;
  transform:      translateY(-1px) !important;
  box-shadow:     0 4px 14px rgba(204,26,26,.55) !important;
}

/* =========================================================
   CUSTOM DARK SCROLLBAR
   ========================================================= */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nav-dark); }
::-webkit-scrollbar-thumb { background: var(--nav3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* =========================================================
   HEADER INFO TEXT
   ========================================================= */

#oneTeamTopUtilityBar .body_text,
#oneTeamTopUtilityBar .queue_text,
#oneTeamTopUtilityBar font {
  font-size:   11px !important;
  color:       rgba(255,255,255,.6) !important;
  font-weight: 400 !important;
}

/* =========================================================
   LEFT RAIL BUTTON HOVER STATES
   ========================================================= */

#DiaLControl a:hover      { background: var(--red-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(204,26,26,.4) !important; }
#RecorDControl a:hover    { background: #7fd93a !important; transform: translateY(-1px) !important; }
#ParkControl a:hover,
#ivrParkControl a:hover,
#XferControl a:hover,
#QuickXfer a:hover,
#CustomXfer a:hover       { background: rgba(255,255,255,.18) !important; transform: translateY(-1px) !important; }
#HangupControl a:hover    { background: #1a1f24 !important; transform: translateY(-1px) !important; }

/* =========================================================
   WEB FORM 2 BUTTON POLISH
   ========================================================= */

#WebFormSpanTwo a {
  background:   rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
  color:        rgba(255,255,255,.6) !important;
  font-size:    11px !important;
}

#WebFormSpanTwo a:hover {
  background:   rgba(255,255,255,.14) !important;
  color:        #ffffff !important;
}

/* =========================================================
   AGENTS VIEW — LINK + POPUP
   ========================================================= */

/* Agents View pill — JS (fixpause12) aligns top dynamically */
#AgentViewLinkSpan {
  z-index: 50 !important;
}

/* Hide AGENT VIEW pill when overlay screens are visible
   (showDiv sets style.visibility = 'visible') */
body:has(#NoneInSessionBox[style*="visible"]) #AgentViewLinkSpan,
body:has(#CustomerGoneBox[style*="visible"]) #AgentViewLinkSpan {
  display: none !important;
}

/* Agent View popup — dark card below white card, half-width, clear of left rail */
#AgentViewSpan {
  position:      absolute !important;
  left:          210px !important;
  right:         auto !important;
  width:         480px !important;
  top:           auto !important;
  bottom:        68px !important;
  max-height:    175px !important;
  overflow-y:    auto !important;
  background:    var(--nav-dark) !important;
  border:        1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  padding:       12px 16px !important;
  box-shadow:    0 4px 20px rgba(0,0,0,.5) !important;
  z-index:       700 !important;
}

/* Hide Agent View on idle/gone screens */
body:has(#NoneInSessionBox[style*="visible"]) #AgentViewSpan,
body:has(#CustomerGoneBox[style*="visible"]) #AgentViewSpan {
  display: none !important;
}

#AgentViewSpan table {
  width:           100% !important;
  border-spacing:  0 !important;
  border-collapse: collapse !important;
}

#AgentViewSpan td,
#AgentViewSpan font {
  color:     var(--text) !important;
  font-size: 12px !important;
}

/* Header row */
#AgentViewSpan > table > tbody > tr:first-child td {
  font-weight:   bold !important;
  font-size:     11px !important;
  color:         var(--text-muted, #aaa) !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Each agent row */
#AgentViewSpan > table > tbody > tr + tr td {
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* Hide dialpad on the same overlay screens */
body:has(#NoneInSessionBox[style*="visible"]) #oneTeamDialpad,
body:has(#CustomerGoneBox[style*="visible"]) #oneTeamDialpad {
  display: none !important;
}

/* Hide all child elements inside the link */
#AgentViewLink a font,
#AgentViewLink a span,
#AgentViewLink a * {
  display: none !important;
}

/* Pill style — font-size:0 hides the direct text node "Agents View +" */
#AgentViewLink a {
  display:         inline-block !important;
  padding:         6px 18px !important;
  border-radius:   20px !important;
  font-size:       0 !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  color:           transparent !important;
  background:      transparent !important;
  border:          1px solid rgba(255,255,255,.25) !important;
  margin:          0 4px !important;
  transition:      all .15s ease !important;
  letter-spacing:  0.3px !important;
  white-space:     nowrap !important;
}

/* Inject visible "AGENT VIEW" label */
#AgentViewLink a::after {
  content:        'AGENT VIEW' !important;
  display:        inline !important;
  font-size:      12px !important;
  line-height:    normal !important;
  color:          rgba(255,255,255,.75) !important;
  font-weight:    600 !important;
  letter-spacing: 0.3px !important;
}

#AgentViewLink a:hover {
  background:   rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.45) !important;
}

#AgentViewLink a:hover::after {
  color: #ffffff !important;
}

/* Dark theme the popup panel */
#AgentViewSpan {
  background:    var(--nav) !important;
  border:        1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  box-shadow:    var(--shadow-strong) !important;
  overflow:      hidden !important;
}

#AgentViewSpan table,
#AgentViewSpan td,
#AgentViewSpan tr {
  background: transparent !important;
}

#AgentViewSpan font,
#AgentViewSpan .body_small,
#AgentViewSpan .body_text,
#AgentViewSpan * {
  color: rgba(255,255,255,.85) !important;
}

/* Status indicator row */
#AgentViewSpan td[bgcolor],
#AgentViewSpan [bgcolor] {
  background: var(--nav2) !important;
  border-radius: 6px !important;
}

/* =========================================================
   SAFETY — keep stock UI functional
   ========================================================= */

#DiaLControl, #RecorDControl, #RecorDMute,
#WebFormSpan, #WebFormSpanTwo, #WebFormSpanThree,
#ParkControl, #ivrParkControl, #XferControl,
#QuickXfer, #CustomXfer, #HangupControl, #SendDTMF {
  visibility: visible !important;
  opacity:    1 !important;
}

/* =========================================================
   LOGIN FORMS — Phone Login & Re-Login
   The login form is a <center><table width="460px"> directly
   inside #vicidial_form. Scope ALL rules to that specific
   table so they don't bleed into the main agent UI.
   ========================================================= */

#vicidial_form center > table {
  background:    var(--nav) !important;
  border-radius: 12px !important;
  overflow:      hidden !important;
  box-shadow:    var(--shadow-strong) !important;
  border:        1px solid rgba(255,255,255,.12) !important;
}

/* Rows/cells inside login table only */
#vicidial_form center > table tr,
#vicidial_form center > table td {
  background:       transparent !important;
  background-color: transparent !important;
}

/* Header row — ImpelUp red bar */
#vicidial_form center > table tr:first-child td {
  background:       var(--red) !important;
  background-color: var(--red) !important;
  padding:          8px 12px !important;
  text-align:       center !important;
}

#vicidial_form center > table tr:first-child font,
#vicidial_form center > table tr:first-child * {
  color: #ffffff !important;
}

/* Hide the entire logo cell — it's 170px wide and was off-centering the title */
#vicidial_form center > table tr:first-child td:first-child {
  display: none !important;
}

/* Title cell spans full width now */
#vicidial_form center > table tr:first-child td:last-child {
  text-align: center !important;
}

/* Label text */
#vicidial_form center > table .skb_text,
#vicidial_form center > table font {
  color: rgba(255,255,255,.85) !important;
}

/* Input fields — scoped to login table only */
#vicidial_form center > table input[type="text"],
#vicidial_form center > table input[type="password"],
#vicidial_form center > table select {
  background:    var(--nav2) !important;
  color:         #ffffff !important;
  border:        1px solid rgba(255,255,255,.2) !important;
  border-radius: 6px !important;
}

/* Hide version/build info row at bottom of login forms */
#vicidial_form center > table tr:last-child {
  display: none !important;
}

/* Submit buttons — scoped to login table only */
#vicidial_form center > table input[type="submit"] {
  background:    var(--red) !important;
  color:         #ffffff !important;
  border:        none !important;
  border-radius: 8px !important;
  padding:       8px 24px !important;
  font-size:     13px !important;
  font-weight:   700 !important;
  cursor:        pointer !important;
  margin:        3px !important;
}

#vicidial_form center > table input[type="submit"]:hover {
  background: var(--red-hover) !important;
}

/* =========================================================
   WELCOME PAGE (welcome.php)
   No #vicidial_form here — scoped via body.impel-ui center > table
   ========================================================= */

/* Swap VICIdial logo for ImpelUp logo (Chrome supports content: url() on img) */
body.impel-ui center > table tr:first-child td:first-child img {
  content:     url('/agc/theme/impelup-logo.png') !important;
  width:       170px !important;
  height:      45px !important;
  object-fit:  contain !important;
}

/* Dark card — same look as login forms */
body.impel-ui center > table {
  background:    var(--nav) !important;
  border-radius: 12px !important;
  overflow:      hidden !important;
  box-shadow:    var(--shadow-strong) !important;
  border:        1px solid rgba(255,255,255,.12) !important;
}

body.impel-ui center > table tr,
body.impel-ui center > table td {
  background:       transparent !important;
  background-color: transparent !important;
}

/* Red header row */
body.impel-ui center > table tr:first-child td {
  background:       var(--red) !important;
  background-color: var(--red) !important;
}

body.impel-ui center > table tr:first-child td:last-child {
  text-align: center !important;
  color:      #ffffff !important;
}

body.impel-ui center > table tr:first-child font {
  color: #ffffff !important;
}

/* Nav links — Agent Login, Timeclock, Administration */
body.impel-ui center > table a {
  display:         block !important;
  width:           75% !important;
  margin:          4px auto !important;
  padding:         10px 0 !important;
  border-radius:   8px !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  text-align:      center !important;
  color:           rgba(255,255,255,.85) !important;
  background:      rgba(255,255,255,.08) !important;
  border:          1px solid rgba(255,255,255,.15) !important;
  letter-spacing:  0.3px !important;
}

body.impel-ui center > table a:hover {
  background:   var(--red) !important;
  color:        #ffffff !important;
  border-color: transparent !important;
}

body.impel-ui center > table font.skb_text {
  color: rgba(255,255,255,.85) !important;
}

/* =========================================================
   CYAN PANELS — bgcolor="#CCFFFF"
   Used on: No one in session, Customer hung up, Contact search
   ========================================================= */

[bgcolor="#CCFFFF"],
[bgcolor="CCFFFF"] {
  background:       var(--bg) !important;
  background-color: var(--bg) !important;
}

[bgcolor="#CCFFFF"] td,
[bgcolor="CCFFFF"] td,
[bgcolor="#CCFFFF"] tr,
[bgcolor="CCFFFF"] tr {
  background: transparent !important;
  color:      rgba(255,255,255,.9) !important;
}

[bgcolor="#CCFFFF"] font,
[bgcolor="CCFFFF"] font,
[bgcolor="#CCFFFF"] .sd_text,
[bgcolor="CCFFFF"] .sd_text,
[bgcolor="#CCFFFF"] .sh_text,
[bgcolor="CCFFFF"] .sh_text {
  color: rgba(255,255,255,.9) !important;
}

[bgcolor="#CCFFFF"] a,
[bgcolor="CCFFFF"] a {
  color:           rgba(255,255,255,.85) !important;
  text-decoration: none !important;
}

[bgcolor="#CCFFFF"] a:hover,
[bgcolor="CCFFFF"] a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* =========================================================
   WEB FORM 2 — hide entire span (VICIdial turns it yellow
   during live calls which our JS converts to red, making it
   a giant intrusive button)
   ========================================================= */

#WebFormSpanTwo {
  display: none !important;
}

/* =========================================================
   DISPOSITION / WRAPUP / CALLBACK SCREENS
   #DispoSelectBox, #CallBackSelectBox, #WrapupBox, etc.
   Inner columns use bgcolor="#99FF99" and "#FFFFCC"
   ========================================================= */

#DispoSelectBox,
#CallBackSelectBox,
#WrapupBox,
#PauseCodeBox {
  background: var(--bg) !important;
}

/* Green columns inside disposition panel */
[bgcolor="#99FF99"],
[bgcolor="99FF99"],
[bgcolor="#BDFFBD"],
[bgcolor="BDFFBD"] {
  background:       var(--nav2) !important;
  background-color: var(--nav2) !important;
}

[bgcolor="#99FF99"] *,
[bgcolor="99FF99"] *,
[bgcolor="#BDFFBD"] *,
[bgcolor="BDFFBD"] * {
  color: rgba(255,255,255,.9) !important;
}

/* Yellow hover highlight on dispo items → dark hover */
[style*="BACKGROUND-COLOR: #FFFFCC"],
[style*="background-color: #FFFFCC"],
[style*="background-color:#FFFFCC"] {
  background-color: var(--nav3) !important;
}

/* Disposition links */
#DispoSelectBox a,
#DispoSelectContent a {
  color:           rgba(255,255,255,.85) !important;
  text-decoration: none !important;
}

#DispoSelectBox a:hover,
#DispoSelectContent a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Dispo header text */
#DispoSelectBox font.sd_text,
#DispoSelectBox font.sh_text {
  color: rgba(255,255,255,.9) !important;
}

/* =========================================================
   LOGOUT BOX — dark theme + visible "CLICK HERE TO LOG IN AGAIN" link
   #LogouTBox contains bgcolor="#FFFFFF" table; our white link color
   makes the re-login link invisible on that white background.
   ========================================================= */

#LogouTBox > table,
#LogouTBox table[bgcolor="#FFFFFF"] {
  background:       var(--nav-dark) !important;
  background-color: var(--nav-dark) !important;
}

#LogouTBox td {
  background: transparent !important;
  color:      rgba(255,255,255,.9) !important;
}

#LogouTBox font.loading_text {
  color:     rgba(255,255,255,.9) !important;
  font-size: 14px !important;
}

/* The re-login link — make it unmissable */
#LogouTBoxLink a {
  display:         inline-block !important;
  margin-top:      16px !important;
  padding:         10px 28px !important;
  border-radius:   24px !important;
  background:      var(--red) !important;
  color:           #ffffff !important;
  font-size:       14px !important;
  font-weight:     700 !important;
  text-decoration: none !important;
  letter-spacing:  0.4px !important;
  border:          none !important;
}

#LogouTBoxLink a:hover {
  background: var(--red-hover) !important;
  color:      #ffffff !important;
}

/* =========================================================
   DIALPAD PANEL — #oneTeamDialpad
   Always-visible right-side panel for DTMF + manual dial
   ========================================================= */

/* ---- Dialpad positioning ----
   (Office-phone layout: dialpad is moved below the customer card by JS) */
#oneTeamDialpad {
  font-family: Arial, Helvetica, sans-serif !important;
  position:    static !important;
  right:       auto !important;
  top:         auto !important;
  float:       none !important;
  margin:      20px 0 0 0 !important;
  z-index:     auto !important;
}

/* Hide MANUAL DIAL + FAST DIAL bottom pills (replaced by dialpad mode selector) */
#ManuaLDiaLButtons {
  display: none !important;
}

/* Dialpad mode selector pills */
.otdp-mode-btn {
  padding:       3px 8px !important;
  border-radius: 10px !important;
  font-size:     10px !important;
  font-weight:   700 !important;
  letter-spacing: 0.4px !important;
  border:        1px solid rgba(255,255,255,.20) !important;
  background:    transparent !important;
  color:         rgba(255,255,255,.50) !important;
  cursor:        pointer !important;
  transition:    all .15s !important;
  line-height:   1 !important;
}

.otdp-mode-btn.active {
  background:    var(--red) !important;
  color:         #ffffff !important;
  border-color:  transparent !important;
}

.otdp-mode-btn:hover:not(.active) {
  background:    rgba(255,255,255,.10) !important;
  color:         rgba(255,255,255,.80) !important;
}

/* LEAD mode dial button */
.otdp-act-lead {
  background: rgba(255,255,255,.08) !important;
  color:      rgba(255,255,255,.70) !important;
  border:     1px solid rgba(255,255,255,.18) !important;
}
.otdp-act-lead:hover {
  background: rgba(255,255,255,.16) !important;
  color:      #ffffff !important;
}

/* FAST mode dial button */
.otdp-act-fast {
  background:   rgba(255,140,0,.18) !important;
  color:        #ffaa33 !important;
  border:       1px solid rgba(255,140,0,.30) !important;
}
.otdp-act-fast:hover {
  background: rgba(255,140,0,.32) !important;
  color:      #ffffff !important;
}

/* Live call → green ring (green = money) */
#oneTeamDialpad.otdp-live .otdp-panel {
  box-shadow: 0 0 0 3px var(--green), 0 4px 20px rgba(0,0,0,.5) !important;
}

/* Post-hangup awaiting disposition → red ring */
#oneTeamDialpad.otdp-dispo .otdp-panel {
  box-shadow: 0 0 0 3px var(--red), 0 4px 20px rgba(0,0,0,.5) !important;
}

.otdp-panel {
  background:    var(--nav) !important;
  border:        1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow:    var(--shadow-strong) !important;
  padding:       12px 12px 14px !important;
  width:         360px !important;
  box-sizing:    border-box !important;
}

/* Status header */
.otdp-hdr {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         4px 6px 8px !important;
  border-bottom:   1px solid rgba(255,255,255,.08) !important;
  margin-bottom:   8px !important;
}

.otdp-status-ready {
  font-size:    10px !important;
  font-weight:  700 !important;
  letter-spacing: 0.8px !important;
  color:        var(--green) !important;
  padding:      2px 8px !important;
  border-radius: 12px !important;
  background:   rgba(109,190,46,.12) !important;
  border:       1px solid rgba(109,190,46,.25) !important;
}

.otdp-status-live {
  font-size:    10px !important;
  font-weight:  700 !important;
  letter-spacing: 0.8px !important;
  color:        #ffffff !important;
  padding:      2px 8px !important;
  border-radius: 12px !important;
  background:   var(--red) !important;
  border:       1px solid rgba(204,26,26,.5) !important;
}

#otdp-callnum {
  font-size:  10px !important;
  color:      rgba(255,255,255,.50) !important;
  max-width:  90px !important;
  overflow:   hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Number display row */
.otdp-display-row {
  display:       flex !important;
  gap:           5px !important;
  margin-bottom: 8px !important;
}

.otdp-input {
  flex:          1 !important;
  background:    #ffffff !important;
  color:         #1f2d3d !important;
  border:        1px solid #d8e2ec !important;
  border-radius: 7px !important;
  padding:       5px 8px !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  letter-spacing: 1.5px !important;
  text-align:    center !important;
  outline:       none !important;
  cursor:        default !important;
}

.otdp-back-btn {
  background:    rgba(255,255,255,.07) !important;
  color:         rgba(255,255,255,.70) !important;
  border:        1px solid rgba(255,255,255,.12) !important;
  border-radius: 7px !important;
  padding:       0 8px !important;
  font-size:     16px !important;
  cursor:        pointer !important;
  line-height:   1 !important;
  transition:    background .15s !important;
}

.otdp-back-btn:hover {
  background: rgba(255,255,255,.14) !important;
  color:      #ffffff !important;
}

/* 3×4 keypad grid */
.otdp-grid {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   5px !important;
  margin-bottom:         8px !important;
}

.otdp-key {
  background:    var(--nav2) !important;
  color:         rgba(255,255,255,.90) !important;
  border:        1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  padding:       14px 0 !important;
  font-size:     18px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  text-align:    center !important;
  transition:    background .12s, transform .08s !important;
  line-height:   1 !important;
  user-select:   none !important;
}

.otdp-key:hover {
  background: var(--nav3) !important;
  color:      #ffffff !important;
}

.otdp-key:active {
  background:  rgba(255,255,255,.20) !important;
  transform:   scale(.94) !important;
}

.otdp-sym {
  color: rgba(255,255,255,.60) !important;
  font-size: 18px !important;
}

/* Action buttons row */
.otdp-actions {
  display: flex !important;
  gap:     5px !important;
}

.otdp-act {
  flex:          1 !important;
  padding:       9px 0 !important;
  border-radius: 8px !important;
  border:        none !important;
  font-size:     12px !important;
  font-weight:   700 !important;
  letter-spacing: 0.6px !important;
  cursor:        pointer !important;
  transition:    background .15s !important;
  line-height:   1 !important;
}

.otdp-act-clear {
  background: rgba(255,255,255,.08) !important;
  color:      rgba(255,255,255,.65) !important;
  border:     1px solid rgba(255,255,255,.12) !important;
}

.otdp-act-clear:hover {
  background: rgba(255,255,255,.14) !important;
  color:      #ffffff !important;
}

.otdp-act-call {
  background: var(--green) !important;
  color:      #ffffff !important;
}

.otdp-act-call:hover {
  background: var(--green-dark) !important;
}

.otdp-act-send {
  background: var(--red) !important;
  color:      #ffffff !important;
}

.otdp-act-send:hover {
  background: var(--red-hover) !important;
}

/* Call control buttons — 2×2 grid below CLEAR/DIAL */
.otdp-ctrl-row {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   5px !important;
  margin-top:            5px !important;
  border-top:            1px solid rgba(255,255,255,.08) !important;
  padding-top:           8px !important;
}

.otdp-ctrl-btn {
  padding:       9px 0 !important;
  border-radius: 8px !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  letter-spacing: 0.5px !important;
  cursor:        pointer !important;
  border:        1px solid rgba(255,255,255,.12) !important;
  background:    rgba(255,255,255,.07) !important;
  color:         rgba(255,255,255,.65) !important;
  transition:    background .15s !important;
  line-height:   1 !important;
}

.otdp-ctrl-btn:hover {
  background: rgba(255,255,255,.14) !important;
  color:      #ffffff !important;
}

/* Muted state */
.otdp-ctrl-on {
  background:   rgba(255,140,0,.20) !important;
  color:        #ffaa33 !important;
  border-color: rgba(255,140,0,.35) !important;
}

.otdp-ctrl-hangup {
  background:   var(--red) !important;
  color:        #ffffff !important;
  border-color: transparent !important;
}

.otdp-ctrl-hangup:hover {
  background: var(--red-hover) !important;
}

/* =========================================================
   DISPOSITION — hide native box, replaced by custom dispo bar
   ========================================================= */

/* Move native DispoSelectBox off-screen — VICIdial JS can still
   show/hide it and we programmatically click links inside it */
#DispoSelectBox {
  position:       fixed !important;
  left:           -9999px !important;
  top:            0 !important;
  opacity:        0 !important;
  pointer-events: none !important;
  z-index:        -1 !important;
}

/* =========================================================
   CUSTOM DISPO BAR  (#otdp-dispo-bar)
   Injected by fixdispo.py — slides in below tab bar
   ========================================================= */

#otdp-dispo-bar {
  position:    fixed !important;
  top:         108px !important;
  left:        0 !important;
  right:       0 !important;
  z-index:     850 !important;
  background:  var(--nav-dark) !important;
  border-bottom: 2px solid var(--red) !important;
  padding:     10px 20px !important;
  box-shadow:  0 4px 20px rgba(0,0,0,.50) !important;
  /* display is controlled by JS */
  align-items: center !important;
  gap:         10px !important;
  flex-wrap:   wrap !important;
}

.otdp-dispo-inner {
  display:     flex !important;
  align-items: center !important;
  gap:         10px !important;
  width:       100% !important;
  flex-wrap:   wrap !important;
}

.otdp-dispo-label {
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 1.2px !important;
  color:          rgba(255,255,255,.40) !important;
  text-transform: uppercase !important;
  white-space:    nowrap !important;
}

.otdp-dispo-callnum {
  font-size:   13px !important;
  font-weight: 700 !important;
  color:       #ffffff !important;
  white-space: nowrap !important;
}

.otdp-dispo-sel {
  flex:          1 !important;
  min-width:     200px !important;
  max-width:     380px !important;
  background:    var(--nav2) !important;
  color:         rgba(255,255,255,.90) !important;
  border:        1px solid rgba(255,255,255,.15) !important;
  border-radius: 7px !important;
  padding:       7px 10px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  outline:       none !important;
  cursor:        pointer !important;
}

.otdp-dispo-sel option {
  background: var(--nav2) !important;
  color:      rgba(255,255,255,.90) !important;
}

.otdp-dispo-pause-wrap {
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
  font-size:   11px !important;
  font-weight: 600 !important;
  color:       rgba(255,255,255,.60) !important;
  cursor:      pointer !important;
  white-space: nowrap !important;
  user-select: none !important;
}

.otdp-dispo-pause-wrap input[type="checkbox"] {
  accent-color: var(--red) !important;
  cursor:       pointer !important;
  width:        14px !important;
  height:       14px !important;
}

.otdp-dispo-btn {
  padding:        7px 18px !important;
  border-radius:  7px !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: 0.5px !important;
  cursor:         pointer !important;
  transition:     background .12s, color .12s !important;
  white-space:    nowrap !important;
  line-height:    1 !important;
  border:         none !important;
}

.otdp-dispo-btn-submit {
  background: var(--green) !important;
  color:      #ffffff !important;
}
.otdp-dispo-btn-submit:hover {
  background: var(--green-dark) !important;
}
.otdp-dispo-btn-submit:disabled {
  background: rgba(109,190,46,.30) !important;
  color:      rgba(255,255,255,.40) !important;
  cursor:     default !important;
}

.otdp-dispo-btn-hangup {
  background:   rgba(255,255,255,.07) !important;
  color:        rgba(255,255,255,.55) !important;
  border:       1px solid rgba(255,255,255,.12) !important;
}
.otdp-dispo-btn-hangup:hover {
  background:   var(--red) !important;
  color:        #ffffff !important;
  border-color: transparent !important;
}

/* =========================================================
   CAMPAIGN CHEAT CARD — right-most column of .otdp-office
   3 sections: Main Sale, Addon Sale 1, Addon Sale 2.
   Populated by buildCheatCard() after fetchTeamLeadCfg() resolves campaign_id.
   ========================================================= */

.otdp-side-cheat {
  flex:           1 1 auto !important;
  min-width:      460px !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            10px !important;
  background:     transparent !important;
  border:         none !important;
  padding:        0 !important;
  max-height:     none !important;
  overflow:       visible !important;
  color:          #ffffff !important;
}

.otdp-cheat-card {
  display:        flex !important;
  flex-direction: column !important;
  gap:            16px !important;
  width:          100% !important;
}

.otdp-cheat-section {
  width:          100% !important;
}

.otdp-cheat-title {
  font-size:      13px !important;
  font-weight:    700 !important;
  color:          #ffffff !important;
  letter-spacing: 0.3px !important;
  padding:        8px 10px !important;
  background:     #4169E1 !important;
  border-left:    3px solid #2F4FC2 !important;
  border-radius:  4px !important;
  margin-bottom:  6px !important;
}

.otdp-cheat-tbl {
  width:            100% !important;
  border-collapse:  collapse !important;
  font-size:        11px !important;
  table-layout:     fixed !important;
}

.otdp-cheat-tbl th {
  text-align:     left !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color:          rgba(255,255,255,.55) !important;
  padding:        4px 6px !important;
  border-bottom:  1px solid rgba(255,255,255,.12) !important;
}

.otdp-cheat-tbl td {
  padding:        5px 6px !important;
  color:          rgba(255,255,255,.90) !important;
  border-bottom:  1px solid rgba(255,255,255,.05) !important;
  vertical-align: middle !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
}

.otdp-cheat-plan {
  font-weight:    600 !important;
  color:          #ffffff !important;
  white-space:    nowrap !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
}

.otdp-cheat-cycle {
  background:     rgba(255,255,255,.08) !important;
  color:          #ffffff !important;
  border:         1px solid rgba(255,255,255,.18) !important;
  border-radius:  4px !important;
  padding:        3px 4px !important;
  font-size:      11px !important;
  font-family:    inherit !important;
  cursor:         pointer !important;
  width:          100% !important;
  max-width:      90px !important;
}

.otdp-cheat-price {
  font-weight:    700 !important;
  color:          #6DBE2E !important;
  white-space:    nowrap !important;
  font-size:      12px !important;
}

.otdp-cheat-bencell {
  text-align:     right !important;
  width:          95px !important;
}

.otdp-cheat-ben-btn {
  background:     rgba(255,255,255,.08) !important;
  color:          #ffffff !important;
  border:         1px solid rgba(255,255,255,.18) !important;
  border-radius:  4px !important;
  padding:        3px 8px !important;
  font-size:      10px !important;
  font-family:    inherit !important;
  font-weight:    600 !important;
  cursor:         pointer !important;
  white-space:    nowrap !important;
  transition:     background .12s !important;
}
.otdp-cheat-ben-btn:hover {
  background:     rgba(255,255,255,.16) !important;
  border-color:   rgba(255,255,255,.28) !important;
}

.otdp-cheat-ben-row td {
  border-bottom:  none !important;
  padding:        0 !important;
}
.otdp-cheat-ben-list {
  padding:        8px 12px !important;
  background:     rgba(255,255,255,.03) !important;
  border-left:    2px solid #6DBE2E !important;
  margin:         2px 0 6px 0 !important;
}
.otdp-cheat-ben-list ul {
  margin:         0 !important;
  padding-left:   18px !important;
  columns:        2 !important;
  column-gap:     14px !important;
}
.otdp-cheat-ben-list li {
  font-size:      10px !important;
  color:          rgba(255,255,255,.80) !important;
  padding:        2px 0 !important;
  break-inside:   avoid !important;
}

.otdp-cheat-loading {
  color:          rgba(255,255,255,.55) !important;
  font-size:      12px !important;
  padding:        20px !important;
  text-align:     center !important;
  font-style:     italic !important;
}

/* Cheat card column sizing: Plan Name fluid, others fixed */
.otdp-cheat-tbl th:nth-child(2), .otdp-cheat-tbl td:nth-child(2) { width: 92px !important; }
.otdp-cheat-tbl th:nth-child(3), .otdp-cheat-tbl td:nth-child(3) { width: 76px !important; }
.otdp-cheat-tbl th:nth-child(4), .otdp-cheat-tbl td:nth-child(4) { width: 98px !important; }
.otdp-cheat-tbl th:nth-child(1), .otdp-cheat-tbl td:nth-child(1) { width: auto !important; }

/* =========================================================
   TWO-LINE DIALPAD — LINE 1 (existing display) + LINE 2 (3rd party)
   Line 2 is always visible; activated when CONFERENCE/TRANSFER clicked.
   ========================================================= */

.otdp-side-num .otdp-display-row {
  align-items: center !important;
  gap: 8px !important;
}
.otdp-line1-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  background: var(--red, #CC1A1A) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.otdp-line2-panel {
  margin-top: 12px !important;
  padding: 10px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.otdp-l2-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.otdp-l2-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  background: #4169E1 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}
.otdp-l2-sub {
  font-size: 10px !important;
  color: rgba(255,255,255,.55) !important;
}
.otdp-line2-panel .otdp-modal-input {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  text-align: center !important;
  background: rgba(0,0,0,.3) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  letter-spacing: 2px !important;
}
.otdp-line2-panel .otdp-modal-keypad {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
.otdp-line2-panel .otdp-modal-key {
  padding: 9px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.otdp-line2-panel .otdp-modal-key:hover { background: rgba(255,255,255,.14) !important; }
.otdp-line2-panel .otdp-modal-actions {
  display: flex !important;
  gap: 6px !important;
}
.otdp-line2-panel .otdp-modal-btn {
  flex: 1 !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.otdp-modal-dial { background: #6DBE2E !important; }
.otdp-modal-dial:hover { background: #7bd333 !important; }
.otdp-modal-merge { background: #4169E1 !important; }
.otdp-modal-merge:hover { background: #5878EC !important; }
.otdp-modal-cancel { background: #373e47 !important; }
.otdp-modal-cancel:hover { background: #454d56 !important; }

/* LINE 2 input row — sits directly below LINE 1 display, above keypad */
.otdp-line2-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 6px 0 !important;
  padding: 0 2px !important;
}
.otdp-line2-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  background: #4169E1 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}
.otdp-line2-input {
  flex: 1 !important;
  background: #ffffff !important;
  color: #1f2d3d !important;
  border: 1px solid #d8e2ec !important;
  border-radius: 7px !important;
  padding: 5px 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  outline: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.otdp-line2-input:focus {
  border-color: #4169E1 !important;
  box-shadow: 0 0 0 2px rgba(65,105,225,.22) !important;
}

/* =========================================================
   TEAM MANAGER console (replaces cheat-card side for user_level=2)
   ========================================================= */
.otdp-team-monitor {
  padding: 10px 2px 0 2px !important;
  margin-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  width: 100% !important;
  color: #fff !important;
}
.otdp-tm-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: #4169E1 !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}
.otdp-tm-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
}
.otdp-tm-group {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.8) !important;
}
.otdp-tm-mgr {
  font-size: 11px !important;
  color: rgba(255,255,255,.55) !important;
  margin: 0 0 10px 2px !important;
  letter-spacing: .3px !important;
}
.otdp-tm-roster {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 8px !important;
}
.otdp-tm-row {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 4px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  transition: background .15s !important;
}
.otdp-tm-row.otdp-tm-status-ready   { border-left-color: #6DBE2E !important; }
.otdp-tm-row.otdp-tm-status-incall  { border-left-color: #4169E1 !important; }
.otdp-tm-row.otdp-tm-status-paused  { border-left-color: #F5A623 !important; }
.otdp-tm-row.otdp-tm-status-closer  { border-left-color: #4169E1 !important; }
.otdp-tm-row.otdp-tm-status-offline { border-left-color: rgba(255,255,255,.2) !important; opacity: 0.55 !important; }
.otdp-tm-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 4px !important;
}
.otdp-tm-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.otdp-tm-role {
  font-size: 9px !important;
  color: rgba(255,255,255,.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.otdp-tm-stats {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}
.otdp-tm-pill {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.72) !important;
}
.otdp-tm-pill-ready   { background: rgba(109,190,46,.22) !important; color: #A5DD6A !important; }
.otdp-tm-pill-incall  { background: rgba(65,105,225,.22) !important; color: #9DB8F0 !important; }
.otdp-tm-pill-closer  { background: rgba(65,105,225,.22) !important; color: #9DB8F0 !important; }
.otdp-tm-pill-paused  { background: rgba(245,166,35,.22) !important; color: #F8C565 !important; }
.otdp-tm-pill-offline { background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.4) !important; }
.otdp-tm-pill-sale    { background: rgba(109,190,46,.28) !important; color: #B0E67A !important; }
.otdp-tm-actions {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
}
.otdp-tm-btn {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 5px 0 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.otdp-tm-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.3) !important;
}
.otdp-tm-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* =========================================================
   1CORE LITE embed card — below the dialpad panel
   ========================================================= */
.otdp-onecore-card {
  background:    var(--nav, #21262d) !important;
  border:        1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow:    var(--shadow, 0 8px 22px rgba(0,0,0,.20)) !important;
  padding:       0 !important;
  margin:        20px 0 0 0 !important;
  width:         100% !important;
  max-width:     1500px !important;
  box-sizing:    border-box !important;
  overflow:      hidden !important;
}
.otdp-oc-header {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     center !important;
  padding:         10px 14px !important;
  background:      #4169E1 !important;
  gap:             14px !important;
}
.otdp-oc-title {
  font-size:      13px !important;
  font-weight:    700 !important;
  letter-spacing: 1px !important;
  color:          #ffffff !important;
  flex-shrink:    0 !important;
}
.otdp-oc-tabs {
  display: flex !important;
  gap:     4px !important;
}
.otdp-oc-tab {
  background:     rgba(255,255,255,.12) !important;
  color:          #ffffff !important;
  border:         1px solid rgba(255,255,255,.22) !important;
  padding:        5px 12px !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: 0.5px !important;
  cursor:         pointer !important;
  border-radius:  4px !important;
  font-family:    inherit !important;
  transition:     all .12s !important;
}
.otdp-oc-tab:hover { background: rgba(255,255,255,.22) !important; }
.otdp-oc-tab.active {
  background:   #ffffff !important;
  color:        #4169E1 !important;
  border-color: #ffffff !important;
}
.otdp-oc-body {
  position: relative !important;
  width:    100% !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
.otdp-oc-status {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  padding: 14px !important;
  text-align: center !important;
  color: rgba(0,0,0,.6) !important;
  font-style: italic !important;
  background: rgba(255,255,255,.97) !important;
  z-index: 2 !important;
  font-size: 13px !important;
}
.otdp-oc-frame {
  width:   100% !important;
  height:  4000px !important;
  border:  none !important;
  display: block !important;
}

/* =========================================================
   RESOURCE LIBRARY
   ========================================================= */
.rl-top-btn {
  background:    #4169E1 !important;
  color:         #ffffff !important;
  border:        none !important;
  padding:       6px 14px !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  letter-spacing: 0.8px !important;
  border-radius: 4px !important;
  cursor:        pointer !important;
  margin-right:  10px !important;
  font-family:   inherit !important;
}
.rl-top-btn:hover { background: #5878EC !important; }

.rl-modal-ov {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,.72) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
}
.rl-modal-box {
  background: #161b22 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  width: 700px !important;
  max-width: 92vw !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
}
.rl-modal-big { width: 1100px !important; height: 85vh !important; }
.rl-modal-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 18px !important;
  background: #4169E1 !important;
  color: #fff !important;
}
.rl-modal-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.rl-close {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}
.rl-close:hover { color: #ffccaa !important; }

.rl-modal-body {
  overflow-y: auto !important;
  padding: 14px 18px !important;
  color: #e6edf3 !important;
}
.rl-modal-body-big { padding: 0 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }

.rl-sec-head {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: #ffffff !important;
  background: rgba(65,105,225,.22) !important;
  border-left: 3px solid #4169E1 !important;
  padding: 6px 10px !important;
  margin: 10px 0 6px 0 !important;
  border-radius: 4px !important;
}
.rl-sec-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
.rl-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
  text-align: left !important;
  transition: background .12s !important;
}
.rl-item:hover:not(:disabled) { background: rgba(255,255,255,.12) !important; }
.rl-item:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.rl-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  min-width: 40px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.rl-badge-link     { background: #2f81f7 !important; color: #ffffff !important; }
.rl-badge-pdf      { background: #CC1A1A !important; color: #ffffff !important; }
.rl-badge-markdown { background: #6DBE2E !important; color: #0a2010 !important; }
.rl-title { flex: 1 !important; font-weight: 600 !important; }
.rl-pending {
  font-size: 10px !important;
  color: rgba(255,255,255,.4) !important;
  font-style: italic !important;
}

.rl-pdf-frame {
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  border: none !important;
  background: #ffffff !important;
}
.rl-md-body {
  padding: 20px 28px !important;
  color: #e6edf3 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  overflow-y: auto !important;
}
.rl-md-body h1, .rl-md-body h2, .rl-md-body h3 { color: #ffffff !important; margin-top: 16px !important; }
.rl-md-body a { color: #7bb8ff !important; }
.rl-md-body ul, .rl-md-body ol { padding-left: 22px !important; }
.rl-md-body p { margin: 10px 0 !important; }
.rl-md-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 !important;
}
.rl-md-table th { background: #4169E1 !important; color: #fff !important; padding: 6px 10px !important; text-align: left !important; }
.rl-md-table td { padding: 6px 10px !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }

/* =========================================================
   COLLAPSIBLE SIDEBAR (left rail with call stats / START DIALER)
   ========================================================= */
.otdp-sidebar-toggle {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 9999 !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .15s !important;
}
.otdp-sidebar-toggle:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.32) !important;
}

/* Smooth collapse of the left cell */
html body #MainTable > tbody > tr > td:first-child {
  transition: width 0.22s ease, padding 0.22s ease, min-width 0.22s ease !important;
}

body.otdp-sidebar-collapsed #MainTable > tbody > tr > td:first-child {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
body.otdp-sidebar-collapsed #oneTeamLeftRailShell {
  display: none !important;
}

/* =========================================================
   RESOURCE LIBRARY — inline 3-column card below dialpad
   ========================================================= */
.otdp-rlib-card {
  background:    var(--nav, #21262d) !important;
  border:        1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow:    var(--shadow, 0 8px 22px rgba(0,0,0,.20)) !important;
  margin:        20px 0 0 0 !important;
  width:         100% !important;
  max-width:     1500px !important;
  box-sizing:    border-box !important;
  overflow:      hidden !important;
}
.otdp-rlib-header {
  padding: 10px 14px !important;
  background: #4169E1 !important;
  color: #ffffff !important;
}
.otdp-rlib-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.otdp-rlib-body {
  padding: 14px !important;
}
.otdp-rlib-loading {
  padding: 20px !important;
  text-align: center !important;
  color: rgba(255,255,255,.55) !important;
  font-style: italic !important;
}
.otdp-rlib-cols {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
.otdp-rlib-col {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  min-width: 0 !important;
}
.otdp-rlib-sec-head {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.85) !important;
  padding: 4px 8px !important;
  background: rgba(65,105,225,.22) !important;
  border-left: 3px solid #4169E1 !important;
  border-radius: 3px !important;
  margin-bottom: 8px !important;
}
.otdp-rlib-sec-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.otdp-rlib-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  text-align: left !important;
  width: 100% !important;
  transition: background .12s !important;
}
.otdp-rlib-item:hover:not(:disabled) { background: rgba(255,255,255,.14) !important; }
.otdp-rlib-item:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.otdp-rlib-badge {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  min-width: 34px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.otdp-rlib-badge-link     { background: #2f81f7 !important; color: #ffffff !important; }
.otdp-rlib-badge-pdf      { background: #CC1A1A !important; color: #ffffff !important; }
.otdp-rlib-badge-markdown { background: #6DBE2E !important; color: #0a2010 !important; }
.otdp-rlib-ititle {
  flex: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.otdp-rlib-pending {
  font-size: 9px !important;
  color: rgba(255,255,255,.4) !important;
  font-style: italic !important;
  flex-shrink: 0 !important;
}