html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 25px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 25px;
    width: 100%;
    overflow:hidden;
}

textarea {
	resize: none;
}

.hidden {
	display: none;
}

.cursor-pointer {
	cursor: pointer;
}

.info-icon {
	color: #3c8dbc;
	cursor: help;
	margin-left: 5px;
}

.action-icon-resync {
    margin-right: 4px;
	margin-left: 8px;
    color: #5bc0de;
}
.action-icon-move {
    margin-right: 4px;
	margin-left: 8px;
    color: #f0ad4e;
}
.action-icon-finalize {
    margin-right: 4px;
	margin-left: 8px;
    color: #5cb85c;
}

.text-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-size-20 {
	font-size: 20px !important;
}

.text-break {
	overflow-wrap: break-word;
	word-break: break-word;
}

.text-wrap {
	white-space: pre-wrap;
	word-break: break-word;
}

.text-underline {
	text-decoration: underline;
}

.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.max-width-250 {
	max-width: 250px;
}

/* Keep navbar items on single row */
@media (min-width: 1000px) {
	.navbar.navbar-fixed-top > .container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.navbar.navbar-fixed-top .navbar-header {
		float: none;
		flex-shrink: 0;
		min-width: 0;
	}
	.navbar.navbar-fixed-top .navbar-collapse.collapse {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		float: none;
		flex: 1;
		overflow: visible;
		padding: 0;
	}
	.navbar.navbar-fixed-top .navbar-collapse .nav.navbar-nav {
		float: none;
		display: flex;
		flex-wrap: nowrap;
	}
	.navbar.navbar-fixed-top .navbar-collapse .nav.navbar-nav > li {
		float: none;
		white-space: nowrap;
	}
	.navbar.navbar-fixed-top .navbar-collapse .nav.navbar-nav > li > a {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	.navbar.navbar-fixed-top .navbar-collapse .nav.navbar-nav > li > a > .caret {
		display: inline-block;
		margin-top: 5px;
	}
	.navbar.navbar-fixed-top .navbar-collapse .nav.navbar-nav.navbar-right {
		flex-shrink: 0;
	}
	.navbar.navbar-fixed-top .navbar-brand.text-ellipsis {
		flex-shrink: 1;
		min-width: 0;
	}
}

.help-block.small {
	margin-bottom: 0px !important;
}

.btn.btn-link {
	-webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.not-selectable {
	-webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.pre-wrap {
	white-space: pre-wrap;
}

.panel-heading a {
	text-decoration: none !important;
	color: #2c3e50;
}

.fa-md {
	font-size: 1.4em !important;
	vertical-align: -40%;
}

.sort-link, .sort-link:link, .sort-link:hover {
	color:inherit;
	text-decoration: none !important;
}

.inline-block {
	display:inline-block;
}

.responsive-background {
	background: url(../img/bg-image-4.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.white-label-responsive-background {
	background: url(../img/bg-image-white-label.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.table-fixed-ellipsis {
	table-layout: fixed;
}

.table-fixed-ellipsis .user {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.default-menu {
	background-image: url(../img/smartolt_bg.jpg);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}


.white-label-menu {
	background-image: url(../img/smartolt_bg_white_label.jpg);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}

.label-yellow {
	background-color: rgb(255, 204, 0);
}

.label-green {
	background-color: #1fb325;
}

.label-bridge {
	background-color: #92adc2;
}

/* Mesh backhaul SSID badge (ONU WiFi tab + TR-069 parameter tree) */
.label-mesh-backhaul {
	background-color: #5c748d;
}

.badge-light {
	background-color: #92adc2;
	font-weight: normal;
	margin-top: 2px;
}

.label-grey {
	background-color: #CCCCCC;
}

.text-blue {
	color:#0064C8;	
}

.text-green {
	color: #1fb325;
}

.olt-port-status-up {
	color: #1fb325;
	font-weight: normal;
}

.olt-port-status-down,
.olt-port-status-disabled {
	color: #d9534f;
	font-weight: normal;
}

.text-black {
	color: #2c3e50;
}

.text-grey {
	color: #6e7175;
}

.text-red {
	color: #ff0000;
}

.auth-date {
	font-size: 14px;
}

.btn-success,.btn-primary,
.btn-warning, .btn-yellow, .btn-danger, .btn-default {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}

.btn-success:active:not(.disabled):not([disabled]),
.btn-success.active:not(.disabled):not([disabled]),
.btn-primary:active:not(.disabled):not([disabled]),
.btn-primary.active:not(.disabled):not([disabled]),
.btn-warning:active:not(.disabled):not([disabled]),
.btn-warning.active:not(.disabled):not([disabled]),
.btn-yellow:active:not(.disabled):not([disabled]),
.btn-yellow.active:not(.disabled):not([disabled]),
.btn-danger:active:not(.disabled):not([disabled]),
.btn-danger.active:not(.disabled):not([disabled]),
.btn-default:active:not(.disabled):not([disabled]),
.btn-default.active:not(.disabled):not([disabled]) {
	box-shadow: none !important;
}

.btn-warning:focus,
.btn-warning.focus,
.btn-warning:hover {
	border-color: #c87f0a;
}

.btn-warning:active,
.btn-warning.active,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.btn-warning:active.focus,
.btn-warning.active.focus {
	background-color: #a66908;
	border-color: #a66908;
}

.btn-danger:focus,
.btn-danger.focus,
.btn-danger:hover {
	border-color: #d62c1a;
}

.btn-danger:active,
.btn-danger.active,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.btn-danger:active.focus,
.btn-danger.active.focus {
	background-color: #b62516;
	border-color: #b62516;
}

.btn-success.selected {
	background-color: #0054a9;
	border-color: #0054a9;
}

.btn {
	padding: 5px 15px !important;
}

.btn-small {
	padding: 5px 10px !important;
}

.btn-yellow {
	background: rgb(255, 204, 0);
	border-color: rgb(255, 204, 0);
	color: white;
}

.btn-yellow:hover, .btn-yellow:focus {
	background: #e6b800;
	border-color: #e6b800;
}

.btn-yellow:active,
.btn-yellow.active,
.btn-yellow:active:hover,
.btn-yellow.active:hover,
.btn-yellow:active:focus,
.btn-yellow.active:focus,
.btn-yellow:active.focus,
.btn-yellow.active.focus {
	background: #cca300;
	border-color: #cca300;
}

.btn-link {
	padding: 0px 10px !important;
}

.control-checkbox {
	margin-left: 20px;
}

.alert-success a,
.alert-success a:hover,
.alert-success a:focus {
	color: white;
}

.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
	padding-top: 0px !important;
}

.form-horizontal .radio-single {
	padding-top: 0px !important;
	margin-left: 20px;
	font-weight: normal;
}

.form-horizontal .radio-single.only-label {
	margin-left: 0px;
}

.control-label.radio-inline {
	font-weight: bold;
}

.btn-link-slim {
	margin-bottom: 3px;
	padding-left: 0px !important;
	border: none;
}

.btn-primary-outline {
	background-color: transparent;
	border: none;
}

.input-group-addon {
	padding: 5px !important;
}

.input-xs {
	padding: 2px 5px;
	height: 110%;
	font-size: 13px;
	border-radius: 4px;
}	
  
.input-80 {
	width: 80px !important;
}

.input-90 {
	width: 90px !important;
}

.input-100 {
	width: 100px !important;
}

.input-120 {
	width: 120px !important;
}

.input-140 {
	width: 140px !important;
}

.input-150 {
	width: 150px !important;
}

.input-180 {
	width: 180px !important;
}

.input-190 {
	width: 190px !important;
}

.input-220 {
	width: 220px !important;
}

.input-284 {
	width: 284px !important;
}

.input-358 {
	width: 358px !important;
}

@media only screen and (max-width : 998px) {
	.input-80,
	.input-90,
	.input-100,
	.input-120,
	.input-140,
	.input-150,
	.input-180,
	.input-190,
	.input-220,
	.input-284,
	.input-358 {
		width: 100% !important;
	}
}

.colorpicker-component {
	padding-right: 15px !important;
	padding-left: 15px !important;
}

.multiselect-clear-filter {
	padding:10px 5px !important;
}

.panel-heading-button {
	margin-top: -5px;
}

.panel-olt {
	height: 325px;
}

.panel-body-olts {
	height: 281px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.dashboard-img {
	height: 150px;
	margin: 0 auto;
    display: block;
}

.padding-top {
	padding-top: 11px !important;
}

.padding-top-small {
	padding-top: 5px !important;
}

.no-padding-top {
	padding-top: 0px !important;
}

.no-padding-right {
	padding-right: 0px !important;
}

.no-padding-left {
	padding-left: 0px !important;
}

.padding-left {
	padding-left: 22px !important;
}

.padding-left-xs {
	padding-left: 10px !important;
}

.margin-top {
	margin-top: 10px !important;
}

.margin-top-lg {
	margin-top: 35px !important;
}

.margin-top-xlg {
	margin-top: 60px !important;
}

.margin-top-xxs {
	margin-top: 3px !important;
}

.no-margin-bottom {
	margin-bottom: 0px !important;
}

.margin-bottom {
	margin-bottom: 10px !important;
}

.margin-bottom-lg {
	margin-bottom: 35px !important;
}

.margin-right {
	margin-right: 10px !important;
}

.margin-right-xs {
	margin-right: 5px !important;
}

.margin-left {
	margin-left: 10px !important;
}

.margin-left-sm {
	margin-left: 22px !important;
}

.margin-10 {
	margin: 10px !important;
}

.no-margin-left {
	margin-left: 0px !important;
}

.inline-block {
	display: inline-block;
}

.width-10 {
	width: 10px !important;
	min-width: 10px !important;
}

.width-25 {
	width: 25px !important;
	min-width: 25px !important;
}

.width-120 {
	width: 120px !important;
	min-width: 120px !important;
}

.min-width-250 {
	min-width: 250px !important;
}

.form-horizontal .checkbox.padding-top {
	padding-top: 11px !important;
}

.white-text {
	color: white;
}

.onu-wrapper .col-xs-12,
.onu-wrapper .col-sm-6 {
	padding: 0px !important;
}

#map-canvas,
#map-leaflet {
  height: 200px;
  border: 2px solid #fff;
}

.equipment {
	padding-bottom: 15px;
}

#status {
	margin-top: 5px;
}

.pagination {
	margin: 0px;
}

.pagination>li>a, 
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #2C3E50;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {
    z-index: 2;
    color: #2c3e50;
    background-color: #eee;
    border-color: #ddd;
}

.pon-type-filter {
	margin-top: 5px;
}

.pon-type-filter span {
	font-weight: bold;
	cursor: pointer !important; 
	cursor: hand !important;
}

.pon-type-filter .pagination > li > span:hover,
.pon-type-filter .pagination > li > span:focus {
	z-index: 2 !important;
    border-color: #ddd !important;
}

.pon-type-filter .pagination > .active > span:hover,
.pon-type-filter .pagination > .active > span:focus {
	z-index: 2 !important;
    border-color: #ddd !important;
}

.pon-type-filter label {
	vertical-align: top !important;
	padding-top: 7px;
}

.no-default-uppercase {
	text-transform:none !important;
}

._select_color{
    font-size: 20px;
    padding: 10px 12px;
    font-weight: 300;
    line-height: 28px;
    border-radius: 4px;
    border: 1px solid #ccc;
    -webkit-appearance: none;
    width: 100%;
    height: auto;
    box-shadow: none;
    text-align: left;
    background-image: none;
    background: white;
}
._select_color_drop {
    margin: 0;
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: 99%;
    border-top: 0;
    width: 100%;
}
._select_color_drop > li {
    /* display: inline-block; */
    padding: 7px;
    border-right: 1px solid rgba(192, 192, 192, 0.55);
    cursor: pointer;
    float: left;
}
._select_color_drop > li > .color,.btn > span.color{
    width: 25px;
    height: 25px;
    border-radius: 4px;
    float: left;
}
.dropdown .btn:hover, .dropdown .btn:focus, .dropdown .btn.focus {
    color: inherit;
}
.btn > span.color {
	margin-right:10px
}
#buffers-wrapper .btn .caret{
    float: right;
    border-top: 7px solid;
    font-size: 28px;
    padding-top: 5px;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 17px;    
}

#buffers-wrapper .btn.disabled, #buffers-wrapper .btn[disabled], #buffers-wrapper fieldset[disabled] .btn {
	opacity:1;
}
._select_color_drop > li > .blue ,.btn._select_color > span.blue{background-color: blue;}
._select_color_drop > li > .orange ,.btn._select_color > span.orange{background-color: orange;}
._select_color_drop > li > .green ,.btn._select_color > span.green{background-color: green;}
._select_color_drop > li > .brown ,.btn._select_color > span.brown{background-color: brown;}
._select_color_drop > li > .grey ,.btn._select_color > span.grey{background-color: silver;}
._select_color_drop > li > .white ,.btn._select_color > span.white{background-color: white; border: 1px solid black;}
._select_color_drop > li > .red ,.btn._select_color > span.red{background-color: red;}
._select_color_drop > li > .black ,.btn._select_color > span.black{background-color: black;}
._select_color_drop > li > .yellow ,.btn._select_color > span.yellow{background-color: yellow;}
._select_color_drop > li > .violet ,.btn._select_color > span.violet{background-color: #800080;}
._select_color_drop > li > .pink ,.btn._select_color > span.pink{background-color: pink;}
._select_color_drop > li > .turquoise ,.btn._select_color > span.turquoise{background-color: #40e0d0;}
._select_color_drop > li > .blue_w_black ,.btn._select_color > span.blue_w_black{background-image: linear-gradient(blue 33.33%, black 33.33%, black 66.66%, blue 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .orange_w_black ,.btn._select_color > span.orange_w_black{background-image: linear-gradient(orange 33.33%, black 33.33%, black 66.66%, orange 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .green_w_black ,.btn._select_color > span.green_w_black{background-image: linear-gradient(green 33.33%, black 33.33%, black 66.66%, green 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .brown_w_black ,.btn._select_color > span.brown_w_black{background-image: linear-gradient(brown 33.33%, black 33.33%, black 66.66%, brown 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .grey_w_black ,.btn._select_color > span.grey_w_black{background-image: linear-gradient(silver 33.33%, black 33.33%, black 66.66%, silver 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .white_w_black ,.btn._select_color > span.white_w_black{background-image: linear-gradient(white 33.33%, black 33.33%, black 66.66%, white 66.66%);  background-size: 100% 100%; border: 1px solid black;}
._select_color_drop > li > .red_w_black ,.btn._select_color > span.red_w_black{background-image: linear-gradient(red 33.33%, black 33.33%, black 66.66%, red 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .black_w_yellow ,.btn._select_color > span.black_w_yellow{background-image: linear-gradient(black 33.33%, yellow 33.33%, yellow 66.66%, black 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .yellow_w_black ,.btn._select_color > span.yellow_w_black{background-image: linear-gradient(yellow 33.33%, black 33.33%, black 66.66%, yellow 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .violet_w_black ,.btn._select_color > span.violet_w_black{background-image: linear-gradient(#800080 33.33%, black 33.33%, black 66.66%, #800080 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .pink_w_black ,.btn._select_color > span.pink_w_black{background-image: linear-gradient(pink 33.33%, black 33.33%, black 66.66%, pink 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .turquoise_w_black ,.btn._select_color > span.turquoise_w_black{background-image: linear-gradient(#40e0d0 33.33%, black 33.33%, black 66.66%, #40e0d0 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .blue_w_red ,.btn._select_color > span.blue_w_red{background-image: linear-gradient(blue 33.33%, red 33.33%, red 66.66%, blue 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .orange_w_red ,.btn._select_color > span.orange_w_red{background-image: linear-gradient(orange 33.33%, red 33.33%, red 66.66%, orange 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .green_w_red ,.btn._select_color > span.green_w_red{background-image: linear-gradient(green 33.33%, red 33.33%, red 66.66%, green 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .brown_w_red ,.btn._select_color > span.brown_w_red{background-image: linear-gradient(brown 33.33%, red 33.33%, red 66.66%, brown 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .grey_w_red ,.btn._select_color > span.grey_w_red{background-image: linear-gradient(silver 33.33%, red 33.33%, red 66.66%, silver 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .white_w_red ,.btn._select_color > span.white_w_red{background-image: linear-gradient(white 33.33%, red 33.33%, red 66.66%, white 66.66%);  background-size: 100% 100%; border: 1px solid black;}
._select_color_drop > li > .red_w_yellow ,.btn._select_color > span.red_w_yellow{background-image: linear-gradient(red 33.33%, yellow 33.33%, yellow 66.66%, red 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .black_w_red ,.btn._select_color > span.black_w_red{background-image: linear-gradient(black 33.33%, red 33.33%, red 66.66%, black 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .yellow_w_red ,.btn._select_color > span.yellow_w_red{background-image: linear-gradient(yellow 33.33%, red 33.33%, red 66.66%, yellow 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .violet_w_red ,.btn._select_color > span.violet_w_red{background-image: linear-gradient(#800080 33.33%, red 33.33%, red 66.66%, #800080 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .pink_w_red ,.btn._select_color > span.pink_w_red{background-image: linear-gradient(pink 33.33%, red 33.33%, red 66.66%, pink 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .turquoise_w_red ,.btn._select_color > span.turquoise_w_red{background-image: linear-gradient(#40e0d0 33.33%, red 33.33%, red 66.66%, #40e0d0 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .blue_w_green ,.btn._select_color > span.blue_w_green{background-image: linear-gradient(blue 33.33%, green 33.33%, green 66.66%, blue 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .orange_w_green ,.btn._select_color > span.orange_w_green{background-image: linear-gradient(orange 33.33%, green 33.33%, green 66.66%, orange 66.66%);  background-size: 100% 100%;}
._select_color_drop > li > .red_w_green ,.btn._select_color > span.red_w_green{background-image: linear-gradient(red 33.33%, green 33.33%, green 66.66%, red 66.66%);  background-size: 100% 100%;}



/* custom */

.notranslate {
    translate: none;
}

.select-search {
	text-align: left;
	white-space: nowrap;
	padding: 5px;
}

button.multiselect {
	padding: 10px 5px 10px 10px;
}

.multiselect-selected-text { 
    width: -webkit-calc(100% - 10px);
    width:    -moz-calc(100% - 10px);
    width:         calc(100% - 10px);
	display: inline-block;
	overflow: hidden;
}

.h-75 {
	min-height: 75vh;
}

.full-width {
	width: 100%;
}

.overflow-hidden {
	overflow: hidden;
}

img.img-smartolt-small {
	height: 150px;
	width: 454px;
}

img.img-smartolt-big {
	height: 190px;
	width: 484px;
}

img.img-smartolt-dashboard {
	height: 251px;
	width: 694px;
}

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

.lb-sm {
  font-size: 12px;
  padding: 6px;
}

.lb-md {
  font-size: 14px;
}

.lb-lg {
  font-size: 16px;
  padding: 6px;

}

.collapsing {
    -webkit-transition: none;
    transition: none;
}

.livetr069graph {
	padding: 2px 0px !important;
	margin: 0px !important;
	width: 100%;
	border-width: 0px !important;
	border-radius: 4px;
	color: #2c3e50;
	white-space: nowrap;
	font-size: 12px;
}

.tr69 > .panel-heading {
	color: inherit;
	background-color: #ebebeb;
	border-color: #cecece;
	padding: 5px 15px;
}
.tr69.panel {
	margin-bottom: 5px;
}
.tr69.panel-info {
	border-color: #cecece;
}

button[data-operation=delTag] {
	background-color: Transparent;
	border: 0px;
	padding: 0px;
}

.tr69 > .panel-heading {
  font-weight: bold;
}
.panel-body.tr69data {
  padding: 1px;
}

span > .tr69actionBtn {
	margin: 10px;
}

@media (min-width: 768px) {
	.modal-xl {
	  width: 90%;
	 max-width:1200px;
	}
}

/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

.content-wrap {
	min-height: 90vh;
}

#moveBtn {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    padding: 10px 40px;
    z-index: 1060;
}

.modal.slide-right .modal-dialog {
    margin-left: auto !important;
    margin-right: 30px !important;
    transition: margin .4s ease;
}
.modal.slide-left .modal-dialog {
    margin-left: auto !important;
    margin-right: auto !important;
    transition: margin .4s ease;
}

.task-progress .progress .progress-text {
	position: absolute;
	left: 45%;
	font-size: 12px;
	font-weight: bold;
	color: #2c3e50;
	white-space: nowrap;
}

/* Toggle switch container */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide the checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider background */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

/* Slider handle */
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Checked state */
input:checked + .slider {
  background-color: #4CAF50;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

#auto_interval_group .pagination li span {
  color: #4CAF50;
  border: 1px solid #4CAF50;
  padding: 5px 12px;
  border-radius: 4px;
  transition: 0.2s;
  cursor: pointer;
}

#auto_interval_group .pagination li.active span,
#auto_interval_group .pagination li span:hover,
#auto_interval_group .pagination li span:focus {
  background-color: #4CAF50;
  color: white;
}

#auto_interval_group .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

a:focus:not(:focus-visible),
input[type="file"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible) {
  outline: none;
}

/* Native file inputs: Bootswatch's fixed .form-control height (45px, or 35px with
   .input-sm) plus top padding crops the browser's "Choose file" button so its bottom
   border is cut off. Size to content instead, keeping it aligned with sibling inputs.
   Applies app-wide to any file input carrying .form-control. */
input[type="file"].form-control {
  height: auto;
  min-height: 35px;
  line-height: 1.5;
}

/* In-input eye toggle for password/secret fields. Wrap positions the icon, the
   input reserves room for it on the right. Night overrides live in
   dashboard-smartolt-night.css. */
.password-visibility-wrap {
  position: relative;
}

.password-visibility-input {
  padding-right: 42px;
}

.password-visibility-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus {
  color: #333;
  outline: none;
}

/* Small inputs (.input-sm, e.g. the TR-069 parameter tree) are narrower and shorter,
   so the icon sits tighter to the edge. */
.password-visibility-input.input-sm {
  padding-right: 34px;
}

.password-visibility-input.input-sm ~ .password-visibility-toggle {
  right: 10px;
}

/* TR-069 parameter tree: passphrase fields are real text inputs (a filled
   type=password input makes the browser offer to save it as a credential), so
   the masking is done here. Theme-independent - no night override needed. */
input.tr69-masked {
  -webkit-text-security: disc;
}

/* Global action button elevation: keep all colored action buttons aligned with Get Status. */
.btn-success,
.btn-primary,
.btn-warning,
.btn-yellow,
.btn-danger,
.btn-default,
.btn-success:hover,
.btn-primary:hover,
.btn-warning:hover,
.btn-yellow:hover,
.btn-danger:hover,
.btn-default:hover,
.btn-success:focus,
.btn-primary:focus,
.btn-warning:focus,
.btn-yellow:focus,
.btn-danger:focus,
.btn-default:focus,
.btn-success.focus,
.btn-primary.focus,
.btn-warning.focus,
.btn-yellow.focus,
.btn-danger.focus,
.btn-default.focus {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
}

.btn-success:active,
.btn-primary:active,
.btn-warning:active,
.btn-yellow:active,
.btn-danger:active,
.btn-default:active,
.btn-success.active,
.btn-primary.active,
.btn-warning.active,
.btn-yellow.active,
.btn-danger.active,
.btn-default.active,
.btn-success:active:hover,
.btn-primary:active:hover,
.btn-warning:active:hover,
.btn-yellow:active:hover,
.btn-danger:active:hover,
.btn-default:active:hover,
.btn-success:active:focus,
.btn-primary:active:focus,
.btn-warning:active:focus,
.btn-yellow:active:focus,
.btn-danger:active:focus,
.btn-default:active:focus,
.btn-success.active:focus,
.btn-primary.active:focus,
.btn-warning.active:focus,
.btn-yellow.active:focus,
.btn-danger.active:focus,
.btn-default.active:focus {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/* Wide-tables layout (theme-agnostic; applies in both light and night themes).
   Lives here, not in dashboard-smartolt-night.css, so a night-only cleanup
   can't break light-mode wide tables. */
#smartolt-wide-table-toggle {
  opacity: 0.82;
}

@media (max-width: 1439px) {
  #smartolt-wide-table-toggle {
    display: none !important;
  }

  html.smartolt-wide-tables body.smartolt-site #onu_configured_list,
  html.smartolt-wide-tables body.smartolt-site .diagnostics-list-wide-host,
  html.smartolt-wide-tables body.smartolt-site .system-config-wide-host {
    left: auto !important;
    max-width: 100% !important;
    position: static !important;
    width: auto !important;
  }
}

@media (min-width: 1440px) {
html.smartolt-wide-tables {
  --smartolt-wide-table-margin: 40px;
}

#smartolt-wide-table-toggle:hover,
#smartolt-wide-table-toggle:focus,
#smartolt-wide-table-toggle.is-active {
  opacity: 1;
}

#smartolt-wide-table-toggle .smartolt-wide-icon-compress {
  display: none;
}

html.smartolt-wide-tables #smartolt-wide-table-toggle .smartolt-wide-icon-expand {
  display: none;
}

html.smartolt-wide-tables #smartolt-wide-table-toggle .smartolt-wide-icon-compress {
  display: inline-block;
}

html.smartolt-wide-tables body.smartolt-site #onu_configured_list,
html.smartolt-wide-tables body.smartolt-site .diagnostics-list-wide-host,
html.smartolt-wide-tables body.smartolt-site .system-config-wide-host {
  box-sizing: border-box;
  left: calc(50% - 50vw + var(--smartolt-wide-table-margin));
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  position: relative;
  width: calc(100vw - (var(--smartolt-wide-table-margin) * 2));
}

html.smartolt-wide-tables body.smartolt-site #onu_configured_list > .container-fluid,
html.smartolt-wide-tables body.smartolt-site .diagnostics-list-wide-host {
  padding-left: 0;
  padding-right: 0;
}

html.smartolt-wide-tables body.smartolt-site #onu_configured_list > .container-fluid > .row,
html.smartolt-wide-tables body.smartolt-site .diagnostics-list-wide-host > .row {
  margin-left: 0;
  margin-right: 0;
}
}

/* inline <code> tokens (e.g. /newbot in the Telegram guide): white on neutral gray, app-wide */
code {
  color: #ffffff;
  background-color: #0064c8;
  cursor: copy;
  transition: background-color 0.12s ease;
}
code:hover {
  background-color: #1a78d6;
}
pre code {
  cursor: auto;
}
pre code:hover {
  background-color: transparent;
}
/* Click-to-copy flash bubble — shared by every copy surface handled by
   code_copy.js. Night-mode overrides live in dashboard-smartolt-night.css. */
.smartolt-copy-flash {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  color: #0064c8;
  font-size: 12px;
  font-weight: 600;
  left: 0;
  line-height: 1.2;
  opacity: 0;
  padding: 5px 10px;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
  z-index: 10050;
}
.smartolt-copy-flash.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Click-to-copy cells — the affordance for any element carrying the
   smartolt-copy-cell hook. Night hover lives in dashboard-smartolt-night.css. */
.smartolt-copy-cell {
  border-radius: 4px;
  cursor: copy;
  display: inline;
  margin: -1px -4px;
  padding: 1px 4px;
  transition: background-color 0.12s ease;
}
.smartolt-copy-cell:hover {
  background-color: rgba(0, 100, 200, 0.1);
}

/* Hub card grid (Presets hub, Infrastructure hub): a landing page whose only content is a
   set of large clickable cards pointing at the real listings. Night equivalents are in
   dashboard-smartolt-night.css. */
html:not(.smartolt-night) .solt-hub-page {
  padding-top: var(--smartolt-nav-offset, 68px);
}
.solt-hub-heading {
  margin-bottom: 22px;
}
.solt-hub-heading h2 {
  margin: 0;
}
.solt-hub-row {
  display: flex;
  flex-wrap: wrap;
}
.solt-hub-column {
  display: flex;
  margin-bottom: 20px;
}
.solt-hub-card,
.solt-hub-card:hover,
.solt-hub-card:focus,
.solt-hub-card:active {
  color: #2c3e50;
  text-decoration: none !important;
}
.solt-hub-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 220px;
  padding: 26px;
  background: #fff;
  border: 1px solid #d9e1e8;
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(38, 50, 56, .06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.solt-hub-card:hover,
.solt-hub-card:focus {
  border-color: #91bdd8;
  box-shadow: 0 7px 18px rgba(38, 50, 56, .12);
  outline: 0;
  transform: translateY(-2px);
}
.solt-hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  color: #247ba5;
  background: #eaf5fb;
  border-radius: 50%;
  font-size: 20px;
}
.solt-hub-card h3 {
  margin: 0 0 9px;
  font-size: 20px;
}
.solt-hub-card p {
  margin-bottom: 24px;
  line-height: 1.55;
}
.solt-hub-action {
  margin-top: auto;
  color: #247ba5;
  font-weight: 600;
}
.solt-hub-action .fa {
  margin-left: 5px;
  transition: transform .15s ease;
}
.solt-hub-card:hover .solt-hub-action .fa,
.solt-hub-card:focus .solt-hub-action .fa {
  transform: translateX(3px);
}
@media (max-width: 767px) {
  .solt-hub-row {
    display: block;
  }
  .solt-hub-card {
    min-height: 0;
    padding: 22px;
  }
}

/* Shared search/filter panel for listing pages (fiber types, cabinets, splitter boxes,
   map objects, area maps). Each page used to carry its own copy under a page-specific
   class prefix; reconciled here so future listings gain the look for free and the five
   pages can point at one definition instead of drifting further apart. */
.solt-filter-panel {
  align-items: flex-end;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 12px;
  padding: 14px 16px;
}
.solt-filter-panel .control-label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.solt-filter-panel .form-group {
  margin-bottom: 0;
}
.solt-filter-panel .solt-filter-reset {
  align-self: flex-end;
  margin-bottom: 5px;
  margin-left: 0;
}
html.smartolt-night body.smartolt-site .solt-filter-panel {
  background-color: #111827;
  border-color: #273447;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
html.smartolt-night body.smartolt-site .solt-filter-panel .control-label {
  color: #9ca3af;
}
html.smartolt-night body.smartolt-site .solt-filter-panel .form-control {
  background-color: #0f172a;
  border-color: #273447;
  color: #f9fafb;
  color-scheme: dark;
}
html.smartolt-night body.smartolt-site .solt-filter-panel .form-control::placeholder {
  color: #9ca3af;
}
@media (max-width: 767px) {
  .solt-filter-panel {
    display: block;
  }
  .solt-filter-panel .form-group {
    margin-bottom: 10px;
  }
  .solt-filter-panel .solt-filter-reset {
    margin-left: 0;
  }
}

/* Bootstrap leaves .btn with no bottom margin, so any row of buttons that wraps on a
   phone comes back as touching rows. A 375px sweep of 85 screens found it on the users
   listing, the preset and reseller-access headers, and every modal footer in the app.
   This gives the rest 8px, close to (not the same as) the 10px the ONU view already
   uses by hand via .margin-bottom. The .modal-footer selector has to be spelled out
   because bootstrap-custom zeroes the margin at that specificity. Buttons inside the
   Leaflet container keep their own spacing; the map page's modals and side panels sit
   outside that container and still pick up the 8px below. */
@media (max-width: 767px) {
  .btn,
  .modal-footer .btn + .btn {
    margin-bottom: 8px;
  }
  .btn-group > .btn,
  .input-group-btn > .btn,
  .navbar .btn,
  .dropdown-menu .btn,
  .leaflet-container .btn,
  td .btn,
  th .btn,
  .panel-heading .btn,
  .metric-card h4 .btn,
  .preset-page-heading .btn,
  .preset-toolbar .btn {
    margin-bottom: 0;
  }
  /* Same specificity as .btn (0,1,0), later in the file, so without this it silently
     wins over the password-reveal eye's deliberate 3px in every context .btn-link-slim
     appears in — !important settles it instead of relying on cascade order. */
  .btn-link-slim {
    margin-bottom: 3px !important;
  }
  /* Table cells opt in instead. Most action cells hold one button and never wrap, so
     the margin there would only make every row of a long listing taller — it measured
     +15% row height on the OLT listing. Put .btn-stack on the few cells that really do
     carry a row of buttons. */
  .btn-stack > .btn {
    margin-bottom: 8px;
  }
  /* .btn-group > .btn above ties .btn-stack > .btn on specificity (0,2,0) and loses to
     it on source order, so a button group inside a stacked cell pulled apart at the
     segment joins. One extra selector step re-outranks it without touching either rule. */
  .btn-stack > .btn-group > .btn {
    margin-bottom: 0;
  }
}