/* =1.0 Structure
----------------------------------------------- */
body.fixed-nav {
  padding-top: 50px !important;
  background: white;
}

.dropdown:hover .dropdown-menu {
  display: block;
} 

.dropdown-menu {
	background-color: #2D2D2D;
}

.dropdown-menu li > a {
	color: white;
	 
}

.dropdown-menu li > a:hover, 
.dropdown-menu li > a:focus {
    color: white;
    background: #ed6d49;
}


/* =11.0 Navs and Navbars
----------------------------------------------- */
.navbar-header {
  height: 64px;
}
.navbar-inverse {
    border-color: transparent;
}
#navbar {
  background-image: none;
  background-color: transparent;
}

@media only screen and (min-width: 768px) {
  #navbar {
    height: 30px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.navbar-inverse .navbar-info {
  display: block !important;
  margin-right: 0;
  padding-right: 5px;
  padding-top: 2px;
  color: white;
}


.notificationOff {
  color: #a40000;
}

.notificationOn {
  color: #4c9d29;
}

/* =12.0 Panels
----------------------------------------------- */
.panel {
  border-radius: 0;
}

.panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-position: center center;
  padding: 6px;
}

.panel-title {
  color: black !important;
  font-size: 12px !important;
  font-weight: bold;
}

.panel-title > a:hover {
  text-decoration: none;
}

.panel-body {
  padding: 4px 6px;
}
.panel-body ul {
  margin-bottom: 0;
}

/* =14.0 Tables
----------------------------------------------- */
.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th {
  color: #fff;
  background-color: #366903;
}

.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th {
  color: #fff;
  background-color: #FFBF00;
}

/* make all TH tags inside a .table dark like OpenNMS 14 */
.table > tbody > tr > th,
.table > thead > tr > th,
.table > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table > tr > th,
.table > tbody > tr > th,
.table > thead > tr > th {
  background-color: #ccc;
  border-bottom: 0px solid #ccc;
}

#footer {
  clear: both;
  text-align: center;
  padding: 30px 2px 2px 2px;
  margin-left: -15px;
  margin-right: -15px;
  background-color: white;
}

.container, .container-fluid {
  padding-top: 20px;
  background-color: white;
}
.container .login, .container-fluid .login {
  padding-top: 30px;
}

.breadcrumb {
  font-size: 12px !important;
  font-weight: bold;
  background-color: white;
  border-bottom: 1px solid #eeeeee; 
}

/*************************Modal Title****************************/
.nmsModelClassTitle  {
	background: #45B878;
	color: #FFFFFF;
	border: none;
	height: 50px;
	vertical-align: middle;
	position: relative;
}

.nmsModelClassTitle span{
	display: inline-block;
	margin-left: 50px;
}

.nmsModelClassTitle span i{
	display: table-cell;
	vertical-align: middle;
	font-size: 20px;
	height: 50px;
}

.nmsModelClassTitle a{
	display: inline-block;
	outline: none;
	float: right;
	margin-right: 10px;
	color: #EEEFEF;
	text-decoration:none;
}
.nmsModelClassTitle a:HOVER {
	color: #FFFFFF;
	cursor: pointer;
}

.nmsModelClassTitle a i{
	display: table-cell;
	vertical-align: middle;
	height: 50px;
	font-size: 30px;
}

.signOutBtn{
	display: inline-block;
	vertical-align: middle;
	color: #FFFFFF;
	background: #FA5B5A;
	padding: 5px 10px 5px 10px;
	margin-left: 20px;
	margin-top: 10px;
	border-bottom: 1px solid white;
}

.signOutBtn:HOVER{
	cursor: pointer;
}

.nmsModelClassContent .menuDiv a{
	
	display: block;
	vertical-align:middle;
	height: 50px;
	color:#B6B6B6;
	text-decoration: none;
	outline: none;
	font-size: 20px;
	padding-left: 20px;
	padding-top: 10px;
}

.nmsModelClassContent .menuDiv a:HOVER{
	color:#FFFFFF;
	text-decoration: none;
	background:#000000;
}
.nmsOneEvent {
	border-radius: 5px;
	width: 500px;
	height: 120px;
	margin-left: 10px;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	color: white;
	display: block;
}
.nmsOneEventDesc{
	font-size: 15px;
	margin-left: 20px;
	padding-top: 10px;
	color: white;
	display: block;
}
.nmsOneEventTime{
	margin-left: 20px;
	padding-top: 10px;
	font-size: 15px;
	color: white;
	display: block;
}
.nmsOneEventClose{
	color: white;
	float: right;
	margin-right: 15px;
}
.nmsOneEventClose:HOVER{
	color: white;
	cursor: pointer;
	text-decoration: none;
}

.nmsOneEventOper{
	margin-left: 20px;
	padding-top: 10px;
	font-size: 15px;
	color: white;
	display: inline-block;
	float: right;
	margin-right: 15px;
}
.nmsOneEventOper:HOVER{
	color: white;
	cursor: pointer;
	text-decoration: underline;
}

.form-control-feedback-front {
  position: absolute;
  top: 0;
  left:10px;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}
.white_input:-webkit-autofill{
	-webkit-box-shadow:0 0 0 1000px white inset !important;
}

/* ===== NMS brand theme (start) - Linteg Lava =====
   Real brand palette, pulled directly from linteglava.co.za's own
   stylesheet (wp-content/themes/linteglava/assets/css/lava.css, confirmed
   2026-10-20 - "LINTEG LAVA — Brand Tokens" is the file's own section
   header, not a guess):
   primary #d4451a   primary-dark #a8350f   primary-light #f7e0d6
   accent  #e8682a   amber #f5a623
   charcoal #1c1517  charcoal-soft #291e21
   cream #fdf9f7     cream-muted #f5f0ed
   text #1c1517      text-soft #6b5b54      text-muted #9a8b83
   border #e8e0dc    border-strong #d4ccc7
   Font: the live site uses Manrope throughout, but this block is appended
   to the END of the NMS's existing stylesheet, where a CSS @import is
   invalid (it only works as literally the first rule in a file) - so this
   uses a close system-font fallback stack instead rather than a broken
   import. To load Manrope for real, add
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap">
   to the NMS's own HTML head (a template edit, not something this CSS-only
   mechanism can do).
   Remove everything between the start/end markers (or run
   ~/bdcom-nms/branding/apply_branding.sh --undo) to revert. */

body, .navbar-inverse, .btn, .form-control, table.dataTable { font-family: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; }

/* --- header bar --- */
.navbar-inverse {
  background: #1c1517 !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 3px solid #d4451a !important;
  box-shadow: 0 2px 12px rgba(28, 21, 23, .45);
}
#logo { width: auto !important; height: 30px !important; margin-top: 12px !important; }
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-brand { color: #fdf9f7 !important; }
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a {
  color: #ffffff !important;
  background: #291e21 !important;
  box-shadow: inset 0 -3px 0 #e8682a;
}
.navbar-inverse .dropdown-menu { background: #291e21 !important; border: 1px solid #3a2c28; border-top: 0; }
.navbar-inverse .dropdown-menu > li > a { color: #fdf9f7 !important; }
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus { background: #3a2c28 !important; color: #ffffff !important; }
.navbar-inverse .dropdown-menu .divider { background: #3a2c28; }

/* --- buttons and links --- */
.btn-primary { background: #d4451a !important; background-image: none !important; border-color: #a8350f !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: #a8350f !important; border-color: #8a2b0c !important; }
.btn-info { background: #e8682a !important; background-image: none !important; border-color: #c2551c !important; color: #fff !important; }
.btn-info:hover, .btn-info:focus { background: #c2551c !important; border-color: #a8350f !important; }
a { color: #a8350f; }
a:hover, a:focus { color: #8a2b0c; }
.form-control:focus { border-color: #d4451a; box-shadow: 0 0 0 3px rgba(212, 69, 26, .18); }
.pace .pace-progress { background: #e8682a !important; }

/* --- tables and panels (work areas stay light for readability) --- */
.table > thead > tr > th, table.dataTable thead th {
  background: #f7e0d6;
  color: #1c1517;
  border-bottom: 2px solid #d4451a !important;
}
.table-hover > tbody > tr:hover, table.dataTable tbody tr:hover { background: #fbeee6; }
.panel-default > .panel-heading { background: #f7e0d6; background-image: none; color: #1c1517; border-color: #e8e0dc; }
.panel-default { border-color: #e8e0dc; }
.breadcrumb { background: #fdf9f7; }

/* --- pop-ups fit the window --- */
.layui-layer { max-width: 98vw !important; max-height: 96vh !important; }
.layui-layer-page .layui-layer-content { max-height: calc(96vh - 50px) !important; overflow: auto !important; }

/* --- Check ONUs / device pop-ups: device tree + shortcut list on the left --- */
#networkTreeDiv { margin-left: 0 !important; }                      /* BDCOM's -30px cut the left edge off */
#networkTreeDivTitle, #shortcutFunction {
  display: block; margin: 6px 0 4px; padding: 6px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #d4451a !important; text-decoration: none !important;
  border-left: 3px solid #d4451a; background: rgba(212, 69, 26, .07); border-radius: 0 4px 4px 0;
}
.networkTreeScroll { border: 1px solid #e8e0dc !important; border-radius: 6px; }
.networkTreeScroll .jstree-anchor { padding: 2px 6px; border-radius: 4px; }
#OnuStaticDiv, #GponOnuStaticDiv, #XponOnuStaticDiv {
  height: auto !important; min-height: 45px; padding: 10px 14px; border-radius: 6px;
  background: #fbeee6; border: 1px solid #e8e0dc; border-left: 4px solid #d4451a; color: #1c1517;
}
/* the "Status Update" progress bar */
#updateEponStatusProgress, [id$="StatusProgress"] { border-radius: 6px; overflow: hidden; border: 1px solid #e8e0dc !important; }
[id$="StatusProgress"] .ui-progressbar-value { background: #d4451a !important; }
.epon-progress-label { font-weight: 600; letter-spacing: .03em; }
.dataTables_wrapper { overflow-x: auto; }

/* --- login page (custom login layout) --- */
/* #left has an inline background-size:100% 100% which stretches/distorts
   any image. The real logo (ll-login-logo.png, from portal.linteglava.co.za)
   has a transparent background, so it's shown "contain"-sized and centred
   on a solid dark panel, not stretched/cropped like a cover photo - that
   earlier approach (a cropped social-banner image) looked like a screenshot,
   with visible background-gradient edges (confirmed 2026-10-20, user
   feedback: "looks bad. Looks like a screenshot"). */
#left {
  background-color: #1c1517 !important;
  background-size: 55% auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* the right panel was plain white (inline background:white on its parent
   wrapper) next to the dark hero image on the left - made it one
   continuous dark surface instead of a jarring light/dark split
   (confirmed 2026-10-20, user feedback: "looks horrible") */
.login-page div[style*="background: white"] { background: #1c1517 !important; }
#right { background: #1c1517; }
.login-page .login-logo b { color: #fdf9f7; letter-spacing: .5px; }
#loginForm .form-control { background: #291e21; border-color: #3a2c28; color: #fdf9f7; border-radius: 6px; }
#loginForm .form-control::placeholder { color: #9a8b83; }
#loginForm .form-control:focus { border-color: #d4451a; background: #291e21; color: #fdf9f7; }
#loginForm .form-control-feedback-front { color: #9a8b83; }
/* the Login button's colour is set by an inline style="background-color:#0F9EF1"
   on the <button> itself - match both the shorthand and longhand property so
   neither form of our !important loses to it */
#loginForm .btn-primary, #loginForm button.btn-primary {
  background: #d4451a !important; background-color: #d4451a !important;
  border-color: #a8350f !important; border-radius: 6px; font-weight: 600; letter-spacing: .5px;
}
#loginForm .btn-primary:hover, #loginForm button.btn-primary:hover {
  background: #a8350f !important; background-color: #a8350f !important;
}
.login-page p[align="center"] { color: #9a8b83 !important; font-size: 13px !important; }
/* Quick Support link in the top menu - stands out as the everyday starting point */
#ll-app-link { background: #d4451a !important; color: #fff !important; border-radius: 6px; margin: 8px 6px 0; padding: 7px 12px !important; font-weight: 600; }
#ll-app-link:hover, #ll-app-link:focus { background: #e8682a !important; color: #fff !important; }
/* ===== NMS brand theme (end) ===== */

/* ===== NMS dark mode (start) - Linteg Lava palette; active when <html> has class ll-dark =====
   Neutral greys, matching the real --ll-dk-* dark-mode tokens confirmed on
   another Linteg Lava property (2026-10-20) - NOT derived/guessed. An
   earlier version of this file used a warm brown tint instead, which
   didn't match the brand's actual dark mode:
   page #1e1e1e  surface #252526  raised #2d2d30  border #3c3c3c / #4a4a4d
   text #d4d4d4  muted #9d9da0  primary #d4451a  accent #e8682a  link #ff7a1a (--ll-neon) */

/* --- hide menus an OLT/ONT-only FNO doesn't use (all modes) --- */
a[name="nav-Config-Switch"], li.ll-hidden { display: none !important; }

html.ll-dark, html.ll-dark body { background: #1e1e1e !important; color: #d4d4d4 !important; }
html.ll-dark body * { scrollbar-color: #4a4a4d #252526; }
html.ll-dark h1, html.ll-dark h2, html.ll-dark h3, html.ll-dark h4, html.ll-dark h5, html.ll-dark h6,
html.ll-dark label, html.ll-dark legend, html.ll-dark .control-label { color: #d4d4d4 !important; }
html.ll-dark legend, html.ll-dark hr { border-color: #3c3c3c !important; }
html.ll-dark a { color: #ff7a1a; }
html.ll-dark a:hover, html.ll-dark a:focus { color: #ffa366; }
html.ll-dark .text-muted, html.ll-dark .help-block, html.ll-dark small { color: #9d9da0 !important; }

/* containers, panels, wells, tabs */
html.ll-dark .container, html.ll-dark .container-fluid, html.ll-dark .content, html.ll-dark .main,
html.ll-dark .tab-content, html.ll-dark .well, html.ll-dark .panel, html.ll-dark .panel-body,
html.ll-dark .list-group-item, html.ll-dark .thumbnail, html.ll-dark .jumbotron {
  background-color: #252526 !important; color: #d4d4d4 !important; border-color: #3c3c3c !important;
}
html.ll-dark .panel-heading, html.ll-dark .panel-footer, html.ll-dark .breadcrumb {
  background: #2d2d30 !important; background-image: none !important; color: #d4d4d4 !important; border-color: #3c3c3c !important;
}
html.ll-dark .nav-tabs { border-color: #3c3c3c !important; }
html.ll-dark .nav-tabs > li > a { color: #9d9da0 !important; border-color: transparent !important; }
html.ll-dark .nav-tabs > li > a:hover { background: #2d2d30 !important; color: #fff !important; }
html.ll-dark .nav-tabs > li.active > a, html.ll-dark .nav-tabs > li.active > a:hover {
  background: #252526 !important; color: #fff !important; border-color: #3c3c3c #3c3c3c transparent !important;
  box-shadow: inset 0 2px 0 #e8682a;
}
html.ll-dark .list-group-item.active, html.ll-dark .list-group-item:hover { background: #313135 !important; color: #fff !important; }

/* tables (bootstrap + DataTables) */
html.ll-dark .table, html.ll-dark table.dataTable, html.ll-dark .dataTables_wrapper,
html.ll-dark .dataTables_scrollHead, html.ll-dark .dataTables_scrollBody { background: #252526 !important; color: #d4d4d4 !important; }
html.ll-dark .table > thead > tr > th, html.ll-dark table.dataTable thead th, html.ll-dark table.dataTable thead td {
  background: #2d2d30 !important; color: #d4d4d4 !important; border-color: #4a4a4d !important;
  border-bottom: 2px solid #d4451a !important;
}
html.ll-dark .table > tbody > tr > td, html.ll-dark table.dataTable tbody td, html.ll-dark .table td, html.ll-dark .table th {
  border-color: #3c3c3c !important; background-color: transparent;
}
html.ll-dark .table-striped > tbody > tr:nth-of-type(odd), html.ll-dark table.dataTable.stripe tbody tr.odd,
html.ll-dark table.dataTable tbody tr.odd { background: #232323 !important; }
html.ll-dark table.dataTable tbody tr.even { background: #252526 !important; }
html.ll-dark .table-hover > tbody > tr:hover, html.ll-dark table.dataTable tbody tr:hover,
html.ll-dark .nmsTrSelect, html.ll-dark tr.selected, html.ll-dark tr.selected td { background: #313135 !important; color: #fff !important; }
html.ll-dark .dataTables_info, html.ll-dark .dataTables_length, html.ll-dark .dataTables_filter { color: #9d9da0 !important; }
html.ll-dark .pagination > li > a, html.ll-dark .pagination > li > span { background: #252526 !important; border-color: #3c3c3c !important; color: #d4d4d4 !important; }
html.ll-dark .pagination > .active > a, html.ll-dark .pagination > .active > span { background: #d4451a !important; border-color: #d4451a !important; color: #fff !important; }

/* forms */
html.ll-dark .form-control, html.ll-dark input[type="text"], html.ll-dark input[type="password"], html.ll-dark input[type="number"],
html.ll-dark input[type="search"], html.ll-dark select, html.ll-dark textarea, html.ll-dark .input-group-addon,
html.ll-dark .select2-container .select2-selection, html.ll-dark .bootstrap-select > .btn {
  background-color: #1b1b1c !important; color: #d4d4d4 !important; border-color: #4a4a4d !important;
}
html.ll-dark .form-control[disabled], html.ll-dark .form-control[readonly], html.ll-dark fieldset[disabled] .form-control { background-color: #2a2a2d !important; color: #8f8f93 !important; }
html.ll-dark ::placeholder { color: #707074 !important; }
html.ll-dark option { background: #252526; color: #d4d4d4; }
html.ll-dark .select2-dropdown, html.ll-dark .select2-results__option { background: #252526 !important; color: #d4d4d4 !important; }
html.ll-dark .select2-results__option--highlighted { background: #d4451a !important; }

/* buttons */
html.ll-dark .btn-default { background: #2d2d30 !important; background-image: none !important; border-color: #4a4a4d !important; color: #d4d4d4 !important; text-shadow: none; }
html.ll-dark .btn-default:hover, html.ll-dark .btn-default:focus { background: #3a3a3d !important; color: #fff !important; }

/* dropdowns, popovers, tooltips, modals, layer pop-ups */
html.ll-dark .dropdown-menu, html.ll-dark .popover, html.ll-dark .modal-content,
html.ll-dark .layui-layer, html.ll-dark .layui-layer-page .layui-layer-content, html.ll-dark .layui-layer-dialog .layui-layer-content {
  background: #252526 !important; color: #d4d4d4 !important; border-color: #3c3c3c !important;
}
html.ll-dark .dropdown-menu > li > a { color: #d4d4d4 !important; }
html.ll-dark .dropdown-menu > li > a:hover { background: #313135 !important; color: #fff !important; }
html.ll-dark .modal-header, html.ll-dark .modal-footer, html.ll-dark .layui-layer-title, html.ll-dark .popover-title {
  background: #2d2d30 !important; color: #d4d4d4 !important; border-color: #3c3c3c !important;
}
html.ll-dark .layui-layer-btn { background: #252526 !important; }
html.ll-dark .layui-layer-btn a { background: #2d2d30 !important; border-color: #4a4a4d !important; color: #d4d4d4 !important; }
html.ll-dark .layui-layer-btn .layui-layer-btn0 { background: #d4451a !important; border-color: #d4451a !important; color: #fff !important; }
html.ll-dark .close { color: #d4d4d4 !important; opacity: .7; text-shadow: none; }
/* pop-up window buttons (minimise line + maximise/close icon sprite) */
html.ll-dark .layui-layer-setwin .layui-layer-min cite { background-color: #d4d4d4 !important; }
html.ll-dark .layui-layer-setwin .layui-layer-min:hover cite { background-color: #e8682a !important; }
html.ll-dark .layui-layer-setwin .layui-layer-max,
html.ll-dark .layui-layer-setwin .layui-layer-maxmin,
html.ll-dark .layui-layer-setwin .layui-layer-close1,
html.ll-dark .layui-layer-setwin .layui-layer-close2 { filter: invert(1) brightness(1.8); }

/* trees (jstree, treeview) */
html.ll-dark .jstree-default .jstree-anchor, html.ll-dark .list-group.treeview .list-group-item { color: #d4d4d4 !important; background: transparent !important; }
html.ll-dark .jstree-default .jstree-hovered { background: #313135 !important; box-shadow: none !important; }
html.ll-dark .jstree-default .jstree-clicked { background: #454548 !important; box-shadow: none !important; }

/* catch common hard-coded white backgrounds from BDCOM inline styles */
html.ll-dark [style*="background-color: white"], html.ll-dark [style*="background-color:white"],
html.ll-dark [style*="background:white"], html.ll-dark [style*="background: white"],
html.ll-dark [style*="background-color: #fff"], html.ll-dark [style*="background-color:#fff"],
html.ll-dark [style*="background-color: rgb(255, 255, 255)"] { background-color: #252526 !important; color: #d4d4d4 !important; }

/* Check ONUs pop-up in dark mode */
html.ll-dark #networkTreeDivTitle, html.ll-dark #shortcutFunction { color: #ff7a1a !important; background: rgba(177, 82, 224, .12); border-left-color: #e8682a; }
html.ll-dark .networkTreeScroll { border-color: #3c3c3c !important; background: #252526 !important; }
html.ll-dark #OnuStaticDiv, html.ll-dark #GponOnuStaticDiv, html.ll-dark #XponOnuStaticDiv,
html.ll-dark .alert-info { background: #252526 !important; border-color: #3c3c3c !important; border-left-color: #e8682a !important; color: #d4d4d4 !important; }
html.ll-dark [id$="StatusProgress"] { background: #252526 !important; border-color: #3c3c3c !important; color: #d4d4d4 !important; }
html.ll-dark .networkTreeScroll .jstree-themeicon,
html.ll-dark .networkTreeScroll .jstree-icon.jstree-themeicon-custom { filter: invert(.85) brightness(1.2); }   /* black tree/shortcut icons */

/* login page right-hand panel */
html.ll-dark .login-page, html.ll-dark .login-page #right { background: #1e1e1e !important; }
html.ll-dark .login-page .login-logo b { color: #d4d4d4 !important; }
html.ll-dark .login-box-body { background: transparent !important; color: #d4d4d4 !important; }

/* dark-mode switch in the user menu */
#ll-dark-toggle .ll-dot { display: inline-block; width: 28px; height: 14px; border-radius: 7px; background: #4a4a4d; position: relative; vertical-align: middle; margin-left: 8px; }
#ll-dark-toggle .ll-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .15s; }
html.ll-dark #ll-dark-toggle .ll-dot { background: #d4451a; }
html.ll-dark #ll-dark-toggle .ll-dot::after { left: 16px; }
/* ===== NMS dark mode (end) ===== */