@charset "utf-8";
/* CSS Document */

.panel-container.invisible .hidden, .hidden{
	display: none;
}
.panel-container.visible .hidden{
	display: block;
}

.form-group{
	background: none;
	position: relative;
	float: left;
}
.form-group.center{
	float: none;
}
.form-group.right{
	float: right !important;
}


.form-flex {
	display: flex;
	flex-wrap: wrap;
}

.form-flex > .form-group{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	align-items: flex-start;
	justify-content: left;
}
.form-flex > .form-group.center{
	justify-content: center !important;
}
.form-flex > .form-group.right{
	justify-content: right !important;
}

.form-field{
	background: none;
	position: relative;
	float: left;
	padding: 2px 0;
	display: block;
}

.form-imput {
	background: none;
	position: relative;
	padding: 6px 4px 0 4px;
	overflow: hidden;
	box-sizing: border-box !important;
}

.form-imput-menu {
	position: relative;
	float: right;
	border: 0;
	margin: 2px 2px 0;
	padding-top: 4px;
	box-sizing: border-box !important;
	overflow: hidden;
	height: 34px;
}

.imput-result{
	position: relative;
	font-size: 13px;
	vertical-align: middle;
	outline: none;
	border-width: 1px;
	border-style: solid;
	padding: 6px 8px 4px;
	width: 100%;
	height: 30px;
	border-radius: .25rem;
	box-sizing: border-box !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.imput-result.dashed{
	border-style: dashed;
}

.agenda-result{
	position: relative;
	font-size: 12px;
	vertical-align: middle;
	outline: none;
	border: 1px solid #E0E0E0;
	padding: 4px;
	width: 100%;
	height: 25px;
	border-radius: 3px;
	box-sizing: border-box !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.agenda-result:hover{
	width: 100% !important;
	left: 0 !important;
	-ms-transition: all .25s ease;
	transition: all .25s ease;
}


.agenda-resultg{
	position: relative;
	font-size: 12px;
	vertical-align: middle;
	outline: none;
	border: 1px solid hsl(0, 0%, 50%);
	padding: 4px;
	width: 100%;
	height: 25px;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mensal-result{
	position: relative;
	font-size: 12px;
	vertical-align: middle;
	outline: none;
	border: 1px solid #E0E0E0;
	padding: 4px;
	width: 100%;
	border-radius: 3px;
	box-sizing: border-box !important;
	overflow: hidden;
	/*white-space: nowrap;*/
	/*text-overflow: clip;*/
}

.agenda-line{
	position: relative;
	width: 100%;
	height: 35px;
}

.agenda-pos{
	position: absolute;
	float: left;
	top: 0;
	vertical-align: middle;
	outline: none;
	/*border: 1px solid hsl(0, 0%, 50%);
	border-top: none;*/
	padding: 4px;
	width: 100%;
	height: 30px;
	border-radius: 0 0 5px 5px;
	box-sizing: border-box !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-ms-transition: all .25s ease;
	transition: all .25s ease;
}

.agenda-pos:hover{
	width: 100% !important;
	left: 0 !important;
	background-color: rgba( 55,  55,  55, 1) !important;
	z-index: 999;
	-ms-transition: all .25s ease;
	transition: all .25s ease;
}

.imput-result.clean{
	background: none;
	border: 0;
	height: auto;
	min-height: 30px;
	white-space: normal;
}

.imput-result.long-text{
	overflow: hidden;
	height: auto;
	min-height: 30px;
	white-space: normal;
	resize: vertical;
}
.imput-result.long-text.double-line{
	min-height: 70px;
}
.imput-result.long-text.no-resize{
	resize: none;
}
textarea.long-text.double-line{
	height: 86px;
}
.imput-result.text-wrap{
	height: auto;
	min-height: 30px;
	white-space: normal;
}

.imput-result ~ label {
	position: absolute;
	top: 0;
	display: block;
	max-width: calc(100% - 34px);
	font-size: 0.625rem;
	vertical-align: middle;
	font-weight: 500;
	padding:  1px 3px;
	outline: none;
	margin-left: 6px;
	text-decoration: none;
	line-height: 9px;
	border-radius: 0.25rem;
	text-align: left !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.imput-result.dashed ~ label {
	background-color: var(--background-label);
}

.imput-result.clean ~ label {
	background: none;
	padding:  1px 1px 1px 1px;
	border: 0;
}


/*
.widget-group {
	display: flex;
	flex-wrap: wrap;
	padding: .1rem 0;
	align-items: flex-start;
}

.widget-group .imput-result{
	background: none;
	border: 0 !important;
}

.widget-group .imput-result ~ label{
	background: var(--background-panel-title);
	padding: 0.1rem;
	border: 0;
	color: var(--widget-input-label);
	letter-spacing: 1px;
}



.imput-result.content-right  {
	text-align: right !important;
}

.imput-result.content-right ~ label {
	right: 0;
	margin-right: 10px;
}*/

@media all and (max-width: 640px),
only screen and (max-width: 640px){

	.imput-result.content-right  {
		text-align: left !important;
	}

	.imput-result.content-right ~ label {
		left: 0;
		margin-left: 10px;
	}
}


.form-imput > a[class*='imput-button']{
	position: absolute;
	display: block;
	bottom: 0;
	width: 32px;
	height: 32px;
	margin: 4px;
	opacity: .6;
	z-index: 1;
}
.form-imput > a.R{
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	width: 32px;
	height: 32px;
	margin: 4px;
	opacity: .6;
	z-index: 1;
}

.form-imput > a[class*='imput-button'].small{
	width: 24px;
	height: 24px;
	margin: 3px;
}

.form-imput > a[class*='imput-button']::before{
	position: absolute;
	left: calc(50% - 16px);
	top: calc(50% - 16px);
	width: 32px;
	height: 32px;
	content: '';
}

.form-imput > a[class*='imput-button'].small::before{
	left: calc(50% - 12px);
	top: calc(50% - 12px);
	width: 24px;
	height: 24px;
}

.form-imput > a[class*='hover']:hover { opacity: .9; cursor: pointer; }

.form-imput > .imput-button-right{
	right: 0 !important;
}

.form-imput > .imput-button-left{
	left: 0 !important;
}

.form-imput > a.imput-button-right ~ input{ padding-right: 40px !important; }
.form-imput > a.imput-button-left ~ input{ padding-left: 40px !important; }

.form-imput > a.imput-button-right.small ~ div{ padding-right: 32px !important; }
.form-imput > a.imput-button-left.small ~ div{ padding-left: 32px !important; }


div[class*='glyph-']{
	padding-right: 30px !important;
}

div[class*='glyph-']::after{
	position: absolute;
	top: calc(50% - 10px);
	right: 4px;
	width: 20px;
	height: 20px;
	content: "";
	background-size: 20px;
	background-position: center center;
	background-repeat: no-repeat;
}

.glyph-10::after{ background-image: url(../icons/910.png); }
.glyph-01::after{ background-image: url(../icons/901.png); }
.glyph-11::after{ background-image: url(../icons/911.png); }

.glyph-sim::after{ background-image: url(../icons/led-01.png); }
.glyph-nao::after{ background-image: url(../icons/led-06.png); }


.form-field[name="drag"]{
	height: 35px;
	border-radius: 5px;
	float: none;
	clear: both;
	margin-top: 2px;
}

.form-field[name="drag"]:empty{
	background: beige url(../icons/drop.png);
	border: 1px dashed #999;
	width: calc(100% - 2px);
	height: 33px;
	background-size: 32px;
	background-position: center center;
	background-repeat: no-repeat;
}

.panel-content[data-draggable="target"]{
	min-height: 32px;
}

.spiner{
	position: absolute;
	width: 16px;
	top: 0;
	right: 0;
	bottom: 0;
}
.spin {
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	left: calc(50% - 8px);
	background-position: center;
	background-size: 16px;
}
a.spin{
	opacity: .75;
}
span.spin{
	opacity: .25;
}
a.spin:hover{
	opacity: 1;
}
span.spin:hover{
	opacity: .25;
}
.spin[spin-up]{
	top: 0;
}
.spin[spin-dw]{
	bottom: 0;
}

ul.widgetlist {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.75rem;
	margin-left: -0.75rem;
	margin-bottom: 0;
}

