@media (max-width: 1200px) {
	.xl-show {
		display:none!important;
	}
}

@keyframes pblink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}


.sm-noscroll {
	overflow-y:hidden !important;
	padding-bottom:1rem;
}
.md-noscroll {
	overflow-y:hidden !important;
	padding-bottom:1rem;
}
.lg-noscroll {
	overflow-y:hidden !important;
	padding-bottom:1rem;
}
.xl-noscroll {
	overflow-y:hidden !important;
	padding-bottom:1rem;
}

.fix-scroll {
	overflow-x:hidden !important;
	overflow-y:hidden !important;
}

@media (min-width: 768px) {
    .h-md-100 {
        height: 100% !important;
    }
	.sm-noscroll {
		overflow-y:auto !important;
		padding-bottom:0;
	}
}
@media (min-width: 992px) {
	.h-lg-100 {
		height: 100% !important;
	}
	.md-noscroll {
		overflow-y:auto !important;
		padding-bottom:0;
	}
}
@media (min-width: 1200px) {
	.h-xl-100 {
		height: 100% !important;
	}
	.lg-noscroll {
		overflow-y:auto !important;
		padding-bottom:0;
	}
}


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

.ico {
	vertical-align:bottom;
}

input.modified{
	background-color:#fafbcf !important;
}
input[type="checkbox"].modified {
	border: 2px solid #fafbcf !important;
}

.popover {
	max-width: 800px;
	overflow:hidden;
	border: 3px solid #072b97;
}
.popover .popover-header {
	background-color:#0099cc;
	color: white;
	border-bottom: 3px solid #072b97!important;
}
.popover .popover-header .modal-close {
	margin:0.1rem;
	background-color:#0099cc;
	border:0;
}
.popover .popover-body {
	min-width: 500px;
}

.page-title {
	text-align: center;
	background-color: #0099cc;
	color:white;
	font-weight: bold;
	font-size: 120%;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;

	border-bottom: 1px solid #002594;
	border-top: 1px solid #002594;
}

/* Pannello bottoni */
/*
@media (max-width: 1200px) {
	.panelbtn, .panelbtn:hover {
		width: 150px;
		height: 150px;
		font-size:16px;
		padding-bottom: 15px;
	}
	.panelbtn:active:hover {
		background-position: top 3px left 3px;
		background-size: 144px 144px;
		font-size:15px;
		padding-bottom: 13px;
	}
}
@media (min-width: 1200px) {
	.buttons-container {
		max-width: 570px;
	}

	.panelbtn, .panelbtn:hover {
		width: 100px!important;
		height: 100px!important;
		font-size:12px!important;
		padding-bottom: 10px!important;
		background-size: 100px 100px!important;
	}
	.panelbtn:active:hover {
		background-position: top 3px left 3px!important;
		background-size: 94px 94px!important;
		font-size:11px!important;
		padding-bottom: 7px!important;
	}
}

@media (min-width: 1200px) {
	.buttons-container {
		max-width: 520px;
		min-width: 390px;
	}
}
@media (max-width: 1200px) {
	.buttons-container {
		min-width: 390px;
	}
}


*/



.buttons-container {
	margin:auto;
	background-color:#09c;
}

.buttons-container .spacer {
	width:30px;
	opacity:0;
}

.buttons-container.small .spacer {
	width:20px;
	opacity:0;
}

.buttons-container .panelbtn, .buttons-container .panelbtn:hover {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
	background-image: url('/public/components/buttons/btn.png');
	background-repeat: no-repeat;
	width: 150px;
	height: 150px;
	border:0;
	padding:0;
	margin:0;
	font-size:16px;
	text-transform: uppercase;
	padding-bottom: 15px;
	z-index:10;
}
.buttons-container .panelbtn:active:hover {
	background-position: top 3px left 3px;
	background-size: 144px 144px;
	font-size:15px;
	padding-bottom: 13px;
}

.buttons-container.small .panelbtn, .buttons-container.small .panelbtn:hover {
	width: 100px!important;
	height: 100px!important;
	font-size:12px!important;
	padding-bottom: 10px!important;
	background-size: 100px 100px!important;
}
.buttons-container.small .panelbtn:active:hover {
	background-position: top 3px left 3px!important;
	background-size: 94px 94px!important;
	font-size:11px!important;
	padding-bottom: 7px!important;
}

.panelbtn.active, .panelbtn.active.disabled {
	background-image: url('/public/components/buttons/btna.png') !important;
}
.panelbtn.activating, .panelbtn.activating.disabled {
	background-image: url('/public/components/buttons/btna.png') !important;
    animation: pblink 1s;
    animation-iteration-count: infinite;
}
.panelbtn.disabled {
	opacity:0.7;
	background-image: url('/public/components/buttons/btn.png') !important;
}


.panelbtn.blue, .panelbtn.blue:hover {
	background-image: url('/public/components/buttons/btnb.png');
}
.panelbtn.red, .panelbtn.red:hover {
	background-image: url('/public/components/buttons/btnr.png');
}
.panelbtn.green, .panelbtn.green:hover {
	background-image: url('/public/components/buttons/btng.png');
}
.panelbtn.color, .panelbtn.color:hover {
	background-image: url('/public/components/buttons/btnc.png');
}

/* Accordion */

.data-accordion
{
	border: solid 0.08em #c5c5c5;
	font-weight:bold;
	color:#77808d;
	cursor:pointer;
	margin:1em;
	padding:0.5em;
	margin-bottom:0!important;
}

.data-accordion .icon-collapse {
	display: inline-block;
	transform: rotate(90deg);
}
.data-accordion.accordion-close .icon-collapse {
	transform: rotate(0deg)!important;
}

.data-accordion.accordion-open {
	border-bottom-width: 0.08em!important;
}

.accordion-content
{
	border: solid 0.08em #c6d3df;
	border-top-width: 0!important;
	padding:0.5em;
	margin:1em;
	margin-top:0!important;
	display: none;
}

/* Custom tree */
.tree-node-selected a
{
	/*text-decoration:underline;*/
	/*font-weight:bold;*/
	background-color:#0099cc;
	color:white!important;
}

.small .tree {
	font-size:0.7rem;
}

.small .tree .tree-toggler::before {
	height: 1rem;
	width: 1rem;
}

/* State machine status*/
.flow-container {
	position:relative;
	margin: 5px;
}
.flow-item {
	position:absolute;
	border: solid 3px #cecece;
	width: 150px;
	height: 35px;
	vertical-align:middle;
	text-align:center;
	padding-top:6px;
	/*padding-bottom:2px;*/
}
.flow-item-round {
	border-radius: 20px;
}

.connector {
	width: 50px;
	height: 50px;
	position: absolute;
	background-size: 50px;
	opacity:0.3;
}
.connector-left {
	width: 50px;
	height: 25px;
	position: absolute;
	background-size: 50px;
	opacity:0.3;
}
.vert-arrow {
	position: absolute;
	background-image:url(../images/arrowup.png);
	background-size: 28px;
	opacity:0.3;
	width: 28px;
}


/* Signals view */

.sigview-alarm {
	background-color:#f8dada;
	color:#520303;
}

.sigview-warning {
	background-color:#f8f5da;
	color:#5c4b05;
}

.table {
	margin:auto;
	min-width:70%;
}

.table label {
	margin-bottom:unset;
}

.table.table-compact
{
	font-size: 80%;
}
.table.table-compact td, .table.table-compact th
{
	padding-top:2px !important;
	padding-bottom:2px !important;
}
.table.table-mute td, .table.table-mute th
{
	border:0;
}


.modified {
  border-color: #a3a90a;
}

.sigmask-alarm {
}

.sigmask-alarm.sig-on {
	background-color:#f8dada;
}

.sigmask-alarm.sig-rawon {
	background-color:#f3d8f8;
}

.io-view-input {
}

.io-view-output {
}

.io-view-input.io-on {
	background-color:#fff9f0;
}

.io-view-output.io-on {
	background-color:#fff9f0;	
}

/* Ctree */
.ctree-ver-bar {
	position: absolute;
	border-left: 2px solid #000000;
}
.ctree-hor-bar {
	position: absolute;
	border-top: 2px solid #000000;
	height: 0px;
}

.ctree-container {
	position: relative;
	text-align: center;
	user-select:none;
}  

.ctree-object {
	display: none;
	border: 2px solid #585a5e;
	margin: 0 1rem;
	padding: 0 1rem;
	text-align: right;
	overflow-x:hidden;
	white-space:normal;
	word-break:break-word;
	/*vertical-align: middle;*/
	min-width: 7rem;
	max-width: 8rem!important;
	font-size:0.7rem;
}
.ctree-object.show {
	display: inline-block;
}
.ctree-object.has-child {
	border: 4px solid #0099cc;
}


.ctree-spacer {
	display: none;
	height: 3rem;
}
.ctree-spacer.show {
	display: block;
}

.ctree-content {
	/*display: block;*/
}
.ctree-data {
	padding:0;
	margin:0;
	padding-top: 0.1rem;
}
.ctree-action {
	font-size:1.2rem;
	padding:0;
	margin:0;
	padding-top: 0.2rem;
	overflow:hidden;
}

.ctree-action a, .ctree-action a:hover, .ctree-action a:visited {
	color:#0098cb;
}
.popover-enabled span {
	color:#072b97!important;
	border: 1px solid #000;
}

/* user data */

.login-card {
	display:inline-block;
	text-align:center;
}

.login-card h4 {
	display:inline;
	font-size: 90%;
}
.login-card h5 {
	display:inline;
	font-weight:bold;
	font-size: 110%;
}

#footer-app-status {
	
}

.switch-button {
	/*width: 35px;
	height: 36px;*/
	height:1.3rem;
	margin:auto;
	cursor:pointer;
}

.in-alarm-object {
	border: 2px solid #ad0000;
	margin: 0.25rem;
	padding: 0.25rem;
}

.in-alarm-object.selected {
	border: 5px solid #072b97;
}



/* multi column */
.multi-column {
	column-count: 1;
}

@media (min-width: 576px) {
	.multi-column {
		column-count: 2;
	}
}
@media (min-width: 768px) {
	.multi-column {
		column-count: 2;
	}
}
@media (min-width: 992px) {
	.multi-column {
		column-count: 3;
	}
}
@media (min-width: 1200px) {
	.multi-column {
		column-count: 3;
	}
}
@media (min-width: 1368px) {
	.multi-column {
		column-count: 4;
	}
}

.multi-column > div {
	break-inside:avoid-column;
	word-break:break-word;
}

.multi-column-fixed > div {
	break-inside:avoid-column;
	word-break:break-word;
}


.btn-group.small button {
	font-size:0.7rem;
}

.btn-group button.btn-primary.disabled {
	background-color: #072b97;
	opacity: 1;
}

.btn-group button.btn-outline-primary:hover {
	background-color: #0099cc;
}


.plotlyjsicon {
	display:none!important;
}


.dad-station-container {
	background-color: #d9e1e8;
	border: 2px solid #002594;
	padding: 3px;
	margin: 3px;
	min-height: 50px;
}

.dad-title {
	background-color: #002594;
	color:white;
}

.dad-station {
	display:inline-block;
	border: 1px solid #0099cc;
	padding: 3px;
	margin: 3px;
	width: 150px;
	user-select:none;
}

.dad-station-title {
	background-color: #cc9600;
	color:white;
}

.dad-robot-title {
	background-color: #cb2604;
	color:white;
}


.dad-mission {
	display:inline-block;
	padding: 3px;
	color: #118623;
}

.dad-group-mission {
	display:none;
	color: #cfc3c1;
	background-color: #514b4a;
	margin:1px;
	cursor:pointer;
}

.dad-group-mission.available {
	display:inline-block;
	color: #d4ecc0;
	background-color: #cb2604;
}

.dad-group-mission.enabled {
	display:inline-block;
	color: #742717 !important ;
	background-color: #41bd20 !important;
}


.seq-running {
	border: 10px solid #24b507;
}

.seq-stopped {
	border: 10px solid #ffffff;
}

.seq-paused {
	border: 10px solid #cb2604;
}

.seq-blocked {
	border: 10px solid #fa9138;
}

.seq-blocked-paused {
	border: 10px solid #ee396b;
}

.button-bar {
	font-size: 90%;
}
.button-bar .btn {
	font-size: 90%;
	padding: 0.1rem 0.2rem;
}
.button-bar label {
	margin:inherit;
}

.svg_button {
	user-select: none;
	cursor: pointer;
}


.btn-command {
	border: 2px solid #007197;
	border-radius: 16px;
	font-size: 18px;
	text-align: center;
	box-shadow: 2px 2px #d5d9dc;
	background-color: #e9ecef;
	color: #000000;
	padding: 8px;
	margin: 10px 10px;
	cursor: pointer;
}
.btn-command.btn-sm {
	font-size: 13px;
	margin: 3px 3px;
	padding: 5px 3px;
}
.btn-command:hover {
	background-color: #0099cc;
	box-shadow: 2px 2px #007197;
	color: #eeeeee;
}
.btn-command.disabled {
	cursor:not-allowed;
	pointer-events: none;
	background-color: #e1e1e1;
	border-color: #dbdbdb;
	box-shadow: 2px 2px #b5b5b5;
}
.btn-command.not-available {
	background-color: #e1e1e1;
	border-color: #dbdbdb;
	box-shadow: 2px 2px #b5b5b5;
}
.btn-command.disabled:hover {
	cursor:not-allowed;
}