@charset "utf-8";
/*
CSS Document
Product name: CM2W application
Product page: www.cm2w.net

Library name "smt-lib",
library author: Svetoslav Todev,
GUI/UX team leader and senior designer,
contact info: smt@smt.bg, www.smt.bg
*/

::selection {
	background: rgba(0,0,0,0.3); }

::-moz-selection {
	color: rgba(0,0,0,0.3); }

/**
 * ->region Reset
 */
html, body, div, span, article, section, nav, header, footer, aside, main, summary, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;

	-moz-box-sizing:    border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari */
	box-sizing:         border-box; /* IE8+, Opera */
}
article, section, nav, header, footer, aside, main, summary {display: block;}

/** <-endregion Reset ------------------------------------------------------------------*/
body, html{}
html {}
body {}

/** Block Elements */
p {margin: 1em 0;}
address {margin: 1em 0;	font-style: italic;}
pre {
	margin: 1em 0;
	font-family: monospace;
	white-space: pre;
}
fieldset, fieldset.fieldset {
	border: 1px solid #929292;
	margin: 2px 0px 2px 0;
	padding: 10px;
}

/** Tables */
table {
	border-collapse:collapse;
}

/** Lists */
ol, ul {
	margin: 1em 0;
	padding: 0 0 0 40px;
}
.sidebar ol, .sidebar ul {
	margin: 1em 0;
	padding:0;
}
ol ol, ol ul,
ul ul, ul ol {
	margin-top: 0;
	margin-bottom: 0;
}
dl {margin: 1em 0;}
dt {}
dd {margin: 0 0 0 40px;}

/** Quotes */
blockquote {
	margin: 1em 40px;
	quotes: "";
	quotes: none;
}
cite {font-style: italic;}
q {quotes: "“" "”" "‘" "’";}

/** Phrase elements */
i, em {font-style: italic;}
b, strong {font-weight: bold;}
small {font-size: smaller;}
big {font-size: bigger;}
sub {font-size: smaller;line-height: normal;vertical-align: sub;}
sup {font-size: smaller;line-height: normal;vertical-align: super;}
tt, code, kbd, samp {font-family: monospace;}
abbr {text-decoration: none;}
/*--------------------------------------------------------------------------*/

/**
 * @region	Form elements
 */
form {}

/** Dropdowns */
select[disabled=disabled]{
	color:grey;
}

/** Buttons */
/** Buttons holder */

/** @endregion */

/*--------------------------------------------------------------------------*/

/* >> CLASSES COMMON */
.noselect,
.view-add-widget .panel.skin-widget {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}

/** Box sizing **/
.sizing-box,
.em-tab-list li,
select.skin-clean,
select.skin-clean option {
	-moz-box-sizing:    border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari */
	box-sizing:         border-box; /* IE8+, Opera */
}

/*- display -*/
.display-none, .hidden {display: none !important;}
.display-block {display: block;}
.display-inline {display: inline;}
.display-inline-block {display: inline-block;}
.display-zero,
.ember-application .display-zero {
	display:block;
	height:0;
	width:0;
	border:none;
	padding:0;
	margin:0;
	overflow:hidden;
}

/* Hide If Empty Tag - whitespace is not ignored, works only on total empty tags */
.hide-if-empty:empty {display: none !important;}

/* Hide If Blank Tag - whitespace is ignored, but there is no browser support of this yet */
.hide-if-blank:blank {display: none !important;}

/*- overflow -*/
.overflow-hidden {overflow:hidden;}
.overflow-x-hidden {overflow-x:hidden;}
.overflow-y-hidden {overflow-y:hidden;}
.overflow-visible {overflow:visible;}
.overflow-auto {overflow:auto;}
.overflow-scroll {overflow: scroll;}


/* horizontal scroll */
.h-scroll {overflow-x: auto;}

/* vertical scroll */
.v-scroll {overflow-y: auto;}

.v-scroll-max1 {max-height: 100px; overflow-y: auto;}
.v-scroll-max2 {max-height: 200px; overflow-y: auto;}
.v-scroll-max3 {max-height: 300px; overflow-y: auto;}
.v-scroll-max3-9 {max-height: 390px; overflow-y: auto;}
.v-scroll-max4 {max-height: 400px; overflow-y: auto;}

.v-scroll-max-vh10 {max-height: 10vh; overflow-y: auto;}
.v-scroll-max-vh20 {max-height: 20vh; overflow-y: auto;}
.v-scroll-max-vh30 {max-height: 30vh; overflow-y: auto;}
.v-scroll-max-vh40 {max-height: 40vh; overflow-y: auto;}
.v-scroll-max-vh50 {max-height: 50vh; overflow-y: auto;}
.v-scroll-max-vh60 {max-height: 60vh; overflow-y: auto;}
.v-scroll-max-vh70 {max-height: 70vh; overflow-y: auto;}
.v-scroll-max-vh80 {max-height: 80vh; overflow-y: auto;}
.v-scroll-max-vh90 {max-height: 90vh; overflow-y: auto;}



/* fix for v-scroll layout on desktop and reset for mobile */
.offset-v-scroll-fix {margin-right: -15px;}
.mobile-detected .offset-v-scroll-fix {margin-right: 0;}

/*- txt-elipsis -*/ /*- works only for elements that have specified non-scalable width and nonbreakable words - whitespace nowrap -*/
.txt-ellipsis {
	text-overflow:ellipsis;
	overflow:hidden;
}

/*- visibility -*/
.visibility-hidden { visibility: hidden; }
.visibility-visible { visibility: visible; }
.visibility-collapse { visibility: collapse; }


.faded {opacity: 0.4;}
.faded-01 {opacity: 0.1;}
.faded-02 {opacity: 0.2;}
.faded-03 {opacity: 0.3;}
.faded-06 {opacity: 0.6;}
.faded-09 {opacity: 0.9;}


/*- cursor -*/
.cursor-pointer {cursor: pointer;}
.cursor-default {cursor: default;}

/*-self clear-*/
.self-clear:after,
.list ul:after,
.list:after,
.em-tab-list:after,
.quick-search .dropdown-menu a:after,
.app-middle .page-content:after {
	content:"";
	display:block;
	clear:both;
	line-height:0;
	height:0;
}

.clear-left { clear: left;}
.clear-right { clear: right;}
.clear-both { clear: both;}

/*--*/

.box.tagline {
	font-size: .9em;
	padding: 20px 0;
	border-top: 1px dashed #ccc;
}


/**
 * @region Utility classes
 */
/** Flow */
.float-left {float: left;}
.float-right {float: right;}
.no-float {float: none;}

.v-align-top {vertical-align:top;}
.v-align-middle {vertical-align:middle;}
.v-align-bottom {vertical-align:bottom;}

.line-h-1 {line-height: 1;}
.line-h-1-1 {line-height: 1.1;}
.line-h-1-2 {line-height: 1.2;}
.line-h-1-3 {line-height: 1.3;}
.line-h-1-4 {line-height: 1.4;}
.line-h-1-5 {line-height: 1.5;}
.line-h-1-6 {line-height: 1.6;}
.line-h-1-7 {line-height: 1.7;}
.line-h-1-8 {line-height: 1.8;}
.line-h-1-9 {line-height: 1.9;}
.line-h-2 {line-height: 2;}

/* position */
.p-relative {position: relative;}
.p-absolute {position: absolute;}


/*sticky elements*/
.sticky-el {
	position: -webkit-sticky;
    position: sticky;
}

.sticky-el.st-0 {top: 0;}
.sticky-el.st-10 {top: 10px;}
.sticky-el.st-20 {top: 20px;}
.sticky-el.st-30 {top: 30px;}
.sticky-el.st-40 {top: 40px;}
.sticky-el.st-50 {top: 50px;}
.sticky-el.st-60 {top: 60px;}
.sticky-el.st-70 {top: 70px;}
.sticky-el.st-80 {top: 80px;}
.sticky-el.st-90 {top: 90px;}
.sticky-el.st-100 {top: 100px;}

.sticky-el.sb-0 {bottom: 0;}
.sticky-el.sb-10 {bottom: 10px;}
.sticky-el.sb-20 {bottom: 20px;}
.sticky-el.sb-30 {bottom: 30px;}
.sticky-el.sb-40 {bottom: 40px;}
.sticky-el.sb-50 {bottom: 50px;}
.sticky-el.sb-60 {bottom: 60px;}
.sticky-el.sb-70 {bottom: 70px;}
.sticky-el.sb-80 {bottom: 80px;}
.sticky-el.sb-90 {bottom: 90px;}
.sticky-el.sb-100 {bottom: 100px;}

/* viewport height */
.vh-10 {height: 10vh;}
.vh-20 {height: 20vh;}
.vh-30 {height: 30vh;}
.vh-40 {height: 40vh;}
.vh-50 {height: 50vh;}
.vh-60 {height: 60vh;}
.vh-70 {height: 70vh;}
.vh-80 {height: 80vh;}
.vh-90 {height: 90vh;}
.vh-100 {height: 10vh;}


/*- text labels and colors -*/
.txt-bold {font-weight: bold;}
.txt-nonbold {font-weight: normal;}

.txt-label {
	display:inline-block;
	border-radius: 3px;
	padding: 1px 6px;
	background-color: rgba(0, 0, 0, 0.1);
}

.txt-label.inverted {
	background-color: transparent !important;
	padding: 0 5px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.txt-label.txt-dark-sky .txt-label.inverted {
	background-color: #fff !important;
}


.txt-accent {color: var(--accent-color);}
.txt-error-accent {color: var(--error-accent-color);}
.txt-warning-accent {color: var(--warning-accent-color);}
.txt-ok-accent {color: var(--ok-accent-color);}

.txt-disabled {color: #c9c9c9;}
.txt-red {color: #a30000;}
.txt-green {color:#47911f;}
.txt-purple {color:#7a1f91;}
.txt-blue {color:#37689a;}
.txt-cyan {color:#2698b5;}
.txt-orange {color:#e44e0c;}
.txt-yellow {color:#DDC800;}
.txt-brown {color:#7A4B00;}
.txt-gray {color:#666666;}
.txt-light-gray {color:#999999;}
.txt-cold-gray {color:#8DAEBE;}
.txt-white {color:#ffffff;}
.txt-dark {color:#222222;}
.txt-light-sky {color:#007BFF;}
.txt-info {color:rgb(23, 162, 184);}


.txt-icon-circle-accent {
	background-color: var(--accent-bg);
    color: var(--accent-bg-txt);
	display: inline-block;
    border-radius: 100px;
	padding: 0.2rem 0.25rem;
}


.txt-x-small, .txt-xsmall {font-size: 0.6rem;}
.txt-m-small, .txt-msmall {font-size: 0.7rem;}
.txt-small {font-size: 0.8rem;}
.txt-normal {font-size: 1rem;}
.txt-medium {font-size: 1.1rem;}
.txt-large {font-size: 1.4rem;}
.txt-x-large, .txt-xlarge {font-size: 2rem;}



/*--*/
.txt-label.number {
	color: #536e89;
	background-color: rgba(76, 103, 126, 0.2);
}
.txt-label.number.new {
	color: #d36f75;
	background-color: rgba(202, 134, 139, 0.2);
	font-weight: bold;
}
.txt-label.txt-red, .bg-red {background-color:rgba(255, 0, 0, 0.2);}
.txt-label.txt-green, .bg-green {background-color:rgba(21, 176, 42, 0.22);}
.txt-label.txt-purple, .bg-purple {background-color:rgba(106, 21, 176, 0.22);}
.txt-label.txt-blue, .bg-blue {background-color:rgba(46, 101, 129, 0.22);}
.txt-label.txt-cyan, .bg-cyan {background-color:rgba(89, 188, 213, 0.1);}
.txt-label.txt-orange, .bg-orange {background-color:rgba(233, 120, 37, 0.22);}
.txt-label.txt-yellow, .bg-yellow {background-color: rgba(255,238,0,0.46);}
.txt-label.txt-gray, .bg-gray {background-color:rgba(102, 102, 102, 0.15);}

.txt-label.txt-dark-red, .bg-dark-red {background-color:rgb(220, 0, 0); color: #fff;}
.txt-label.txt-dark-green, .bg-dark-green {background-color:rgb(56, 129, 66); color: #fff;}
.txt-label.txt-dark-purple, .bg-dark-purple {background-color:rgb(100, 56, 129); color: #fff;}
.txt-label.txt-dark-blue, .bg-dark-blue {background-color:rgb(46, 101, 129); color: #fff;}
.txt-label.txt-dark-cyan, .bg-dark-cyan {background-color:rgb(47, 171, 189); color: #fff;}
.txt-label.txt-dark-sky, .bg-dark-sky {background-color:#007BFF; color: #fff;}
.txt-label.txt-dark-orange, .bg-dark-orange {background-color:rgb(233, 120, 37); color: #fff;}
.txt-label.txt-dark-gray, .bg-dark-gray {background-color:rgb(102, 102, 102); color: #fff;}

/*txt-label inverted*/
.txt-label.inverted.txt-red {border-color: #d51414; color: #d51414;}
.txt-label.inverted.txt-green {border-color: #47911f; color: #47911f;}
.txt-label.inverted.txt-purple {border-color: #7a1f91; color: #7a1f91;}
.txt-label.inverted.txt-blue {border-color: #37689a; color: #37689a;}
.txt-label.inverted.txt-accent {border-color: var(--accent-color); color: var(--accent-color);}
.txt-label.inverted.txt-cyan {border-color: #2CB7D5; color: #2CB7D5;}
.txt-label.inverted.txt-brown {border-color: #7A4B00; color: #7A4B00;}
.txt-label.inverted.txt-orange {border-color: #F27100; color: #F27100;}
.txt-label.inverted.txt-yellow {border-color: #DDC800; color: #DDC800;}
.txt-label.inverted.txt-gray {border-color: #666666; color: #666666;}
.txt-label.inverted.txt-cold-gray {border-color: #8DAEBE; color: #8DAEBE;}



.bg-warning {background: /*#fff09c*/ rgba(255, 240, 156, 0.6) !important;}
.bg-critical {background: /*#ffbfbf*/ rgba(255, 189, 189, 0.6) !important;}



.bgr-main {background-color: var(--main-bg-color);}

.info-badge { /* info icon with tooltip attached to it */
	vertical-align:middle;
	display:inline-block;
	color:#2CB7D5;
	cursor: pointer;
}

.dashed-bot {
	padding-bottom:5px;
	margin-bottom:10px;
	border-bottom: 1px dashed rgba(0,0,0,0.4);
}

.sep-top {border-top: 1px solid rgba(0,0,0,0.08);}
.sep-bot {border-bottom: 1px solid rgba(0,0,0,0.08);}
.sep-left {border-left: 1px solid rgba(0,0,0,0.08);}
.sep-right {border-right: 1px solid rgba(0,0,0,0.08);}

.sep-dash-top {border-top: 3px dashed rgba(0,0,0,0.18);}
.sep-dash-bot {border-bottom: 3px dashed rgba(0,0,0,0.18);}
.sep-dash-left {border-left: 3px dashed rgba(0,0,0,0.18);}
.sep-dash-right {border-right: 3px dashed rgba(0,0,0,0.18);}


.slash-sep {
	display: inline-block;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    height: 1.3em;
    margin-bottom: -0.3em;
    transform: rotate(20deg);
}

.required-ind:after {
	content:"\2a";
	color: #E50003;
	font-size:1.2em;
}
/*- LISTS -*/
/* bullet-list */
ul.bullet-list {list-style:disc; padding: 0 0 0 20px;}
ul.bullet-list li {padding: 0 0 10px 0;}

/* bullet-list list-checkmarks*/
ul.list-checkmarks {list-style:none; padding: 0;}
ul.list-checkmarks li {
    position: relative;
    padding: 0 0 20px 30px;
}
ul.list-checkmarks li:before {
    content: "\f03a";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.3em;
    line-height: 1.2;
}


/* list */
.list ul, .list, .list li {
	list-style:none;
	margin:0;
	padding:0;
}
/* 2nd level */
.list.level-2,
.list .level-2 {
	margin-left: 30px;
}

/* list hor */
.list.hor li {float:left;}
.list.hor.space-r li {margin-right:14px;}
/* list ver - usage when nested in hor list*/
.list.ver li {float:none; /* display:block; */}
/* list inline-block */
.list.inline-block {font-size:0rem;} /* needed for inline-block layout */
.list.inline-block li {
	display: inline-block;
	font-size: 1rem;
}

/* simple list border separator - avoid in nested lists */
.list.sep li {border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.list.sep.light li {border-bottom:1px solid rgba(255, 255, 255, 0.1);}
.list.sep li:last-child,
.list.sep.light li:last-child {border-bottom:none;}


/* advanced list border separator */
.list.sep-items li.list-item {border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.list.sep-items.light li.list-item {border-bottom:1px solid rgba(255, 255, 255, 0.1);}
.list.sep-items li.list-item:last-child,
.list.sep-items.light li.list-item:last-child {border-bottom:none;}

/* list hover */
.list.skin-hover li:hover {background-color: rgba(0, 0, 0, 0.04);}


/* 2 col list*/
.list.col-2 {overflow: hidden;}
.list.col-2 li.col-unit {
	float: left;
	width: 50%;
}
.list.col-2 li.col-unit:nth-of-type(2n+1) {clear: left;}

/* 3 col list*/
.list.col-3 {overflow: hidden;}
.list.col-3 li.col-unit {
	float: left;
	width: 33%;
}
.list.col-3 li.col-unit:nth-of-type(3n+3) {}
.list.col-3 li.col-unit:nth-of-type(3n+2) {}
.list.col-3 li.col-unit:nth-of-type(3n) + .box.col-3 .item {clear: left;}
/*-*/
/* 4 col list*/
.list.col-4 {overflow: hidden;}
.list.col-4 li.col-unit {
	float: left;
	width: 25%;
}
.list.col-4 li.col-unit:nth-of-type(4n+1) {clear: left;}

/* def-list */
.def-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.def-list dt,
.def-list dd {
	flex:1;
	padding: 0;
	margin: 0;
}
.def-list.sep dt,
.def-list.sep dd {
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.def-list dt {
	flex-basis: 25%;
	max-width: 25%;
}
.def-list dd {
	flex-basis: 75%;
	max-width: 75%;
}

.def-list.def-warning dt {
	color: #a30000;
}

/* offsets */
.offset-5 {margin-left:-5px; margin-right:-5px}
.offset-10 {margin-left:-10px; margin-right:-10px}
.offset-15 {margin-left:-15px; margin-right:-15px}
.offset-20 {margin-left:-20px; margin-right:-20px}

.offset-top-15 {margin-top: -15px;}

/*-*/
.list.v-sspace li {padding-top:0.2rem; padding-bottom:0.2rem;}
.list.v-space li {padding-top:0.4rem; padding-bottom:0.4rem;}
.list.v-lspace li {padding-top:0.6rem; padding-bottom:0.6rem;}
.list.h-space li {padding-left:0.4rem; padding-right:0.4rem;}


/* fluid list - used in grid view lists state*/
.fluid-list {
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.fluid-list .fluid-col {
    flex: 1;
	box-sizing: border-box;
    /*min-width: 300px;*/
    flex-basis: 25%; max-width: 25%;
}
.popup .fluid-list .fluid-col,
.max-2col-wrap .fluid-list .fluid-col {
    flex-basis: 50%; max-width: 50%;
}

.max-7col-wrap .fluid-list .fluid-col {
    flex-basis: 14.28%; max-width: 14.28%;
}

.max-4col-wrap .fluid-list .fluid-col {
    flex-basis: 25%; max-width: 25%;
}
.max-3col-wrap .fluid-list .fluid-col {
    flex-basis: 33.333%; max-width: 33.333%;
}

.fluid-list.small-cols .fluid-col {
    min-width: 150px;
}
.fluid-list.large-cols .fluid-col {
    min-width: 500px;
}

@media only screen and (max-width: 1480px) {
	.fluid-list .fluid-col {
        flex-basis: 33%; max-width: 33%;
    }
}

@media only screen and (max-width: 1200px) {
	.fluid-list .fluid-col,
	.max-3col-wrap .fluid-list .fluid-col {
        flex-basis: 50%; max-width: 50%;
    }
}
@media only screen and (max-width: 800px) {
	.fluid-list .fluid-col,
    .popup .fluid-list .fluid-col,
		.max-7col-wrap .fluid-list .fluid-col,
    .max-2col-wrap .fluid-list .fluid-col,
    .max-3col-wrap .fluid-list .fluid-col {
        flex-basis: 100%; max-width: 100%;
    }
}





/* info-smartlist - not used */
.info-smartlist {
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.info-smartlist .col {
    flex: 1;
	box-sizing: border-box;
}
.info-smartlist.one-line-label .col {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.info-smartlist .col-label {
    flex-basis: 30%; max-width: 35%;
    color: #A6AAAE;
    padding-right: 5px;
}
.info-smartlist .col-txt {
    flex-basis: 70%; max-width: 65%;
}
/*screen- breakpoint for smallest devices = most cases - phone portrait*/
@media only screen and (max-width: 320px) {
	/*.info-smartlist .col  {flex-basis: 100%; max-width: 100%;}*/
}
/*info-smartlist  sep-lined*/
.info-smartlist.sep-lined .col {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.info-smartlist.sep-lined .col:last-of-type {
    border-bottom: none;
}


/******** simple-list - not used ********/
.label-row-wrap {width: 100%;}

.label-row {
    display: flex;
	flex-direction: row;
}

.label-row .col {
    flex: 1;
	box-sizing: border-box;
}
.label-row .col-label {
    flex-basis: 30%; max-width: 35%;
    color: #A6AAAE;
    padding-right: 5px;
    min-width: 100px;
}
/* sep lined */
.label-row-wrap.sep-lined .label-row {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}


/* dash-between */
.label-row-wrap.dash-between .col {
	flex: none;
}
.label-row-wrap.dash-between .dash {
	border-bottom: 1px dashed rgba(0,0,0,0.1);
	flex: 1;
	transform: translateY(-4px);
}
.label-row-wrap.dash-between .label-row .col-label {
    flex-basis: auto; max-width: none;
    padding-right: 0;
    min-width: 0;
}

/* dash-between one-line */
.label-row-wrap.dash-between .label-row  {
	white-space: nowrap;
}


/* -------> site Layout -------------------------------------------------------------------*/
/*-Flex Box-*/
/*-flexbox parrent styles-*/
.f-box,
.main-nav .list a,
.main-nav .list .force-link,
.popup .popup-header {
  	display: flex;
	width: 100%;
}

.fbox, .vbox, .hbox, .cbox, .endbox {
    display: flex;
}
.hbox {
    flex-direction: row;
}
.vbox {
    flex-direction: column;
    height: 100%;
}
.vbox.h-reset,
.h-reset {
    height:auto;
}

.flex-wrap {
	flex-wrap: wrap;
}
.flex-wrap .box-item:last-child {
  flex-grow: 0;
}

.box-justify {
	justify-content: space-between;
}

.box-justify-end, .endbox {
	justify-content: flex-end;
	}

.box-justify-center {
	justify-content: center;
	}

/**/.box-pack-center, .box-align-center, .vcbox, .vcbox-noncascade {
	align-items: center;
}


.box-orient-horizontal {
	flex-direction: row;
}

.box-orient-vertical {
	flex-direction: column;
}

.box-align-top {
	align-items: flex-start;
}


.box-align-center {
	align-items: center;
}

.box-align-end {
	align-items: flex-end;
}

.self-start {align-self: flex-start;}
.self-center {align-self: center;}
.self-end {align-self: flex-end;}

.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}
.mhor-auto {margin-left: auto; margin-right: auto;}

/*---------flexbox children styles---------------------------*/

.f-box .box-item,
.f-box.box-item,
.cascade-box-item {
	flex: 1 1 auto;
	width: 1px;
	box-sizing: border-box;
}

.vbox .box-item {
	flex: 1 1 auto;
}

.flex-item {
	flex: 1 1 auto;
}

.d-grid {display: grid;}

/******************  CSS Flex Grid  ***********************/
.fxgrid {display: grid;}

.fxgrid-gap-xs {grid-column-gap: 0.8rem;}
.fxgrid-gap-s {grid-column-gap: 1rem;}
.fxgrid-gap-m {grid-column-gap: 1.5rem;}
.fxgrid-gap-l {grid-column-gap: 2rem;}
.fxgrid-gap-xl {grid-column-gap: 3rem;}



.fxgrid-col-left-fluid {
    grid-template-columns: 1fr auto;
}
.fxgrid-col-right-fluid {
    grid-template-columns: auto 1fr;
}


.fxgrid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.fxgrid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.fxgrid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.fxgrid-col-4 {
    grid-template-columns: repeat(4, 1fr);
}
.fxgrid-col-5 {
    grid-template-columns: repeat(5, 1fr);
}
.fxgrid-col-6 {
    grid-template-columns: repeat(6, 1fr);
}
.fxgrid-col-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* -----------------------------------------------------------------------------------------------*/
/* --- Smart Responsive Grid Extension --- */
/* -----------------------------------------------------------------------------------------------*/

/* Base class that triggers the grid behavior */
.fxgrid-responsive {
    display: grid;
    width: 100%;
    /* Default for mobile: all smart grids start as 1 column */
    grid-template-columns: repeat(1, 1fr);
}

/*
   Responsive logic for 2 to 6 columns.
   Using breakpoints from sources: 768px (sm) and 1200px (lg).
*/

/* --- 2 Columns --- */
@media (min-width: 768px) {
    .fxgrid-responsive.gcols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* --- 3 Columns --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .fxgrid-responsive.gcols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .fxgrid-responsive.gcols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- 4 Columns --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .fxgrid-responsive.gcols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .fxgrid-responsive.gcols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- 5 Columns --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .fxgrid-responsive.gcols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .fxgrid-responsive.gcols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* --- 6 Columns --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .fxgrid-responsive.gcols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .fxgrid-responsive.gcols-6 { grid-template-columns: repeat(6, 1fr); }
}

/*
<!-- Example: 3 columns on desktop, 2 on tablet, 1 on mobile with a large gap -->
<div class="fxgrid-responsive gcols-3 gap-20 items-centered ">
    <div class="g-item">1</div>
    <div class="g-item">2</div>
    <div class="g-item">3</div>
    <div class="g-item">4 (aligned automatically)</div>
</div>
*/






/** <-endregion Layout */

/* flex parent will ignore/skip the html tag with this class in order for the flexbox model hierarchy to work properly - flexparent -> "skipped element" -> flex child */
.skip-me,
.skip-this-from-flex {
    display: contents;
}


/**
 * ->site Eelements Layout
 */
/*----------------------------------------------------------------------------*/
/**
 * @region Sizing
 */
/** Percentage based */
.one-quarter {width: 25% !important;}
.one-third {width: 33.3% !important;}
.half-width {width: 50% !important;}
.two-thirds {width: 66.6% !important;}
.three-quarters {width: 75% !important;}
.full-width, .full-w {width: 100% !important;}

.full-height {height: 100% !important;}

/*-------------------------------*/
.portion-10 {width: 10% !important;}
.portion-20 {width: 20% !important;}
.portion-25 {width: 25% !important;}
.portion-30 {width: 30% !important;}
.portion-40 {width: 40% !important;}
.portion-50 {width: 50% !important;}
.portion-60 {width: 60% !important;}
.portion-70 {width: 70% !important;}
.portion-80 {width: 80% !important;}
.portion-90 {width: 90% !important;}
.portion-100 {width: 100% !important;}

/* max sizes */
.max-small {max-width:400px;}
.max-medium {max-width:600px;}
.max-large {max-width:800px;}
.max-xlarge {max-width:1200px;}
.max-xxlarge {max-width:1400px;}


/* min sizes */
.min-small {min-width:400px;}
.min-medium {min-width:600px;}
.min-large {min-width:800px;}
.min-xlarge {min-width:1200px;}
.min-xxlarge {min-width:1400px;}


/** Grid based */
.grid-1 {width: 30px;}
.grid-2 {width: 70px;}
.grid-3 {width: 110px;}
.grid-4 {width: 150px;}
.grid-5 {width: 190px;}
.grid-6 {width: 230px;}
.grid-7 {width: 270px;}
.grid-8 {width: 310px;}
.grid-9 {width: 350px;}
.grid-10 {width: 390px;}
.grid-11 {width: 430px;}
.grid-12 {width: 470px;}
.grid-13 {width: 510px;}
.grid-14 {width: 550px;}
.grid-15 {width: 590px;}
.grid-16 {width: 630px;}
.grid-17 {width: 670px;}
.grid-18 {width: 710px;}
.grid-19 {width: 750px;}
.grid-20 {width: 790px;}
.grid-21 {width: 830px;}
.grid-22 {width: 870px;}
.grid-23 {width: 910px;}
.grid-24 {width: 950px;}

/* min grid system - for min table widths or cell width - very useful in responsive tables */
.min-grid-1 {min-width: 30px;}
.min-grid-2 {min-width: 70px;}
.min-grid-2-1 {min-width: 80px;}
.min-grid-2-2 {min-width: 90px;}
.min-grid-2-3 {min-width: 100px;}
.min-grid-3 {min-width: 110px;}
.min-grid-3-1 {min-width: 120px;}
.min-grid-3-2 {min-width: 130px;}
.min-grid-3-3 {min-width: 140px;}
.min-grid-4 {min-width: 150px;}
.min-grid-4-1 {min-width: 160px;}
.min-grid-4-2 {min-width: 170px;}
.min-grid-5 {min-width: 190px;}
.min-grid-6 {min-width: 230px;}
.min-grid-7 {min-width: 270px;}
.min-grid-8 {min-width: 310px;}
.min-grid-9 {min-width: 350px;}
.min-grid-10 {min-width: 390px;}
.min-grid-11 {min-width: 430px;}
.min-grid-12 {min-width: 470px;}
.min-grid-13 {min-width: 510px;}
.min-grid-14 {min-width: 550px;}
.min-grid-15 {min-width: 590px;}
.min-grid-16 {min-width: 630px;}
.min-grid-17 {min-width: 670px;}
.min-grid-18 {min-width: 710px;}
.min-grid-19 {min-width: 750px;}
.min-grid-20 {min-width: 790px;}
.min-grid-21 {min-width: 830px;}
.min-grid-22 {min-width: 870px;}
.min-grid-23 {min-width: 910px;}
.min-grid-24 {min-width: 950px;}

/* max grid system */
.max-grid-1 {max-width: 30px;}
.max-grid-2 {max-width: 70px;}
.max-grid-2-1 {max-width: 80px;}
.max-grid-2-2 {max-width: 90px;}
.max-grid-2-3 {max-width: 100px;}
.max-grid-3 {max-width: 110px;}
.max-grid-3-1 {max-width: 120px;}
.max-grid-3-2 {max-width: 130px;}
.max-grid-3-3 {max-width: 140px;}
.max-grid-4 {max-width: 150px;}
.max-grid-5 {max-width: 190px;}
.max-grid-6 {max-width: 230px;}
.max-grid-7 {max-width: 270px;}
.max-grid-8 {max-width: 310px;}
.max-grid-9 {max-width: 350px;}
.max-grid-10 {max-width: 390px;}
.max-grid-11 {max-width: 430px;}
.max-grid-12 {max-width: 470px;}
.max-grid-13 {max-width: 510px;}
.max-grid-14 {max-width: 550px;}
.max-grid-15 {max-width: 590px;}
.max-grid-16 {max-width: 630px;}
.max-grid-17 {max-width: 670px;}
.max-grid-18 {max-width: 710px;}
.max-grid-19 {max-width: 750px;}
.max-grid-20 {max-width: 790px;}
.max-grid-21 {max-width: 830px;}
.max-grid-22 {max-width: 870px;}
.max-grid-23 {max-width: 910px;}
.max-grid-24 {max-width: 950px;}

/** Grid based for Flexbox items */
.f-grid-1 {min-width: 30px !important; max-width: 30px !important;}
.f-grid-2 {min-width: 70px !important; max-width: 70px !important;}
.f-grid-3 {min-width: 110px !important; max-width: 110px !important;}
.f-grid-4 {min-width: 150px !important; max-width: 150px !important;}
.f-grid-5 {min-width: 190px !important; max-width: 190px !important;}
.f-grid-6 {min-width: 230px !important; max-width: 230px !important;}
.f-grid-7 {min-width: 270px !important; max-width: 270px !important;}
.f-grid-8 {min-width: 310px !important; max-width: 310px !important;}
.f-grid-9 {min-width: 350px !important; max-width: 350px !important;}
.f-grid-10 {min-width: 390px !important; max-width: 390px !important;}
.f-grid-11 {min-width: 430px !important; max-width: 430px !important;}
.f-grid-12 {min-width: 470px !important; max-width: 470px !important;}
.f-grid-13 {min-width: 510px !important; max-width: 510px !important;}
.f-grid-14 {min-width: 550px !important; max-width: 550px !important;}
.f-grid-15 {min-width: 590px !important; max-width: 590px !important;}
.f-grid-16 {min-width: 630px !important; max-width: 630px !important;}
.f-grid-17 {min-width: 670px !important; max-width: 670px !important;}
.f-grid-18 {min-width: 710px !important; max-width: 710px !important;}
.f-grid-19 {min-width: 750px !important; max-width: 750px !important;}
.f-grid-20 {min-width: 790px !important; max-width: 790px !important;}
.f-grid-21 {min-width: 830px !important; max-width: 830px !important;}
.f-grid-22 {min-width: 870px !important; max-width: 870px !important;}
.f-grid-23 {min-width: 910px !important; max-width: 910px !important;}
.f-grid-24 {min-width: 950px !important; max-width: 950px !important;}

/* min height grid system - for min height fixes like autocomplete list in popups to extend popups */
.min-height-0 {min-height: 0;}
.min-height-02 {min-height: 10;}
.min-height-03 {min-height: 15;}
.min-height-1 {min-height: 30px;}
.min-height-1-2 {min-height: 40px;}
.min-height-2 {min-height: 70px;}
.min-height-3 {min-height: 110px;}
.min-height-4 {min-height: 150px;}
.min-height-5 {min-height: 190px;}
.min-height-6 {min-height: 230px;}
.min-height-7 {min-height: 270px;}
.min-height-8 {min-height: 310px;}
.min-height-9 {min-height: 350px;}
.min-height-10 {min-height: 390px;}
.min-height-11 {min-height: 430px;}
.min-height-12 {min-height: 470px;}
.min-height-13 {min-height: 510px;}
.min-height-14 {min-height: 550px;}
.min-height-15 {min-height: 590px;}
.min-height-16 {min-height: 630px;}
.min-height-17 {min-height: 670px;}
.min-height-18 {min-height: 710px;}
.min-height-19 {min-height: 750px;}
.min-height-20 {min-height: 790px;}
.min-height-21 {min-height: 830px;}
.min-height-22 {min-height: 870px;}
.min-height-23 {min-height: 910px;}
.min-height-24 {min-height: 950px;}


.min-height-vh10 {min-height: 10vh;}
.min-height-vh20 {min-height: 20vh;}
.min-height-vh30 {min-height: 30vh;}
.min-height-vh40 {min-height: 40vh;}
.min-height-vh50 {min-height: 50vh;}
.min-height-vh60 {min-height: 60vh;}
.min-height-vh70 {min-height: 70vh;}
.min-height-vh80 {min-height: 80vh;}
.min-height-vh90 {min-height: 90vh;}



/** @endregion */
/*----------------------------------------------------------------------------*/
/**
 * @region UI Text
 */
/** Text alignment */
.text-left {text-align: left !important;}
.text-right {text-align: right !important;}
.text-center {text-align: center !important;}
.text-justify {	text-align: justify !important;}

/** Vertical alignment */
.valign{vertical-align:middle !important;}

/** Bold */
.text-bold {font-weight: bold !important;}
.no-bold {font-weight: normal !important;}

/** Italic */
.text-italic {font-style: italic !important;}
.no-italic {font-style: normal !important;}

/** Underline */
.text-underline {text-decoration: underline !important;}

.no-underline {text-decoration: none !important;}

/** Text transfrom */
.text-lowercase {text-transform: lowercase !important;}
.text-uppercase {text-transform: uppercase !important;}
.no-transform {text-transform: none !important;}

/** Text differences */
.text-deleted {background: #ffdddd;}
.text-inserted {background: #ddffdd;}
.text-modified {background: #e4f2fd;}



/** Green text */
.text-green,
.text-success,
.text-positive {
	color: #339933 !important;
}

/** Blue text */
.text-blue,
.text-normal {
	color: #5a96d0 !important;
}

/** Orange text */
.text-orange,
.text-warning {color: #ff7901 !important;}

/** Pink text */
.text-pink {color: #db70db !important;}

/** Red text */
.text-red,
.text-error,
.text-negative {color: #f44c4f !important;}

/** Gray text */
.text-gray,
.text-disabled {color: #999999 !important;}

.text-light-gray {color: #bbbbbb !important;}
.text-notifications-unavailable-light-gray {color: #dadada !important;}

/** @endregion */

/*----------------------------------------------------------------------------*/
/**
 * @region UI Border radius
 */
.border-radius-0 {border-radius: 0px;}
.border-radius-2 {border-radius: 2px;}
.border-radius-3 {border-radius: 3px;}
.border-radius-4 {border-radius: 4px;}
.border-radius-5 {border-radius: 5px;}
.border-radius-6 {border-radius: 6px;}
.border-radius-7 {border-radius: 7px;}
.border-radius-8 {border-radius: 8px;}
.border-radius-9 {border-radius: 9px;}
.border-radius-10 {border-radius: 10px;}
.border-radius-11 {border-radius: 11px;}
.border-radius-12 {border-radius: 12px;}
.border-radius-13 {border-radius: 13px;}
.border-radius-14 {border-radius: 14px;}
.border-radius-15 {border-radius: 15px;}
.border-radius-16 {border-radius: 16px;}
.border-radius-17 {border-radius: 17px;}
.border-radius-18 {border-radius: 18px;}
.border-radius-19 {border-radius: 19px;}
.border-radius-20 {border-radius: 20px;}
.border-radius-25 {border-radius: 25px;}
.border-radius-30 {border-radius: 30px;}
.border-radius-40 {border-radius: 40px;}
.border-radius-50 {border-radius: 50px;}
.border-radius-60 {border-radius: 60px;}

 /** @endregion */

/*- element outer spaces -*/
.ml-0 {margin-left:0 !important;}
.ml-2 {margin-left:2px !important;}
.ml-3 {margin-left:3px !important;}
.ml-5, .ml-05 {margin-left:5px !important;}
.ml-10 {margin-left:10px !important;}
.ml-15 {margin-left:15px !important;}
.ml-20 {margin-left:20px !important;}
.ml-25 {margin-left:25px !important;}
.ml-30 {margin-left:30px !important;}
.ml-40 {margin-left:40px !important;}
.ml-50 {margin-left:50px !important;}
.ml-60 {margin-left:60px !important;}

.mr-0 {margin-right:0 !important;}
.mr-2 {margin-right:2px !important;}
.mr-3 {margin-right:3px !important;}
.mr-5, .mr-05 {margin-right:5px !important;}
.mr-10 {margin-right:10px !important;}
.mr-15 {margin-right:15px !important;}
.mr-20 {margin-right:20px !important;}
.mr-25 {margin-right:25px !important;}
.mr-30 {margin-right:30px !important;}
.mr-40 {margin-right:40px !important;}
.mr-50 {margin-right:50px !important;}
.mr-60 {margin-right:60px !important;}

.mt-0 {margin-top:0 !important;}
.mt-02 {margin-top:2px !important;}
.mt-03 {margin-top:3px !important;}
.mt-5, .mt-05 {margin-top:5px !important;}
.mt-10 {margin-top:10px !important;}
.mt-15 {margin-top:15px !important;}
.mt-20 {margin-top:20px !important;}
.mt-25 {margin-top:25px !important;}
.mt-30 {margin-top:30px !important;}
.mt-40 {margin-top:40px !important;}
.mt-50 {margin-top:50px !important;}
.mt-60 {margin-top:60px !important;}
.mt-200 {margin-top:200px !important;}

.mb-0 {margin-bottom:0 !important;}
.mb-5, .mb-05 {margin-bottom:5px !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-15 {margin-bottom:15px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-25 {margin-bottom:25px !important;}
.mb-30 {margin-bottom:30px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-50 {margin-bottom:50px !important;}
.mb-60 {margin-bottom:60px !important;}
.mb-200 {margin-bottom:200px !important;}
.mb-400 {margin-bottom:400px !important;}
.m-0 {margin:0 !important;}
.m-5, .m-05 {margin:5px !important;}
.m-10 {margin:10px !important;}
.m-15 {margin:15px !important;}
.m-20 {margin:20px !important;}
.m-25 {margin:25px !important;}
.m-30 {margin:30px !important;}
.m-40 {margin:40px !important;}
.m-50 {margin:50px !important;}
.m-60 {margin:60px !important;}

/*- element inner spaces -*/
.pl-0 {padding-left:0 !important;}
.pl-5, .pl-05 {padding-left:5px !important;}
.pl-10 {padding-left:10px !important;}
.pl-15 {padding-left:15px !important;}
.pl-20 {padding-left:20px !important;}
.pl-25 {padding-left:25px !important;}
.pl-30 {padding-left:30px !important;}
.pl-40 {padding-left:40px !important;}
.pl-50 {padding-left:50px !important;}
.pl-60 {padding-left:60px !important;}

.pr-0 {padding-right:0 !important;}
.pr-5, .pr-05 {padding-right:5px !important;}
.pr-10 {padding-right:10px !important;}
.pr-15 {padding-right:15px !important;}
.pr-20 {padding-right:20px !important;}
.pr-25 {padding-right:25px !important;}
.pr-30 {padding-right:30px !important;}
.pr-40 {padding-right:40px !important;}
.pr-50 {padding-right:50px !important;}
.pr-60 {padding-right:60px !important;}

.pt-0 {padding-top:0 !important;}
.pt-5, .pt-05 {padding-top:5px !important;}
.pt-10 {padding-top:10px !important;}
.pt-15 {padding-top:15px !important;}
.pt-20 {padding-top:20px !important;}
.pt-25 {padding-top:25px !important;}
.pt-30 {padding-top:30px !important;}
.pt-40 {padding-top:40px !important;}
.pt-50 {padding-top:50px !important;}
.pt-60 {padding-top:60px !important;}

.pb-0 {padding-bottom:0 !important;}
.pb-5, .pb-05 {padding-bottom:5px !important;}
.pb-10 {padding-bottom:10px !important;}
.pb-15 {padding-bottom:15px !important;}
.pb-20 {padding-bottom:20px !important;}
.pb-25 {padding-bottom:25px !important;}
.pb-30 {padding-bottom:30px !important;}
.pb-40 {padding-bottom:40px !important;}
.pb-50 {padding-bottom:50px !important;}
.pb-60 {padding-bottom:60px !important;}

.p-0 {padding:0 !important;}
.p-2, .p-02 {padding:2px !important;}
.p-5, .p-05 {padding:5px !important;}
.p-10 {padding:10px !important;}
.p-15 {padding:15px !important;}
.p-20 {padding:20px !important;}
.p-25 {padding:25px !important;}
.p-30 {padding:30px !important;}
.p-40 {padding:40px !important;}
.p-50 {padding:50px !important;}
.p-60 {padding:60px !important;}

/*gaps - used in css grid or css flexbox */
.gap-zero { gap: 0;}
.gap-05 { gap: 5px;}
.gap-10 { gap: 10px;}
.gap-15 { gap: 15px;}
.gap-20 { gap: 20px;}
.gap-25 { gap: 25px;}
.gap-30 { gap: 30px;}
.gap-35 { gap: 35px;}
.gap-40 { gap: 40px;}
.gap-45 { gap: 45px;}
.gap-50 { gap: 50px;}
.gap-55 { gap: 55px;}
.gap-60 { gap: 60px;}

.gap-pan {gap: var(--pan-padding-hor);}

/*flexbox row dynamic gap*/
.frow-dynamic.gap-05 {--grid-gap:5px !important;}
.frow-dynamic.gap-10 {--grid-gap:10px !important;}
.frow-dynamic.gap-15 {--grid-gap:15px !important;}
.frow-dynamic.gap-20 {--grid-gap:20px !important;}
.frow-dynamic.gap-25 {--grid-gap:25px !important;}
.frow-dynamic.gap-30 {--grid-gap:30px !important;}
.frow-dynamic.gap-35 {--grid-gap:35px !important;}
.frow-dynamic.gap-40 {--grid-gap:40px !important;}
.frow-dynamic.gap-45 {--grid-gap:45px !important;}
.frow-dynamic.gap-50 {--grid-gap:50px !important;}
.frow-dynamic.gap-55 {--grid-gap:55px !important;}
.frow-dynamic.gap-60 {--grid-gap:60px !important;}


/*fit-content*/
.h-fit-content {width: fit-content;}


/*----------------------------------------------------------------------------*/

/** <-endregion Elements Layout */



/*- Media Queries -*/
@media only screen and (max-width: 1170px)
{

	.list.col-4 li.col-unit {
		float: left;
		width: 50%;
	}
	.list.col-4 li.col-unit:nth-of-type(4n+1) {clear: none;}
	.list.col-4 li.col-unit:nth-of-type(2n+1) {clear: left;}

		/*cascade in cascade-large screen*/
	/***/
	.f-box.cascade-phone.cascade-large {
		flex-direction: column;
	}

	.f-box.cascade-phone.cascade-large .cascade-box-item {
		width: auto !important;
		max-width:none !important;
		margin:1rem 0 !important;
	}

	/**/
	.cascade-large .booking-panel {
		width: 100%;
		padding-left: 0;
		border: none;
	}

}


@media only screen and (max-width: 992px)
{
    	/*cascade in cascade-medium screen*/
	/***/
	.f-box.cascade-phone.cascade-medium {
		flex-direction: column;
		gap: 1rem;
	}
	.f-box.cascade-phone.cascade-medium.vcbox-noncascade {
		align-items: normal;
	}

	.f-box.cascade-phone.cascade-medium .cascade-box-item {
		width: auto !important;
		max-width:none !important;
		/* margin:1rem 0 !important; */
	}

}


@media only screen and (max-width: 767px)
{


}

@media only screen and (max-width: 480px)
{
	.portion-50.responsive {
		width: 100% !important;
		float:none !important;
	}
	/**/
	.list.col-4 li.col-unit {
		float: none;
		width: 100%;
	}

	/*cascade-phone*/
	/***/
	.f-box.cascade-phone {
		flex-direction: column;
		gap: 1rem;
	}
	.f-box.cascade-phone.vcbox-noncascade {
		align-items: normal;
	}

	.f-box.cascade-phone .cascade-box-item {
		width: auto !important;
		max-width:none !important;
		/* margin:1rem 0 !important; */
	}

}









/* FLEXBOX grid system SMT - based on 20 cols/steps - supports only new flexbox syntax*/
.frow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.fcol {
	flex: 1;
	box-sizing: border-box;
}

.frow-start {justify-content: flex-start;}
.frow-center {justify-content: center;}
.frow-end {justify-content: flex-end;}
.frow-top {align-items: flex-start;}
.frow-middle {align-items: center;}
.frow-bottom {align-items: flex-end;}
.frow-around {justify-content: space-around;}
.frow-between {justify-content: space-between;}
.fcol-first {order: -1;}
.fcol-last {order: 1;}

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

/*screen- breakpoint for smallest devices = most cases - phone portrait*/
@media only screen and (max-width: 320px) {
	.frow-auto .fcol {flex-basis: 100%;}
}


/*extreme xs = "xxs" - this disable single line rearrangement for smallest devices when "frow-auto" set single line on small devices */
@media (min-width: 1px) {
	.xxs-c1		{flex: 0 0 8.333333%; max-width: 8.333333%;}
	.xxs-c2		{flex: 0 0 16.666667%; max-width: 16.666667%;}
	.xxs-c3		{flex: 0 0 25%; max-width: 25%;}
	.xxs-c4		{flex: 0 0 33.333333%; max-width: 33.333333%;}
	.xxs-c5		{flex: 0 0 41.666667%; max-width: 41.666667%;}
	.xxs-c6		{flex: 0 0 50%; max-width: 50%;}
	.xxs-c7		{flex: 0 0 58.333333%; max-width: 58.333333%;}
	.xxs-c8		{flex: 0 0 66.666667%; max-width: 66.666667%;}
	.xxs-c9		{flex: 0 0 75%; max-width: 75%;}
	.xxs-c10	{flex: 0 0 83.333333%; max-width: 83.333333%;}
	.xxs-c11	{flex: 0 0 91.666667%; max-width: 91.666667%;}
	.xxs-c12	{flex: 0 0 100%; max-width: 100%;}
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .xs-c1	{flex: 0 0 8.333333%; max-width: 8.333333%;}
	.xs-c2	{flex: 0 0 16.666667%; max-width: 16.666667%;}
	.xs-c3	{flex: 0 0 25%; max-width: 25%;}
	.xs-c4	{flex: 0 0 33.333333%; max-width: 33.333333%;}
	.xs-c5	{flex: 0 0 41.666667%; max-width: 41.666667%;}
	.xs-c6	{flex: 0 0 50%; max-width: 50%;}
	.xs-c7	{flex: 0 0 58.333333%; max-width: 58.333333%;}
	.xs-c8	{flex: 0 0 66.666667%; max-width: 66.666667%;}
	.xs-c9	{flex: 0 0 75%; max-width: 75%;}
	.xs-c10	{flex: 0 0 83.333333%; max-width: 83.333333%;}
	.xs-c11	{flex: 0 0 91.666667%; max-width: 91.666667%;}
	.xs-c12	{flex: 0 0 100%; max-width: 100%;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .sm-c1	{flex: 0 0 8.333333%; max-width: 8.333333%;}
	.sm-c1-5	{flex: 0 0 12.499996%; max-width: 12.499996%;}
	.sm-c2	{flex: 0 0 16.666667%; max-width: 16.666667%;}
	.sm-c2-5	{flex: 0 0 20.79999%; max-width: 20.79999%;}
	.sm-c3	{flex: 0 0 25%; max-width: 25%;}
	.sm-c3-5	{flex: 0 0 29.166667%; max-width: 29.166667%;}
	.sm-c4	{flex: 0 0 33.333333%; max-width: 33.333333%;}
	.sm-c4-5	{flex: 0 0 37.466666%; max-width: 37.466666%;}
	.sm-c5	{flex: 0 0 41.666667%; max-width: 41.666667%;}
	.sm-c6	{flex: 0 0 50%; max-width: 50%;}
	.sm-c7	{flex: 0 0 58.333333%; max-width: 58.333333%;}
	.sm-c8	{flex: 0 0 66.666667%; max-width: 66.666667%;}
	.sm-c9	{flex: 0 0 75%; max-width: 75%;}
	.sm-c10	{flex: 0 0 83.333333%; max-width: 83.333333%;}
	.sm-c11	{flex: 0 0 91.666667%; max-width: 91.666667%;}
	.sm-c12	{flex: 0 0 100%; max-width: 100%;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .mid-c1	{flex: 0 0 8.333333%; max-width: 8.333333%;}
	.mid-c1-5	{flex: 0 0 12.499996%; max-width: 12.499996%;}
	.mid-c2	{flex: 0 0 16.666667%; max-width: 16.666667%;}
	.mid-c2-5	{flex: 0 0 20.79999%; max-width: 20.79999%;}
	.mid-c3	{flex: 0 0 25%; max-width: 25%;}
	.mid-c3-5	{flex: 0 0 29.166667%; max-width: 29.166667%;}
	.mid-c4	{flex: 0 0 33.333333%; max-width: 33.333333%;}
	.mid-c4-5	{flex: 0 0 37.466666%; max-width: 37.466666%;}
	.mid-c5	{flex: 0 0 41.666667%; max-width: 41.666667%;}
	.mid-c6	{flex: 0 0 50%; max-width: 50%;}
	.mid-c7	{flex: 0 0 58.333333%; max-width: 58.333333%;}
	.mid-c8	{flex: 0 0 66.666667%; max-width: 66.666667%;}
	.mid-c9	{flex: 0 0 75%; max-width: 75%;}
	.mid-c10	{flex: 0 0 83.333333%; max-width: 83.333333%;}
	.mid-c11	{flex: 0 0 91.666667%; max-width: 91.666667%;}
	.mid-c12	{flex: 0 0 100%; max-width: 100%;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .lg-c1	{flex: 0 0 8.333333%; max-width: 8.333333%;}
	.lg-c1-5	{flex: 0 0 12.499996%; max-width: 12.499996%;}
	.lg-c2	{flex: 0 0 16.666667%; max-width: 16.666667%;}
	.lg-c2-5	{flex: 0 0 20.79999%; max-width: 20.79999%;}
	.lg-c3	{flex: 0 0 25%; max-width: 25%;}
	.lg-c3-5	{flex: 0 0 29.166667%; max-width: 29.166667%;}
	.lg-c4	 {flex: 0 0 33.333333%; max-width: 33.333333%;}
	.lg-c4-5	{flex: 0 0 37.466666%; max-width: 37.466666%;}
	.lg-c5	{flex: 0 0 41.666667%; max-width: 41.666667%;}
	.lg-c6	{flex: 0 0 50%; max-width: 50%;}
	.lg-c7	{flex: 0 0 58.333333%; max-width: 58.333333%;}
	.lg-c7-5	{flex: 0 0 62.499999%; max-width: 62.499999%;}
	.lg-c8	{flex: 0 0 66.666667%; max-width: 66.666667%;}
	.lg-c9	{flex: 0 0 75%; max-width: 75%;}
	.lg-c10	{flex: 0 0 83.333333%; max-width: 83.333333%;}
	.lg-c11	{flex: 0 0 91.666667%; max-width: 91.666667%;}
	.lg-c12	{flex: 0 0 100%; max-width: 100%;}

}




/* -----------------------------------------------------------------------------------------------*/
/* --- frow-dynamic - Smart Dynamic Flex Grid (Centered Orphans) --- */
/* -----------------------------------------------------------------------------------------------*/

/*
   Main container:
   - justify-content: center ensures that items on the last row
     that don't fill the entire width are centered.
*/
.frow.frow-dynamic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	--grid-gap: 20px; /* Default gap */
    gap: var(--grid-gap);
}

/*
   Base item logic:
   - flex-grow: 0 is key. It stops items on the last row from
     stretching to full width [4].
   - flex-shrink: 0 ensures items don't collapse below their basis.
*/
.frow.frow-dynamic > .fcol {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%; /* Default for mobile */
    max-width: 100%;
    box-sizing: border-box;
}

/*
   COLUMN OPTIONS (Desktop - 1200px+)
   Calculations take the gap into account to ensure
   perfect alignment across the rows.
*/
@media (min-width: 1200px) {
    /* 2 Columns: 100% / 2 */
    .frow-dynamic.frow-cols-2 > .fcol {
        flex-basis: calc(50% - (var(--grid-gap) * 1 / 2));
    }
    /* 3 Columns: 100% / 3 */
    .frow-dynamic.frow-cols-3 > .fcol {
        flex-basis: calc(33.333% - (var(--grid-gap) * 2 / 3));
    }
    /* 4 Columns: 100% / 4 */
    .frow-dynamic.frow-cols-4 > .fcol {
        flex-basis: calc(25% - (var(--grid-gap) * 3 / 4));
    }
    /* 5 Columns: 100% / 5 */
    .frow-dynamic.frow-cols-5 > .fcol {
        flex-basis: calc(20% - (var(--grid-gap) * 4 / 5));
    }
}

/*
   TABLET VIEW (768px - 1199px)
   Reduces column count for better readability.
*/
@media (min-width: 768px) and (max-width: 1199px) {
    /* 2, 3 and 4 cols drop to 2 cols on tablet */
    .frow-dynamic.frow-cols-2 > .fcol,
    .frow-dynamic.frow-cols-3 > .fcol,
    .frow-dynamic.frow-cols-4 > .fcol {
        flex-basis: calc(50% - (var(--grid-gap) / 2));
    }
    /* 5 cols drop to 3 cols on tablet */
    .frow-dynamic.frow-cols-5 > .fcol {
        flex-basis: calc(33.333% - (var(--grid-gap) * 2 / 3));
    }
}

/*
   MOBILE VIEW (Under 768px)
   Items revert to 100% width (1 column).
*/
@media (max-width: 767px) {
    .frow-dynamic > .fcol {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/*
<div class="frow frow-dynamic frow-cols-4 gap-20">
    <div class="fcol">1</div>
    <div class="fcol">2</div>
    <div class="fcol">3</div>
    <div class="fcol">4</div>
    <div class="fcol">5 (Centered & Correct Size)</div>
</div>
*/
/*----------------------------------------------------------------------------*/








/* Hide Elements Under Sizes - inverted logic than BTS steps from small to large */

/* Max Extra Small devices (landscape phones, 576px and down) */
@media (max-width: 320px) {
	.hide-under-xxs {display: none !important;}
 }

/* Max Small devices (landscape phones, 576px and down) */
@media (max-width: 576px) {
	.hide-under-xs {display: none !important;}
 }

/* Max Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {
	.hide-under-sm {display: none !important;}



	.sm-order-0 {order:0;}
	.sm-order-1 {order:1;}
	.sm-order-2 {order:2;}
	.sm-order-3 {order:3;}
	.sm-order-4 {order:4;}
	.sm-order-5 {order:5;}
	.sm-order-50 {order:50;}

	.sm-m-0 {margin: 0 !important;}
	.sm-ml-0 {margin-left: 0 !important;}
	.sm-mr-0 {margin-right: 0 !important;}

	.sm-p-0 {padding: 0 !important;}
	.sm-pl-0 {padding-left: 0 !important;}
	.sm-pr-0 {padding-right: 0 !important;}

	/*gaps - used in css grid or css flexbox - only for small screens*/
	.sm-gap-zero {gap: 0;}
	.sm-gap-05 {gap: 5px;}
	.sm-gap-10 {gap: 10px;}
	.sm-gap-15 {gap: 15px;}
	.sm-gap-20 {gap: 20px;}
	.sm-gap-25 {gap: 25px;}
	.sm-gap-30 {gap: 30px;}
	.sm-gap-35 {gap: 35px;}
	.sm-gap-40 {gap: 40px;}
	.sm-gap-45 {gap: 45px;}
	.sm-gap-50 {gap: 50px;}
	.sm-gap-55 {gap: 55px;}
	.sm-gap-60 {gap: 60px;}
 }

/* Max Large devices (desktops, 992px and down) */
@media (max-width: 992px) {
	.hide-under-mid {display: none !important;}

	.mid-order-0 {order:0;}
	.mid-order-1 {order:1;}
	.mid-order-2 {order:2;}
	.mid-order-3 {order:3;}
	.mid-order-4 {order:4;}
	.mid-order-5 {order:5;}
	.mid-order-50 {order:50;}

	.mid-m-0 {margin: 0 !important;}
	.mid-ml-0 {margin-left: 0 !important;}
	.mid-mr-0 {margin-right: 0 !important;}

	.mid-p-0 {padding: 0 !important;}
	.mid-pl-0 {padding-left: 0 !important;}
	.mid-pr-0 {padding-right: 0 !important;}
 }

/* Max Extra large devices (large desktops, 1200px and down) */
@media (max-width: 1200px) {
	.hide-under-lg {display: none !important;}



	.lg-order-0 {order:0;}
	.lg-order-1 {order:1;}
	.lg-order-2 {order:2;}
	.lg-order-3 {order:3;}
	.lg-order-4 {order:4;}
	.lg-order-5 {order:5;}
	.lg-order-50 {order:50;}

	.lg-m-0 {margin: 0 !important;}
	.lg-ml-0 {margin-left: 0 !important;}
	.lg-mr-0 {margin-right: 0 !important;}

	.lg-p-0 {padding: 0 !important;}
	.lg-pl-0 {padding-left: 0 !important;}
	.lg-pr-0 {padding-right: 0 !important;}
 }

 /* Max Extra Small devices (landscape phones, 576px and down) */
 @media (min-width: 320px) {
 	.show-under-xxs {display: none !important;}
  }

 /* Max Small devices (landscape phones, 576px and down) */
 @media (min-width: 576px) {
 	.show-under-xs {display: none !important;}
  }

 /* Max Medium devices (tablets, 768px and down) */
 @media (min-width: 768px) {
 	.show-under-sm {display: none !important;}
  }

 /* Max Large devices (desktops, 992px and down) */
 @media (min-width: 992px) {
 	.show-under-mid {display: none !important;}
  }

 /* Max Extra large devices (large desktops, 1200px and down) */
 @media (min-width: 1200px) {
 	.show-under-lg {display: none !important;}
  }




/* BTS overwrite column space */

/* compact-view */
.compact-view .row {
	margin-right: -10px;
    margin-left: -10px;
}
.compact-view [class^="col-"], .compact-view  [class*=" col-"] {
	padding-right: 10px;
    padding-left: 10px;
}
/* compact-view-sm */
.compact-view-sm .row {
	margin-right: -8px;
    margin-left: -8px;
}
.compact-view-sm [class^="col-"], .compact-view-sn  [class*=" col-"] {
	padding-right: 8px;
    padding-left: 8px;
}


/*  Bootstrap Clearfix - only for bootstrap */

/*  Medium devices - Tablet  */
@media (min-width:767px){

	/* Column clear fix */
	.col-lg-1:nth-child(12n+1),
	.col-lg-2:nth-child(6n+1),
	.col-lg-3:nth-child(4n+1),
	.col-lg-4:nth-child(3n+1),
	.col-lg-6:nth-child(2n+1),
	.col-md-1:nth-child(12n+1),
	.col-md-2:nth-child(6n+1),
	.col-md-3:nth-child(4n+1),
	.col-md-4:nth-child(3n+1),
	.col-md-6:nth-child(2n+1){
	clear: none;
	}
	.col-sm-1:nth-child(12n+1),
	.col-sm-2:nth-child(6n+1),
	.col-sm-3:nth-child(4n+1),
	.col-sm-4:nth-child(3n+1),
	.col-sm-6:nth-child(2n+1){
	clear: left;
	}
}


/*  Large Desktop  */
@media (min-width:992px){

  /* Column clear fix */
  .col-lg-1:nth-child(12n+1),
  .col-lg-2:nth-child(6n+1),
  .col-lg-3:nth-child(4n+1),
  .col-lg-4:nth-child(3n+1),
  .col-lg-6:nth-child(2n+1),
  .col-sm-1:nth-child(12n+1),
  .col-sm-2:nth-child(6n+1),
  .col-sm-3:nth-child(4n+1),
  .col-sm-4:nth-child(3n+1),
  .col-sm-6:nth-child(2n+1){
    clear: none;
  }
  .col-md-1:nth-child(12n+1),
  .col-md-2:nth-child(6n+1),
  .col-md-3:nth-child(4n+1),
  .col-md-4:nth-child(3n+1),
  .col-md-6:nth-child(2n+1){
    clear: left;
  }
}


/*  Large Desktop  */
@media (min-width:1200px){

  /* Column clear fix */
  .col-md-1:nth-child(12n+1),
  .col-md-2:nth-child(6n+1),
  .col-md-3:nth-child(4n+1),
  .col-md-4:nth-child(3n+1),
  .col-md-6:nth-child(2n+1),
  .col-sm-1:nth-child(12n+1),
  .col-sm-2:nth-child(6n+1),
  .col-sm-3:nth-child(4n+1),
  .col-sm-4:nth-child(3n+1),
  .col-sm-6:nth-child(2n+1){
    clear: none;
  }
  .col-lg-1:nth-child(12n+1),
  .col-lg-2:nth-child(6n+1),
  .col-lg-3:nth-child(4n+1),
  .col-lg-4:nth-child(3n+1),
  .col-lg-6:nth-child(2n+1){
    clear: left;
  }

}

/* MiniDIS schematic settings route */
.mini-dis-schematic-layout {
  position: relative;
  display: block;
  min-height: 0;
  color: var(--scheme-txt, #445e75);
  --md-accent: #1f88ca;
  --md-accent-line: #2f9ad8;
  --md-accent-soft: rgba(31, 136, 202, 0.24);
  --md-accent-soft-2: rgba(31, 136, 202, 0.35);
  --md-accent-soft-3: rgba(47, 154, 216, 0.45);
  --md-panel-bg: rgba(255, 255, 255, 0.88);
  --md-panel-bg-soft: rgba(248, 252, 255, 0.95);
  --md-panel-border: rgba(31, 136, 202, 0.24);
  --md-card-bg: #fff;
  --md-card-bg-grad: linear-gradient(180deg, #fff 0%, #edf8ff 100%);
  --md-btn-bg: linear-gradient(180deg, #f6fcff 0%, #e5f4ff 100%);
  --md-btn-bg-hover: linear-gradient(180deg, #eef8ff 0%, #d9eeff 100%);
  --md-btn-text: #1f6ea3;
  --md-text-accent: #1f88ca;
  --md-text-muted: #5a6d7e;
  --md-text-soft: #7b8792;
  --md-empty-bg: rgba(241, 249, 255, 0.55);
  --md-chip-bg: #fff;
  --md-chip-border: rgba(31, 136, 202, 0.28);
  --md-danger-bg: linear-gradient(180deg, #fff 0%, #fdeeee 100%);
  --md-danger-bg-hover: #fce4e4;
  --md-danger-border: rgba(196, 58, 58, 0.35);
  --md-danger-text: #c43a3a;
}
html.theme-dark .mini-dis-schematic-layout,
html:has(body.theme-dark) .mini-dis-schematic-layout {
  /* Align with mini-multisys schematic settings (slate panels + cyan accents) */
  --md-accent: var(--accent-title-txt);
  --md-accent-line: var(--sch-route-stroke);
  --md-accent-soft: rgba(127, 170, 211, 0.28);
  --md-accent-soft-2: rgba(127, 170, 211, 0.4);
  --md-accent-soft-3: rgba(127, 170, 211, 0.55);
  --md-panel-bg: #3a4454;
  --md-panel-bg-soft: rgba(58, 68, 84, 0.88);
  --md-panel-border: rgba(127, 170, 211, 0.28);
  --md-card-bg: #424c59;
  --md-card-bg-grad: linear-gradient(180deg, #4a5563 0%, #3a4654 100%);
  --md-btn-bg: linear-gradient(180deg, #455361 0%, #384553 100%);
  --md-btn-bg-hover: linear-gradient(180deg, #516274 0%, #425061 100%);
  --md-btn-text: var(--accent-title-txt);
  --md-text-accent: var(--accent-title-txt);
  --md-text-muted: var(--pan-meta-txt);
  --md-text-soft: var(--text-color-soft2);
  --md-empty-bg: rgba(35, 42, 51, 0.72);
  --md-chip-bg: #3a4654;
  --md-chip-border: rgba(127, 170, 211, 0.35);
  --md-danger-bg: linear-gradient(180deg, #4a3a3a 0%, #3d2f2f 100%);
  --md-danger-bg-hover: #564040;
  --md-danger-border: rgba(228, 124, 124, 0.45);
  --md-danger-text: #e47c7c;
  color: var(--scheme-txt);
}
.mini-dis-schematic-canvas {
  height: auto;
  padding: 0.25rem 0.15rem 0.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: visible;
}
.mini-dis-topology-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mini-dis-groups-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.mini-dis-group-cluster {
  min-width: 0;
}
.mini-dis-cluster-downlink {
  position: relative;
  height: 16px;
}
.mini-dis-cluster-downlink::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: var(--md-accent-line);
}
.mini-dis-cluster-downlink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--md-accent-line);
}
.mini-dis-cluster-disouts {
  display: grid;
  gap: 6px;
  align-content: start;
}
.mini-dis-extra-disouts-chip {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--md-text-accent);
  border: 1px dashed var(--md-accent-soft-3);
  background: var(--md-panel-bg);
  border-radius: 12px;
  padding: 4px 6px;
}
.mini-dis-empty-disout {
  min-height: 42px;
  border: 1px dashed var(--md-accent-soft);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-text-soft);
  font-size: 10px;
}
.mini-dis-group-card {
  position: relative;
  background: var(--md-card-bg);
  border: 1px solid var(--md-panel-border);
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(70, 58, 70, 0.18);
  min-height: 64px;
  padding: 7px 5px 5px;
  cursor: pointer;
  text-align: center;
}
.mini-dis-group-title {
  color: var(--md-text-soft);
  font-size: 11px;
  margin-bottom: 2px;
}
.mini-dis-group-name {
  color: var(--md-text-accent);
  font-size: 10px;
  font-weight: 700;
}
.mini-dis-group-strip {
  height: 9px;
  background: linear-gradient(90deg, #4b87cb, #66b6ef);
  border-radius: 2px;
  margin-top: 5px;
}
.mini-dis-disout-col {
  position: relative;
}
.mini-dis-disout-col > .mini-dis-link--up {
  display: none;
}
.mini-dis-link {
  position: relative;
}
.mini-dis-link--up {
  height: 20px;
}
.mini-dis-link--up::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  width: 2px;
  height: 15px;
  background: var(--md-accent-line);
}
.mini-dis-link--up::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--md-accent-line);
}
.mini-dis-link--down {
  height: 12px;
  position: relative;
}
.mini-dis-link--down::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: var(--md-accent-line);
}
.mini-dis-link--down::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--md-accent-line);
}
.mini-dis-disout-card {
  border: 1px solid var(--md-accent-soft-3);
  border-radius: 8px;
  padding: 6px;
  background: var(--md-panel-bg-soft);
}
.mini-dis-disout-title {
  text-align: center;
  color: var(--md-text-accent);
  font-weight: 700;
  font-size: 10px;
  margin-bottom: 2px;
}
.mini-dis-disout-slot {
  margin-bottom: 3px;
  min-height: 64px;
}
.mini-dis-disout-slot:last-child {
  margin-bottom: 0;
}
.mini-dis-disout-slot--fixed {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-dis-fixed-flow-chip {
  background: var(--md-chip-bg);
  border: 1px dashed var(--md-accent-soft-3);
  color: var(--md-btn-text);
  border-radius: 16px;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
}
.mini-dis-hit-area {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}
.mini-dis-hit-area:hover {
  border-color: var(--md-accent-soft-3);
}
.mini-dis-rf-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.mini-dis-rf-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-dis-link--side {
  width: 28px;
  margin-top: 0;
  height: 2px;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--md-accent-line) 0 6px, transparent 6px 11px);
}
.mini-dis-link--side::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--md-accent-line);
}
.mini-dis-rf-side {
  flex: 0 0 130px;
  align-self: center;
  margin-top: 34px;
}
.mini-dis-rf-card {
  width: 118px;
  min-height: 88px;
  border: 1px solid var(--md-accent-soft-3);
  border-radius: 12px;
  background: var(--md-card-bg-grad);
  color: var(--md-text-accent);
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--md-accent-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mini-dis-rf-dot {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 10px;
  height: 10px;
  background: #22aa47;
  border-radius: 50%;
}
.mini-dis-rf-name {
  font-size: 17px;
  font-weight: 700;
  margin-top: 8px;
}
.mini-dis-rf-caption {
  font-size: 10px;
  margin-top: 2px;
  color: var(--md-text-soft);
}
.mini-dis-settings-panel {
  margin-top: 12px;
  border: 1px solid var(--md-panel-border);
  border-radius: 10px;
  background: var(--md-card-bg);
  padding: 10px 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 96px;
}
.mini-dis-settings-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  flex: 0 0 240px;
}
.mini-dis-settings-header .ficon {
  color: var(--md-text-accent);
}
.mini-dis-settings-header h3 {
  margin: 0;
  font-size: 18px;
}
.mini-dis-settings-subtitle {
  margin-bottom: 6px;
  color: var(--md-text-muted);
  font-weight: 700;
  font-size: 13px;
}
.mini-dis-settings-body {
  flex: 1 1 auto;
  min-width: 0;
}
.mini-dis-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.mini-dis-settings-list li {
  padding: 8px 10px;
  margin-bottom: 0;
  border-radius: 6px;
  background: #f5f9fd;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 12px;
}
.mini-dis-settings-note {
  margin-top: 6px;
  color: #6f7b86;
  font-size: 11px;
}

@media (max-width: 1300px) {
  .mini-dis-schematic-layout {
    min-height: 0;
  }
  .mini-dis-groups-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mini-dis-rf-side {
    flex-basis: 106px;
  }
  .mini-dis-rf-card {
    width: 102px;
    min-height: 74px;
  }
  .mini-dis-settings-panel {
    display: block;
    min-height: 0;
  }
  .mini-dis-settings-header {
    margin-bottom: 6px;
    flex: 0 0 auto;
  }
  .mini-dis-settings-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .mini-dis-topology-wrap {
    flex-direction: column;
  }
  .mini-dis-rf-side {
    align-self: flex-end;
    flex-basis: auto;
  }
  .mini-dis-groups-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mini-dis-cluster-disouts {
    gap: 5px;
  }
}

/* MiniDIS schematic v2 */
.mini-dis-v2-mobile {
  display: none;
}
.mini-dis-v2-rf-top-wrap {
  position: relative;
  text-align: center;
  padding-bottom: 0.45rem;
}
.mini-dis-v2-rf-top-wrap::before,
.mini-dis-v2-rf-top-wrap::after {
  display: none;
}
.mini-dis-v2-rf-top {
  margin: 0 auto;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  cursor: default;
  position: relative;
  z-index: 1;
}
.mini-dis-v2-rf-waves {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.55rem auto 0.45rem;
  color: var(--md-accent-line);
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.mini-dis-v2-rf-waves .ficon-wifi-signal {
  font-size: 1.25rem;
  line-height: 1;
}
.mini-dis-v2-rf-bus {
  height: 2px;
  margin-top: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--md-accent-soft) 0%,
    var(--md-accent-line) 50%,
    var(--md-accent-soft) 100%
  );
  position: relative;
}
.mini-dis-v2-rf-bus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.34rem;
  height: 0.34rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--md-accent-line);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-schematic-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
}
.mini-dis-v2-groups-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.35rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  padding-bottom: 0.2rem;
}
.mini-dis-v2-empty-state {
  margin-top: 0.85rem;
  padding: 1.4rem 1rem;
  border: 1px dashed var(--md-accent-soft-2);
  border-radius: 0.65rem;
  background: var(--md-panel-bg-soft);
  text-align: center;
}
.mini-dis-v2-empty-state-title {
  color: var(--md-text-accent);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.mini-dis-v2-empty-state-hint {
  color: var(--md-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}
.mini-dis-v2-group-cluster {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--md-panel-border);
  border-radius: 0.65rem;
  background: var(--md-panel-bg);
  box-sizing: border-box;
  overflow: visible;
}
.mini-dis-v2-group-cluster:not(.is-add):not(.is-empty),
.mini-dis-v2-group-cluster.is-no-group {
  flex: 0 1 auto;
}
.mini-dis-v2-group-cluster.is-no-group {
  border-style: dashed;
  background: var(--md-panel-bg-soft);
}
.mini-dis-v2-group-cluster.is-empty:not(.is-no-group) {
  border-style: dashed;
  flex: 0 0 8.75rem;
  min-width: 8.75rem;
  max-width: 9.5rem;
}
.mini-dis-v2-group-cluster.is-no-group.is-empty {
  border-style: dashed;
}
.mini-dis-v2-group-cluster.is-selected {
  border-color: var(--md-accent-soft-3);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-v2-group-cluster.has-selected-disout {
  border-color: var(--md-accent-soft-2);
}
.mini-dis-v2-group-cluster.is-add {
  border: none;
  background: transparent;
  justify-content: flex-start;
  align-self: stretch;
  flex: 0 0 5.75rem;
  min-width: 5.75rem;
  max-width: 5.75rem;
  overflow: visible;
}
.mini-dis-v2-group-cluster-head {
  padding: 0.4rem 0.45rem 0.2rem;
  flex: 0 0 auto;
  display: grid;
  gap: 0.25rem;
}
.mini-dis-v2-group-cluster-body {
  padding: 0 0.45rem 0.35rem;
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}
.mini-dis-v2-group-cluster.is-drop-target,
.mini-dis-v2-group-cluster-body.is-drop-target {
  background: var(--md-accent-soft);
}
.mini-dis-v2-group-cluster.is-drop-target {
  border-color: var(--md-accent-soft-3);
  box-shadow: inset 0 0 0 2px var(--md-accent-soft-2);
}
.mini-dis-v2-disout-link.is-dragging {
  opacity: 0.45;
}
body.mini-dis-v2-pointer-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}
body.mini-dis-v2-pointer-dragging * {
  cursor: grabbing !important;
}
.mini-dis-v2-drag-ghost {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--md-accent-soft-3, rgba(31, 136, 202, 0.65));
  border-radius: 0.4rem;
  background: var(--md-card-bg, rgba(255, 255, 255, 0.96));
  color: var(--md-btn-text, #1f6ea3);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.mini-dis-v2-disout-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: 0;
}
.mini-dis-v2-disout-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.55rem;
  width: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.2rem;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid var(--md-chip-border);
  border-radius: 0.4rem;
  background: var(--md-btn-bg);
  color: var(--md-text-accent);
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px var(--md-accent-soft);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mini-dis-v2-disout-drag-handle.is-card-source {
  position: absolute;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}
.mini-dis-v2-disout-link.is-editable {
  position: relative;
  cursor: grab;
}
.mini-dis-v2-disout-link.is-editable:active {
  cursor: grabbing;
}
.mini-dis-v2-disout-drag-handle:hover {
  border-color: var(--md-accent-soft-3);
  background: var(--md-btn-bg-hover);
  box-shadow: 0 0 0 2px var(--md-accent-soft), 0 2px 4px var(--md-accent-soft);
}
.mini-dis-v2-disout-drag-handle:active {
  cursor: grabbing;
  transform: translateY(1px);
  background: var(--md-panel-bg-soft);
  box-shadow: inset 0 1px 2px var(--md-accent-soft);
}
.mini-dis-v2-disout-link.is-dragging .mini-dis-v2-disout-drag-handle {
  border-color: var(--md-accent-soft-3);
  background: var(--md-panel-bg-soft);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-v2-disout-drag-handle .ficon {
  font-size: 0.72rem;
  line-height: 1;
}
.mini-dis-v2-disout-delete {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  min-width: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.2rem;
  padding: 0.2rem;
  border: 1px solid var(--md-danger-border);
  border-radius: 0.4rem;
  background: var(--md-danger-bg);
  color: var(--md-danger-text);
  cursor: pointer;
  box-shadow: 0 1px 2px var(--md-danger-border);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mini-dis-v2-disout-delete:hover {
  border-color: var(--md-danger-text);
  background: var(--md-danger-bg-hover);
  box-shadow: 0 0 0 2px var(--md-danger-border);
}
.mini-dis-v2-disout-delete .ficon {
  font-size: 0.72rem;
  line-height: 1;
}
.mini-dis-v2-disout-move {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  min-width: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.2rem;
  padding: 0.2rem;
  border: 1px solid var(--md-chip-border);
  border-radius: 0.4rem;
  background: var(--md-btn-bg);
  color: var(--md-text-accent);
  cursor: pointer;
  box-shadow: 0 1px 2px var(--md-accent-soft);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mini-dis-v2-disout-move:hover,
.mini-dis-v2-disout-move.is-active {
  border-color: var(--md-accent-soft-3);
  background: var(--md-btn-bg-hover);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-v2-disout-move .ficon {
  font-size: 0.72rem;
  line-height: 1;
}
.mini-dis-v2-group-cluster.is-scrollable .mini-dis-v2-group-cluster-body {
  /* Body already scrolls; keep thin scrollbar for groups with multiple DIS OUTs. */
  scrollbar-width: thin;
}
.mini-dis-v2-group-empty {
  text-align: center;
  color: var(--md-text-soft);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.85rem 0.35rem;
  border: 1px dashed var(--md-accent-soft);
  border-radius: 0.45rem;
  background: var(--md-empty-bg);
}
.mini-dis-v2-disout-columns {
  display: flex;
  gap: 0.5rem;
  align-items: start;
}
.mini-dis-v2-disout-column {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.2rem;
  overflow: hidden;
  align-items: stretch;
}
.mini-dis-v2-disout-column:not(.is-add):not(.is-empty) {
  border: 1px solid var(--md-panel-border);
  border-radius: 0.55rem;
  background: var(--md-card-bg);
  padding: 0.35rem 0.4rem 0.45rem;
  box-sizing: border-box;
}
.mini-dis-v2-disout-column.is-empty {
  flex: 0 0 5.5rem !important;
  border: 1px dashed var(--md-accent-soft);
  border-radius: 0.55rem;
  background: var(--md-empty-bg);
  padding: 0.35rem 0.3rem;
  box-sizing: border-box;
}
.mini-dis-v2-disout-column.is-selected:not(.is-no-group) .mini-dis-v2-group-card {
  border-color: var(--md-accent-soft-3);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-v2-disout-column.is-add {
  flex: 0 0 5.5rem !important;
  border: none;
  background: transparent;
  padding: 0;
}
.mini-dis-v2-bus-drop {
  width: 2px;
  height: 0.8rem;
  margin: 0 auto;
  background: var(--md-accent-line);
}
.mini-dis-v2-bus-drop--ghost {
  visibility: hidden;
}
.mini-dis-v2-bus-drop--hidden {
  display: none;
}
.mini-dis-v2-group-card-wrap {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-items: stretch;
}
.mini-dis-v2-group-card,
.mini-dis-v2-add-card {
  border: 1px solid var(--md-panel-border);
  border-radius: 0.55rem;
  background: var(--md-card-bg);
  min-height: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  padding: 0.35rem 0.4rem;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.mini-dis-v2-group-cluster.is-add .mini-dis-v2-add-card {
  flex: 1 1 auto;
  height: 100%;
  min-height: 100%;
  justify-content: center;
}
.mini-dis-v2-group-title {
  color: var(--md-text-soft);
  font-size: 0.62rem;
  line-height: 1.2;
  min-height: 0.75rem;
}
.mini-dis-v2-group-name {
  color: var(--md-text-accent);
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 0.8rem;
}
.mini-dis-v2-group-count {
  font-size: 0.58rem;
  color: var(--md-text-muted);
  font-weight: 600;
  line-height: 1.2;
  min-height: 0.7rem;
}
.mini-dis-v2-group-add-disout {
  border: 1px solid var(--md-accent-soft-3);
  border-radius: 0.5rem;
  background: var(--md-btn-bg);
  color: var(--md-btn-text);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.2rem 0.34rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 1.2rem;
  line-height: 1;
  box-shadow: 0 1px 0 var(--md-accent-soft);
}
.mini-dis-v2-group-add-disout:hover {
  background: var(--md-btn-bg-hover);
}
.mini-dis-v2-group-card-wrap:has(.mini-dis-v2-group-delete) .mini-dis-v2-group-card {
  padding-right: 2rem;
}
.mini-dis-v2-group-card-wrap:has(.mini-dis-v2-group-delete) .mini-dis-v2-group-title,
.mini-dis-v2-group-card-wrap:has(.mini-dis-v2-group-delete) .mini-dis-v2-group-name {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mini-dis-v2-group-delete {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  z-index: 2;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.mini-dis-v2-group-delete .ficon {
  font-size: 1.15rem;
}
.mini-dis-v2-group-delete .action-text:empty {
  display: none;
}
.mini-dis-v2-add-card {
  border-style: dashed;
  color: var(--md-text-muted);
  font-size: 0.66rem;
  font-weight: 700;
}
.mini-dis-v2-disout-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding-top: 0;
}
.mini-dis-v2-disout-active-columns {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.15rem;
}
.mini-dis-v2-active-column {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.mini-dis-v2-active-column.is-scrollable {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}
.mini-dis-v2-disout-column.is-scrollable {
  min-width: 0;
}
.mini-dis-v2-group-bus {
  height: 2px;
  margin: 0 0.35rem 0;
  background: var(--md-accent-line);
  border-radius: 1px;
  flex: 0 0 auto;
}
.mini-dis-v2-active-column.is-empty {
  flex: 0 0 5.5rem !important;
  min-height: 2rem;
}
.mini-dis-v2-active-column.is-add {
  flex: 0 0 5.5rem !important;
  min-height: 0;
  border: none;
  background: transparent;
  padding: 0;
}
.mini-dis-v2-disout-link {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 6.75rem;
  width: 6.75rem;
  min-width: 6.75rem;
  max-width: 6.75rem;
}
.mini-dis-v2-disout-connector {
  width: 2px;
  height: 0.7rem;
  min-height: 0;
  margin: 0 auto;
  background: var(--md-accent-line);
  border-radius: 1px;
  flex: 0 0 auto;
}
.mini-dis-v2-disout-connector .arr-route.arr-ver {
  display: none;
}
.mini-dis-v2-disout-link.is-selected .mini-dis-disout-v3-card {
  box-shadow: 0 0 0 2px var(--md-accent-soft-3);
}
.mini-dis-v2-disout-card {
  border: none;
  background: transparent;
  padding: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.mini-dis-v2-disout-column.is-no-group .mini-dis-v2-group-card {
  border-style: dashed;
}

/* Force consistent vertical alignment for reused MiniMultisys units */
.mini-dis-v2-disout-card .mini-dis-disout-slot {
  min-height: auto;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}
.mini-dis-v2-disout-card .mini-dis-disout-slot--fixed {
  min-height: auto;
  margin-bottom: 0;
}
.mini-dis-v2-disout-card .mini-dis-disout-card {
  display: grid;
  grid-template-rows: auto 3.7rem auto 4rem auto 4.9rem;
  align-content: start;
  padding: 0.32rem 0.3rem 0.24rem;
}
.mini-dis-v2-disout-card .mini-dis-disout-title {
  margin-bottom: 0.18rem;
}
.mini-dis-v2-disout-card .mini-dis-top-connector {
  height: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mini-dis-v2-disout-card .mini-dis-top-connector-line {
  width: 4px;
  height: 0.78rem;
  background: var(--md-accent);
  border-radius: 3px;
  display: inline-block;
}
.mini-dis-v2-disout-card .mini-dis-top-connector-dot {
  position: absolute;
  top: 0.02rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--md-accent);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-v2-disout-card .mini-dis-up-arrow-gap {
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-dis-v2-disout-card .mini-dis-up-arrow {
  position: relative;
  width: 4px;
  height: 0.92rem;
  background: var(--md-accent);
  border-radius: 2px;
  display: inline-block;
}
.mini-dis-v2-disout-card .mini-dis-up-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.52rem;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--md-accent);
}
.mini-dis-v2-disout-card .mini-dis-disout-slot + .mini-dis-up-arrow-gap {
  margin-top: 0.2rem;
}
.mini-dis-v2-disout-card .mini-dis-up-arrow-gap + .mini-dis-disout-slot {
  margin-top: 0.18rem;
}
.mini-dis-v2-disout-card .sch-unit.pump,
.mini-dis-v2-disout-card .sch-unit.flow-meter,
.mini-dis-v2-disout-card .sch-unit.product-source {
  min-height: 3.8rem;
}
.mini-dis-v2-disout-card .mini-dis-disout-slot:last-child {
  min-height: 5rem;
}
.mini-dis-v2-disout-card .sch-unit.product-source .bottle {
  margin-left: auto;
  margin-right: auto;
}
.mini-dis-v2-rf-card {
  width: 8.4rem;
  min-height: 4.6rem;
  border: 1px solid var(--md-accent-soft-3);
  border-radius: 0.7rem;
  background: var(--md-card-bg-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.mini-dis-v2-rf-dot {
  position: absolute;
  right: 0.45rem;
  top: 0.45rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--indicator-on, #22aa47);
}
.mini-dis-v2-rf-name {
  color: var(--md-text-accent);
  font-size: 0.9rem;
  font-weight: 700;
}
.mini-dis-v2-rf-sub {
  color: var(--md-text-soft);
  font-size: 0.56rem;
}
.mini-dis-v2-rf-ref {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.mini-dis-v2-rf-ref-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--md-accent-line);
  pointer-events: none;
}
.mini-dis-v2-rf-ref-link::before,
.mini-dis-v2-rf-ref-link::after {
  content: "";
  width: 1.1rem;
  height: 0;
  border-top: 2px dashed var(--md-accent-line);
}
.mini-dis-v2-rf-ref-link .ficon-wifi-signal {
  font-size: 1.1rem;
  line-height: 1;
  /* dot on the source (right) side, arcs toward the receiver (left) */
  transform: rotate(-90deg);
}
.mini-dis-v2-rf-arrow {
  order: -1;
  width: 0;
  height: 0;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  border-right: 0.42rem solid var(--md-accent-line);
  margin-right: -0.2rem;
}
.mini-dis-v2-rf-ref-card-wrap {
  position: relative;
  display: flex;
}
.mini-dis-v2-rf-ref-card-wrap:has(.mini-dis-v2-rf-ref-delete) .mini-dis-v2-rf-ref-card {
  padding-right: 2.6rem;
}
.mini-dis-v2-rf-ref-delete {
  /* sits just left of the status dot in the card's top-right corner */
  position: absolute;
  top: 0.35rem;
  right: 1.2rem;
  z-index: 2;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.mini-dis-v2-rf-ref-delete .ficon {
  font-size: 1.1rem;
}
.mini-dis-v2-rf-ref-delete .action-text:empty {
  display: none;
}
.mini-dis-v2-rf-ref-card {
  position: relative;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--md-accent-soft-3);
  border-radius: 0.7rem;
  background: var(--md-card-bg-grad);
  display: flex;
  flex-direction: column;
  align-items: center;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mini-dis-v2-rf-ref-card:hover,
.mini-dis-v2-rf-ref-card:focus-visible {
  border-color: var(--md-accent-soft-2);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
  outline: none;
}
.mini-dis-v2-rf-ref-card.is-selected {
  border-color: var(--md-accent-soft-3);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}
.mini-dis-v2-rf-ref-icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--md-accent-line);
  margin-bottom: 0.15rem;
}
.mini-dis-v2-rf-ref-label {
  color: var(--md-text-soft);
  font-size: 0.56rem;
}
.mini-dis-v2-rf-ref-mac {
  color: var(--md-text-accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.mini-dis-v2-rf-dot.is-off {
  background: var(--indicator-off, #eb6969);
}
.mini-dis-v2-rf-ref.is-add .mini-dis-v2-rf-ref-link {
  color: var(--md-text-muted);
}
.mini-dis-v2-rf-ref.is-add .mini-dis-v2-rf-ref-link::before,
.mini-dis-v2-rf-ref.is-add .mini-dis-v2-rf-ref-link::after {
  border-color: var(--md-panel-border);
}
.mini-dis-v2-rf-ref-add {
  width: auto;
  min-height: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.7rem;
  justify-content: center;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mini-dis-v2-rf-ref-add:hover,
.mini-dis-v2-rf-ref-add:focus-visible {
  border-color: var(--md-accent-soft-2);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
  outline: none;
}
.mini-dis-v2-rf-ref-add.is-selected {
  border-color: var(--md-accent-soft-3);
  box-shadow: 0 0 0 2px var(--md-accent-soft);
}

.mini-dis-schematic-settings-popup-subtitle {
  margin: 0 0 0.85rem;
  color: var(--pan-meta-txt, #5a6d7e);
  font-size: 0.82rem;
  font-weight: 600;
}
.mini-dis-schematic-settings-popup .popup-header .header-actions {
  display: block;
  flex: 0 0 auto;
  font-size: 1.2rem;
  white-space: nowrap;
}
.mini-dis-schematic-settings-popup .popup-header .header-actions > #mini-dis-drawer-actions-slot {
  display: inline;
}
.mini-dis-schematic-settings-popup .popup-header .header-actions .main-action.combined {
  max-width: none;
  margin-left: 0.55rem;
  padding: 0;
  vertical-align: top;
}
.mini-dis-schematic-settings-popup .popup-header .header-actions .main-action.combined .action-text {
  white-space: nowrap;
}
.mini-dis-inspector-fields .form-group {
  margin-bottom: 0.85rem;
}
.mini-dis-inspector-disout-actions {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--bs-border-color, rgba(31, 136, 202, 0.16));
}
.mini-dis-schematic-settings-popup .panel {
  margin-bottom: 0.85rem;
}
.mini-dis-schematic-settings-popup .panel:last-child {
  margin-bottom: 0;
}
.mini-dis-schematic-settings-popup .form-group {
  margin-bottom: 0.75rem;
}

/* MiniDIS DIS OUT v3 - clean, explicit layout */
.mini-dis-v2-disout-card .mini-dis-disout-v3 {
  width: 100%;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-top-connector {
  display: none;
}
.mini-dis-v2-active-column.is-scrollable::after {
  content: "";
  flex: 0 0 auto;
  width: 0.35rem;
  height: 1px;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-selectable {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-selectable:hover .mini-dis-disout-v3-card {
  box-shadow: 0 0 0 1px var(--md-accent-soft-2);
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-selectable .dropdown,
.mini-dis-v2-disout-card .mini-dis-disout-v3-selectable .sch-unit,
.mini-dis-v2-disout-card .mini-dis-disout-v3-selectable .mini-dis-disout-v3-hit-area {
  pointer-events: none;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-top-connector {
  display: none;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-rows: auto 5.1rem auto 4.75rem auto minmax(5.4rem, auto);
  align-content: start;
  overflow-x: hidden;
  min-width: 0;
  box-sizing: border-box;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  min-width: 0;
  padding: 0 0.1rem;
  margin-bottom: 0.12rem;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-logical {
  text-align: center;
  color: var(--md-text-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 100%;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-title {
  text-align: center;
  color: var(--md-text-accent);
  font-size: 0.62rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.15;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--pump {
  align-items: center;
  padding-bottom: 0;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--pump .mini-dis-disout-v3-hit-area {
  width: auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-hit-area {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-hit-area:hover {
  box-shadow: 0 0 0 1px var(--md-accent-soft-3) inset;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--flow {
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--flow .mini-dis-disout-v3-hit-area {
  width: auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  margin: 0.05rem 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-connector .arr-route.arr-ver {
  margin: 0;
  min-height: 1.35rem;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister {
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .dropdown {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .sch-unit.product-source .bottle {
  margin-left: auto;
  margin-right: auto;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .sch-unit.product-source .bottle .ficon {
  transform: none;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .sch-unit.product-source {
  margin-top: 0;
  padding: 0.08rem 0.15rem 0.2rem;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .sch-text-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0.15rem 0.15rem 0;
  box-sizing: border-box;
  text-align: center;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .sch-unit-name,
.mini-dis-v2-disout-card .mini-dis-disout-v3-slot--canister .sch-unit-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: center;
  font-size: 0.58rem;
  line-height: 1.2;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.pump,
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter,
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.product-source {
  min-height: 0;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.pump {
  width: 46px;
  height: 76px;
  background-size: 76% 95%;
  background-position: center 20px;
  box-sizing: border-box;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.pump .sch-text-wrap {
  padding-top: 15px;
  position: relative;
  z-index: 1;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter {
  width: 70px;
  height: 70px;
  background-size: 70% 90%;
  background-position: center 20px;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter .sch-text-wrap {
  padding-top: 15px;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter .sch-unit-value {
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter .indicator {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 100px;
  background-color: var(--indicator-off, #c5d0d8);
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter .indicator.on {
  background-color: var(--indicator-on, #3bb273);
}
.mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.flow-meter .indicator.off {
  background-color: var(--indicator-off, #c5d0d8);
}

@media (max-width: 1280px) {
  .mini-dis-v2-disout-columns,
  .mini-dis-v2-disout-active-columns { gap: 0.45rem; }
}

@media (max-width: 960px) {
  .mini-dis-v2-disout-columns,
  .mini-dis-v2-disout-active-columns { gap: 0.35rem; }
}

@media (max-width: 900px) {
  /* keep the MiniDIS -> reference sensor chain horizontal; just tighten it */
  .mini-dis-v2-rf-ref {
    white-space: normal;
  }
  .mini-dis-v2-rf-ref-link::before,
  .mini-dis-v2-rf-ref-link::after {
    width: 0.7rem;
  }
  .mini-dis-v2-rf-ref-card,
  .mini-dis-v2-rf-ref-add {
    max-width: 8.4rem;
  }
  .mini-dis-v2-desktop {
    display: none;
  }
  .mini-dis-v2-mobile {
    display: block;
  }
  .mini-dis-v2-mobile-body {
    display: grid;
    grid-template-columns: 4.8rem 1fr;
    gap: 0.55rem;
    align-items: start;
  }
  .mini-dis-v2-mobile-dots {
    display: grid;
    gap: 0.35rem;
    align-content: start;
  }
  .mini-dis-v2-mobile-dot {
    border: 1px solid var(--md-chip-border);
    border-radius: 999px;
    background: var(--md-chip-bg);
    color: var(--md-text-muted);
    padding: 0.22rem 0.3rem;
    display: grid;
    justify-items: center;
    gap: 0.16rem;
    cursor: pointer;
  }
  .mini-dis-v2-mobile-dot-core {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 2px solid var(--md-accent-soft-3);
    background: var(--md-empty-bg);
    display: inline-block;
  }
  .mini-dis-v2-mobile-dot-label {
    font-size: 0.54rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
  }
  .mini-dis-v2-mobile-dot.is-active {
    border-color: var(--md-accent-soft-3);
    background: var(--md-panel-bg-soft);
    color: var(--md-btn-text);
  }
  .mini-dis-v2-mobile-dot.is-active .mini-dis-v2-mobile-dot-core {
    background: var(--md-accent);
    border-color: var(--md-accent);
    box-shadow: 0 0 0 2px var(--md-accent-soft);
  }
  .mini-dis-v2-mobile-add-group {
    border: 1px dashed var(--md-accent-soft-3);
    border-radius: 999px;
    background: var(--md-empty-bg);
    color: var(--md-btn-text);
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.3rem 0;
    cursor: pointer;
  }
  .mini-dis-v2-mobile-panel {
    display: grid;
    gap: 0.4rem;
  }
  .mini-dis-v2-mobile-disout-dots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: 0.3rem;
  }
  .mini-dis-v2-mobile-disout-dot {
    border: 1px solid var(--md-chip-border);
    border-radius: 999px;
    background: var(--md-chip-bg);
    color: var(--md-text-muted);
    padding: 0.2rem 0.28rem;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    cursor: pointer;
  }
  .mini-dis-v2-mobile-disout-dot-core {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    border: 2px solid var(--md-accent-soft-3);
    background: var(--md-empty-bg);
    display: inline-block;
  }
  .mini-dis-v2-mobile-disout-dot-label {
    font-size: 0.52rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.05;
  }
  .mini-dis-v2-mobile-disout-dot.is-active {
    border-color: var(--md-accent-soft-3);
    background: var(--md-panel-bg-soft);
    color: var(--md-btn-text);
  }
  .mini-dis-v2-mobile-disout-dot.is-active .mini-dis-v2-mobile-disout-dot-core {
    background: var(--md-accent);
    border-color: var(--md-accent);
    box-shadow: 0 0 0 2px var(--md-accent-soft);
  }
  .mini-dis-v2-mobile-disout-dot.is-moving {
    border-color: var(--md-accent-soft-3);
    background: var(--md-panel-bg-soft);
    color: var(--md-btn-text);
  }
  .mini-dis-v2-mobile-disouts {
    display: grid;
    gap: 0.55rem;
  }
  .mini-dis-v2-mobile-no-disout {
    border: 1px dashed var(--md-accent-soft-2);
    border-radius: 0.5rem;
    background: var(--md-empty-bg);
    color: var(--md-text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.4rem 0.55rem;
    text-align: center;
  }
  .mini-dis-v2-mobile-disouts .mini-dis-v2-disout-link {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .mini-dis-v2-mobile-disouts .mini-dis-v2-disout-connector {
    display: none;
  }
  .mini-dis-v2-mobile-disouts .mini-dis-v2-disout-link.is-moving {
    opacity: 0.72;
  }
  .mini-dis-v2-mobile-body.is-move-mode .mini-dis-v2-mobile-dot.is-move-target {
    border-color: var(--md-accent-soft-3);
    background: var(--md-panel-bg-soft);
    box-shadow: 0 0 0 2px var(--md-accent-soft);
  }
  .mini-dis-v2-mobile-body.is-move-mode .mini-dis-v2-mobile-dot.is-move-target .mini-dis-v2-mobile-dot-core {
    border-style: dashed;
    border-color: var(--md-accent);
  }
  .mini-dis-v2-mobile-body.is-move-mode .mini-dis-v2-mobile-dot.is-current-group {
    opacity: 0.55;
  }
  .mini-dis-v2-mobile-move-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--md-accent-soft-2);
    border-radius: 0.45rem;
    background: var(--md-panel-bg-soft);
  }
  .mini-dis-v2-mobile-move-banner-text {
    color: var(--md-btn-text);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .mini-dis-v2-mobile-move-banner-name {
    display: inline-block;
    margin-left: 0.25rem;
    color: var(--md-text-accent);
  }
  .mini-dis-v2-mobile-move-cancel {
    flex: 0 0 auto;
    border: 1px solid var(--md-chip-border);
    border-radius: 0.35rem;
    background: var(--md-chip-bg);
    color: var(--md-btn-text);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.22rem 0.45rem;
    cursor: pointer;
  }
}

/* MiniDIS schematic: scheme units inherit global interactive-scheme tokens */
.mini-dis-schematic-layout .sch-unit,
.mini-dis-schematic-layout .sch-unit-name,
.mini-dis-schematic-layout .sch-unit-value {
  color: var(--scheme-txt);
}
.mini-dis-schematic-layout .arr-route.arr-ver {
  color: var(--md-accent-line);
}
.mini-dis-schematic-layout .mini-dis-v2-disout-card .mini-dis-disout-v3 .sch-unit.pump {
  border-color: var(--sch-route-stroke);
}