/* ============================================================================
   RESET E CONFIGURAÇÕES GERAIS
   ============================================================================ */

body {
	margin: 0px;
	background-color: var(--color-bg-body);
}

body.stop-scrolling {
	height: 100%;
	overflow: hidden;
}

body.stop-scrolling-x {
	height: 100%;
	overflow-x: hidden;
}

* { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; }

hr { border: 0px; border-bottom: 1px solid var(--color-border-hr);  }


/* ============================================================================
   INPUTS E ELEMENTOS DE FORMULÁRIO BÁSICOS
   ============================================================================ */

input::-ms-clear {
	display: none;
}

input::-ms-reveal {
	display: none;
}

input, select, textarea, button, a {
	outline-color : var(--color-outline);
	color: var(--color-text-default);
}


/* ============================================================================
   WIDGETS UI - DL, DT, DD (DEFINIÇÃO DE LISTAS)
   ============================================================================ */

.ui-widget * { font-size: 12px; }
.ui-dialog-content { z-index: 100; }

.ui-widget dl {
	clear:both;
	border: 1px solid transparent;
}

.ui-widget dt {
	width:22%;
	max-width:250px;
	float:left;
	text-align:right;
	line-height:20px;
	margin:0 4px 3px 0;
}

.ui-widget dd {
	width:77%;
	max-width:100%;
	float:left;
	line-height:20px;
	margin:0px;
}

.ui-widget .tabs-secundaria dt {
	width:21%;
	max-width:240px;
}

.ui-widget .tabs-secundaria  dd {
	width:78%;
}

.ui-widget dd.head-col-1 { width: 38%; border-bottom: 1px solid var(--color-border-default); margin-right: 5px; }
.ui-widget dd.head-col-2 { width: 38%; border-bottom: 1px solid var(--color-border-default); }
.ui-widget dd.body-col-1 { width: 38%; margin-right: 5px; }
.ui-widget dd.body-col-2 { width: 38%; }

.ui-widget dd small { font-size: 11px; font-style:italic; }
.ui-widget dd small * { font-size: 11px; }

.ui-widget input.text, .ui-widget textarea.text, .ui-widget select.text { width:95%; padding: .2em; margin: 1px; margin-left: 0px; }
.ui-widget textarea.text { margin: 1px 0px -5px 1px; margin-left: 0px; }
@-moz-document url-prefix() { .ui-widget textarea.text { margin: 1px 0px -2px 1px; } }

.ui-widget input.text-small { width:95%; padding: 1px; margin: 0px; }
.ui-widget input:disabled:not(.ignore-disabled), .ui-widget select:disabled:not(.ignore-disabled), .ui-widget textarea:disabled:not(.ignore-disabled) { background: var(--color-bg-disabled); border: 1px solid var(--color-border-default); }
.ui-widget input[readonly]:not(.ignore-disabled, .text-grid-plan), .ui-widget input[readOnly]:not(.ignore-disabled, .text-grid-plan) { background: var(--color-bg-disabled); border: 1px solid var(--color-border-default); }
.ui-widget .imp:disabled:not(.ignore-disabled) { background: var(--color-bg-disabled) !important; border: none !important; cursor: not-allowed; }
.ui-widget input.grid-item { width:99%; padding: .2em; margin: 1px; }
.ui-widget textarea.grid-item { width:99%; padding: .2em; margin: 1px; overflow-x: hidden; }
.ui-widget fieldset { padding:0; border:0;  }


/* ============================================================================
   CHECKBOXES E RADIOS CUSTOMIZADOS
   ============================================================================ */

input[type=checkbox],
input[type=radio] {
	appearance: none;
	width: 12px;
	height: 12px;
	border: 1.5px solid var(--color-checkbox-border);
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	background-color: var(--color-bg-white);
	margin: 5px 3px 0px 4px !important;
	z-index: 999999999999 !important;
}

input[type=checkbox].checkbox-toolbar {
	margin: 0px !important;
}

input[type=checkbox]:focus,
input[type=radio]:focus {
	border: 1.5px solid var(--color-checkbox-border-focus);
	background-color: var(--color-checkbox-bg-focus);
}

input[type=checkbox]:hover,
input[type=radio]:hover {
	border: 1.5px solid var(--color-checkbox-border-focus);
	background-color: var(--color-checkbox-bg-focus);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
	border: 1.5px solid var(--color-checkbox-border-focus);
	background-color: var(--color-primary);
}

input[type=checkbox]:checked::after {
	content: '\2713';
	color: var(--color-text-white);
	font-size: 10px;
	position: relative;
	top: -2px;
    left: 1px;
	font-weight: bold;
}

input[type=radio]:checked::after {
	content: '\25CF';
	color: var(--color-text-white);
	font-size: 12px;
	top: -2.8px;
    left: 1.3px;
	position: relative;
}

input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked {
	border: 1.5px solid var(--color-border-checkbox-disabled) !important;
	background-color: var(--color-bg-checkbox-disabled) !important;
}

input[type=radio]:disabled:checked::after {
	color: var(--color-text-checkbox-disabled);
}

input[type=radio] {
	border-radius: 50%;
}

.checkbox-s { width: 10px !important; height: 10px !important; }


/* ============================================================================
   TABELAS - GRID, GRID-GROUP, GRID-SCROLL
   ============================================================================ */

.ui-widget dt table.grid *, .ui-widget dd table.grid *  { line-height: normal !important; }

.ui-widget table.grid { margin: 1em 0; border-collapse: collapse; width: 100%; }
.ui-widget table.grid td, .ui-widget table.grid th { border: 1px solid var(--color-border-grid); text-align: left; font-size: 12px;  }
.ui-widget table.grid th { padding: .6em 10px; }
.ui-widget table.grid td { padding: 3px; padding-left: .6em; padding-right: .6em; }
.ui-widget table.grid tr:nth-child(odd) td { background: var(--color-bg-row-odd) }
.ui-widget table.grid tr:nth-child(even) td { background: var(--color-row-even) }
.ui-widget table.grid tr.selected td,
.ui-widget table.grid tr.selected:nth-child(odd) td,
.ui-widget table.grid tr.selected:nth-child(even) td { background: var(--color-selected) !important; }
.ui-widget table.grid tr:not(.no-hover):nth-child(even):hover td,
.ui-widget table.grid tr:not(.no-hover):hover td { background: var(--color-hover-light);  }
.ui-widget table.grid tr td.hover:hover { background: var(--color-hover-light); }
.ui-widget table.grid tr.wrong td { background: var(--color-bg-wrong); }
.ui-widget table.grid tr.wrong:nth-child(even) td { background: var(--color-bg-wrong-even); }
.ui-widget table.grid td.center, .ui-widget table.grid th.center, input.center { text-align: center;  }
.ui-widget table.grid td.right, .ui-widget table.grid th.right, input.right { text-align: right;  }

.ui-widget table.grid tr.top td:first-child { padding-top: 8px; }
.ui-widget table.grid tr.top td { padding-top: 6px; }

.ui-widget table.grid-group { margin: 1em 0; border-collapse: collapse; width: 100%; }
.ui-widget table.grid-group td, .ui-widget table.grid-group th { border: 1px solid var(--color-border-grid); text-align: left; font-size: 12px;  }
.ui-widget table.grid-group th { padding: .6em 10px; }
.ui-widget table.grid-group td { padding: 3px; padding-left: .6em; padding-right: .6em; }
.ui-widget table.grid-group tr.odd td { background: var(--color-bg-row-odd) }
.ui-widget table.grid-group tr.even td { background: var(--color-row-even) }
.ui-widget table.grid-group tr.line-group-odd td { background: var(--color-bg-grid-group-odd); }
.ui-widget table.grid-group tr.line-group-even td {	background: var(--color-bg-grid-group-even); }
.ui-widget table.grid-group tr.even:hover td, .ui-widget table.grid-group tr:hover td { background: var(--color-hover-light);  }
.ui-widget table.grid-group td.center, .ui-widget table.grid-group th.center, input.center { text-align: center;  }
.ui-widget table.grid-group td.right, .ui-widget table.grid-group th.right, input.right { text-align: right;  }
.ui-widget table.grid-group .icon-plus-minus, div .icon-plus-minus { float: left; background: var(--color-bg-white); border: 1px solid var(--color-bg-carregando); padding-bottom: 2px; }

.ui-widget div.grid-div div.grid-div-line { padding: 3px; padding-left: .6em; padding-right: .6em; border: 0px; border-bottom: 1px solid var(--color-border-grid-line); }
.ui-widget div.grid-div div.grid-div-nothig { padding: 3px; padding-left: .6em; padding-right: .6em; font-style: italic; }

.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:last-child { border: 0px; }
.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:nth-child(odd) { background: var(--color-bg-row-odd) }
.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:nth-child(even) { background: var(--color-row-even) }
.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:nth-child(odd):hover,
.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:nth-child(even):hover { background: var(--color-hover-light) }

.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:last-child { border: 0px; }
.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:nth-child(odd) { background: var(--color-row-even) }
.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:nth-child(even) { background: var(--color-bg-row-odd) }
.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:nth-child(odd):hover,
.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:nth-child(even):hover { background: var(--color-hover-light) }

.ui-widget table.grid-scroll { display: block; overflow-y: auto; border-collapse: separate !important; border-spacing: 0px !important; }
.ui-widget table.grid-scroll thead th,
.ui-widget table.grid-scroll tfoot td { position: sticky; z-index: 10; }
.ui-widget table.grid-scroll thead th { background: var(--color-bg-grid-header); top: 0; border: 1px solid var(--color-border-grid) !important; }
.ui-widget table.grid-scroll tbody td { border: 1px solid var(--color-border-grid) !important; border-top: 0px !important; border-left: 0px !important; }
.ui-widget table.grid-scroll tbody tr > td:first-child { border-left: 1px solid var(--color-border-grid) !important; }
.ui-widget table.grid-scroll tfoot td { border: 1px solid var(--color-bg-white) !important; bottom: 0; }

.ui-widget input.mark_down-status { padding: 2px; padding-left: 8px; padding-right: 8px; } 

.ui-widget strong.mark_down-status,
.ui-widget span.mark_down-status { padding: 2px; padding-left: 8px; padding-right: 8px; border-radius: 5px; }

/* ============================================================================
   MENU ACCORDION
   ============================================================================ */

#menu-accordion .ui-accordion-header a { padding-left: 0; font-weight: 500; }
#menu-accordion .ui-accordion-header a div.icon { display: inline-block; width: 17px; }

#menu-accordion ul {
	list-style: disc;
	padding: 0px;
	margin: 0px;
	margin-top: 4px;
	padding-left: 8px;
}
#menu-accordion ul:first-child {
	margin-bottom: 4px;
}
#menu-accordion ul:first-child {
	margin-left: 15px;
}
#menu-accordion li {
	padding: 3px;
	margin-right: 0px;
	padding-right: 0px;
}

#menu-accordion div { border: 0px; padding: 0px; margin: 0px; }

#menu-accordion-divisao, #menu-accordion-icon { cursor: hand; cursor: pointer; background: var(--color-bg-white) }
#menu-accordion-divisao:hover { background: var(--color-menu-hover); }
#ajuda-divisao { background: var(--color-bg-white); }
#ajuda-divisao:hover { background: var(--color-menu-hover); }
#menu-accordion-icon:hover { background: var(--color-menu-hover); }

#menu-accordion .ui-accordion-content-active { background: var(--color-bg-menu-active); }


/* ============================================================================
   TABS
   ============================================================================ */

div.tabs { border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px; }
div.tabs { margin: 0.3em; background: transparent; }
div.tabs div.ui-tabs-panel { background: var(--color-bg-white); padding: 0.5em; border: 1px solid var(--color-border-tabs); border-left: 1px solid var(--color-border-tabs-light); border-top: 0px; }
div.tabs ul.ui-tabs-nav { border: 0px; border-bottom: 1px solid var(--color-border-tabs); background: transparent; font-weight: 400; }
div.tabs ul.ui-tabs-nav { padding-left: 0px; }
div.tabs ul.ui-tabs-nav a { color: var(--color-text-tabs); }
div.tabs ul.ui-tabs-nav li.ui-state-default { background: var(--color-bg-tabs-default); border: 1px solid var(--color-border-tabs-light); }
div.tabs ul.ui-tabs-nav li.ui-state-default:hover { background: var(--color-bg-tabs-hover); }
div.tabs ul.ui-tabs-nav li.ui-state-active { background: var(--color-bg-tabs-active); border: 1px solid var(--color-border-tabs); border-left: 1px solid var(--color-border-tabs-light); }
div.tabs ul.ui-tabs-nav li.ui-state-active:hover { background: var(--color-bg-tabs-active); }
div.tabs ul.ui-tabs-nav li.ui-state-active a { color: var(--color-text-tabs-active); }

div.tabs li.tab-blue { background: var(--color-tab-primary) !important; border: 1px solid var(--color-border-tabs-blue) !important; border-bottom: 0px !important; }
div.tabs li.tab-blue:hover { background: var(--color-tab-primary-hover) !important; border: 1px solid var(--color-border-tabs-blue-hover) !important; border-bottom: 0px !important; }
div.tabs li.tab-blue a { color: var(--color-text-white) !important; }

div.tabs-secundaria div.ui-tabs-panel { background: var(--color-bg-white); padding: 0.5em;
	border-width: 1px;
	border-style: solid;
	-webkit-border-image:
			-webkit-gradient(linear, 0 0, 0 100%, from(var(--color-tab-gradient)), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image:
			-webkit-linear-gradient(var(--color-tab-gradient), rgba(0, 0, 0, 0)) 1 100%;
	-moz-border-image:
			-moz-linear-gradient(var(--color-tab-gradient), rgba(0, 0, 0, 0)) 1 100%;
	-o-border-image:
			-o-linear-gradient(var(--color-tab-gradient), rgba(0, 0, 0, 0)) 1 100%;
	border-image:
			linear-gradient(to bottom, var(--color-tab-gradient), rgba(0, 0, 0, 0)) 1 100%;
}

div.tabs-border-bottom {
	border-radius: 4px;
}

.tabs { margin-top: 0.3em; }

.ui-tabs .ui-tabs-panel { padding: 5px 2px 0px 2px; }


/* ============================================================================
   TOOLBAR E BOTÕES
   ============================================================================ */

.ui-widget a { color: var(--color-text-default) }

.ui-widget input.ui-button { padding: .2em .5em; }

#div-TOOLBAR-BOTTOM li.ui-state-default,
#div-TOOLBAR-BOTTOM select.ui-state-default,
#div-TOOLBAR button.ui-state-default,
#div-TOOLBAR label.ui-state-default,
#div-TOOLBAR input.ui-state-default,
#div-TOOLBAR li.ui-state-default,
#div-TOOLBAR select.ui-state-default,
.ui-widget button.ui-state-default,
.ui-widget-content button.ui-state-default,
.ui-widget-content label.ui-state-default,
.ui-widget-content input.ui-state-default,
input.ui-state-default[type=button],
input.ui-state-default[type=submit] { background: var(--color-bg-button-default); color: var(--color-text-button); }
input.button-yellow[type=button],
input.button-yellow[type=submit]{ background: var(--color-button-yellow) !important;; color: var(--color-text-button); }

.ui-widget-content label.ui-state-active { background: var(--color-bg-button-active); }

#div-TOOLBAR button.ui-state-default:hover,
#div-TOOLBAR label.ui-state-default:hover,
#div-TOOLBAR input.ui-state-default:hover,
.ui-widget button.ui-state-default:hover,
.ui-widget-content button.ui-state-default:hover,
.ui-widget-content label.ui-state-default:hover,
.ui-widget-content input.ui-state-default:hover,
input.ui-state-default[type=button]:hover,
input.ui-state-default[type=submit]:hover { background: var(--color-bg-button-hover); color: var(--color-text-button); }
input.button-yellow[type=button].button-yellow:hover,
input.button-yellow[type=submit].button-yellow:hover { background: var(--color-button-yellow-hover) !important; color: var(--color-text-button); }

.grid .ui-widget-header { background: var(--color-bg-grid-header); color: var(--color-text-grid-header); }

.ui-widget button.button-blue,
.ui-widget-content button.button-blue { background: var(--color-button-blue); color: var(--color-text-white); }
.ui-widget button.button-blue:hover,
.ui-widget-content button.button-blue:hover { background: var(--color-button-blue-hover); color: var(--color-text-white); }
.ui-widget button.button-yellow,
.ui-widget-content button.button-yellow { background: var(--color-button-yellow); color: var(--color-text-button-yellow); }
.ui-widget button.button-yellow:hover,
.ui-widget-content button.button-yellow:hover { background: var(--color-button-yellow-hover); color: var(--color-text-button-yellow); }
.ui-widget button.button-green,
.ui-widget-content button.button-green { background: var(--color-button-green); color: var(--color-text-white); }
.ui-widget button.button-green:hover,
.ui-widget-content button.button-green:hover { background: var(--color-button-green-hover); color: var(--color-text-white); }
.ui-widget button.button-red,
.ui-widget-content button.button-red { background: var(--color-button-red); color: var(--color-text-white); }
.ui-widget button.button-red:hover,
.ui-widget-content button.button-red:hover { background: var(--color-button-red-hover); color: var(--color-text-white); }

.ui-widget .button-small button.button-blue span.ui-button-text,
.ui-widget fieldset dl dd button.button-blue span.ui-button-text,
.ui-widget .grid button.button-blue span.ui-button-text,
.ui-widget-content .grid button.button-blue span.ui-button-text,
.ui-widget .button-small button.button-green span.ui-button-text,
.ui-widget fieldset dl dd button.button-green span.ui-button-text,
.ui-widget .grid button.button-green span.ui-button-text,
.ui-widget-content .grid button.button-green span.ui-button-text,
.ui-widget .button-small button.button-red span.ui-button-text,
.ui-widget fieldset dl dd button.button-red span.ui-button-text,
.ui-widget .grid button.button-red span.ui-button-text,
.ui-widget-content .grid button.button-red span.ui-button-text,
.ui-widget-content .button-small button.button-yellow span.ui-button-text,
.ui-widget-content fieldset dl dd button.button-yellow span.ui-button-text,
.ui-widget-content .grid button.button-yellow span.ui-button-text,
.ui-widget-content fieldset dl dd button.button-white span.ui-button-text,
.ui-widget-content .grid button.button-white span.ui-button-text { padding: 0em 0.4em 0.1em 0.4em; }

.ui-widget button.btn_ajuda span.ui-button-text { padding: 0em 0.4em 0.1em 0.4em; }

.icon-edit { border: 1px solid var(--color-border-icon-edit); width: 30px; height: 23px; cursor: pointer; }

#div-TOOLBAR, .div-TOOLBAR-fixo {
	background: var(--color-bg-toolbar);
	z-index: 1000;
	padding-right: 2px;
}

.div-TOOLBAR-fixo {
	position: fixed;
	top: 0;
	width: 100%;
	padding-top: 10px;
}

.toolbar * {
	font-size: 11px;
}

.ui-widget table.grid-TOOLBAR tr {
	cursor: pointer;
}

#div-TOOLBAR div div #icons .ui-state-default {
	background: var(--color-bg-white);
}

#div-TOOLBAR div span.toolbar span button.ui-state-default,
#div-TOOLBAR div div.toolbar span button.ui-state-default {
	padding: 0;
	margin: 0;
	border: 1px solid var(--color-border-button);
}

#div-TOOLBAR div span.toolbar span button.ui-state-default input[type=checkbox],
#div-TOOLBAR div div.toolbar span button.ui-state-default input[type=checkbox] {
	padding: 0;
	margin: 0;
}

#div-TOOLBAR div div.toolbar {
	border-bottom: 1px solid var(--color-border-toolbar);
	padding-bottom: 2px;
}
#div-TOOLBAR div div.toolbar button {
	margin-top: 1px !important;
	margin-bottom: 1px !important;
}


/* ============================================================================
   ÁREA DE CABEÇALHO
   ============================================================================ */

#area-cabecalho {
	width: 100%;
	min-width: 900px;
	background: var(--color-primary);
	-webkit-box-shadow: 0px 3px 7px 0px var(--color-shadow);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 3px 7px 0px var(--color-shadow);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 3px 7px 0px var(--color-shadow);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#area-cabecalho #div-cabecalho {
	padding: 0px 10px 0px 10px;
}

#div-cabecalho-dashboard {
	position: absolute;
	padding: 15px;
	width: 100%;
	min-width: 900px;
	background: var(--color-bg-cabecalho-dashboard);
	-webkit-box-shadow: 0px 3px 7px 0px var(--color-shadow);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 3px 7px 0px var(--color-shadow);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 3px 7px 0px var(--color-shadow);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#div-cabecalho-dashboard a {
	text-decoration: none;
}

#div-cabecalho-pcs {
	position: absolute;
	right: 0px;
	max-height: 400px;
	overflow: auto;
	padding: 15px;
	background: var(--color-bg-white);
	border: 1px solid var(--color-border-cabecalho);
	border-top: 0px;

	-webkit-box-shadow: 0px 1px 4px 0px var(--color-shadow);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 1px 4px 0px var(--color-shadow);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 1px 4px 0px var(--color-shadow);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#tab-menu-pcs *, #tab-menu-pcs-cliente * {
	font-size: 14px;
}

#tab-menu-pcs tr td, #tab-menu-pcs-cliente tr td {
	font-size: 14px;
	padding: 6px;
}

#tab-menu-pcs tr td, #tab-menu-pcs-cliente tr td {
	color: var(--color-text-tab-menu-pcs);
}

#tab-menu-pcs tr td.info, #tab-menu-pcs-cliente tr td.info {
	font-weight: bold;
	color: var(--color-text-tab-menu-pcs-info);
}

#tab-menu-pcs tr.item-menu:hover, #tab-menu-pcs-cliente tr.item-menu:hover {
	background: var(--color-bg-cabecalho-consumo-hover);
}

#div-cabecalho-new {
	position: absolute;
	right: 0px;
	width: 700px;
	padding: 5px;
	background: var(--color-bg-white);
	border: 1px solid var(--color-border-cabecalho);
	border-top: 0px;
	-webkit-box-shadow: 0px 1px 4px 0px var(--color-shadow);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 1px 4px 0px var(--color-shadow);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 1px 4px 0px var(--color-shadow);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#div-cabecalho-consumo {
	position: absolute;
	right: 0px;
	width: 300px;
	background: var(--color-bg-white);
	border: 1px solid var(--color-border-cabecalho);
	border-top: 0px;
	-webkit-box-shadow: 0px 1px 4px 0px var(--color-shadow);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 1px 4px 0px var(--color-shadow);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 1px 4px 0px var(--color-shadow);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#div-cabecalho-notificacao {
	position: absolute;
	right: 0px;
	width: 450px;
	background: var(--color-bg-white);
	border: 1px solid var(--color-border-cabecalho);
	border-top: 0px;
	-webkit-box-shadow: 0px 1px 4px 0px var(--color-shadow);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 1px 4px 0px var(--color-shadow);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 1px 4px 0px var(--color-shadow);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#area-central {
	min-width: 900px;
}

.li-cabecalho-consumo { 
	color: var(--color-text-cabecalho-consumo);
}
.li-cabecalho-consumo:hover { 
	color: var(--color-text-cabecalho-consumo-hover);
	background: var(--color-bg-cabecalho-consumo-hover); 
}


/* ============================================================================
   BOXES
   ============================================================================ */

.box-title {
	font-family: inherit;
	font-size: 18px;
	padding: 8px 8px 8px 15px;
	color: var(--color-text-box-title);
	background: var(--color-bg-box-title);
	border-bottom: 1px solid var(--color-border-box);
}

.box {
	margin:0 0 10px 0;
	position:relative;
	border:1px solid;
}

.box h2, .box p, .box table {
	margin:0;
}

.box .right {
	text-align: right;
}

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

.box table {
	width:100%;
	margin:0;
	padding:0;
	border:0;
	border-spacing:0;
	outline:0;
	vertical-align:baseline;
	background:transparent
}

.box th, .box td {
	padding:4px 10px;
	font-size:13px;
	text-align:left;
}

.box p, .box td {
	font-size:12px;
}

.box td {
	border-bottom: 1px solid var(--color-bg-white);
}

.box table.grid-basic tr:hover td {
	background: var(--color-bg-grid-basic-hover);
	border-bottom: 1px solid var(--color-border-box-grid-hover);
}

.box table.grid-basic tr:nth-child(even) td {
	background: var(--color-bg-grid-basic-even);
	border-bottom: 1px solid var(--color-bg-white);
}

.box table.grid-basic tr:hover:nth-child(even) td {
	background: var(--color-bg-grid-basic-hover);
	border-bottom: 1px solid var(--color-border-box-grid-hover-even);
}

.box tr:last-child td:first-child {
	-moz-border-bottomleft: 1px; -webkit-border-bottom-left-radius: 1px; -khtml-border-bottom-left-radius: 1px; border-bottom-left-radius: 1px;
}

.box tr:last-child td:last-child {
	-moz-border-radius-bottomright: 1px; -webkit-border-bottom-right-radius: 1px; -khtml-border-bottom-right-radius: 1px; border-bottom-right-radius: 1px;
}

.box h2 {
	font-size: 14px;
	font-weight: normal;
	padding:8px 10px;
	cursor:hand;
	cursor:pointer;
}

.utils>a, .utils>div {
	position:absolute;
	top:5px;
	right:10px;
	padding:4px 8px;
}

.utils>div div {
	display: inline-block;
}

.utils>div div {
	display: inline-block;
}

.utils a {
	color: var(--color-text-utils);
	font-size: 12px;
	cursor: hand;
	cursor: pointer;
}

.box p {
	padding:10px;
}

.box {
	background: var(--color-bg-white);
	border-color: var(--color-border-box)
}

.box > h2 {
	border-bottom: 1px solid var(--color-border-box-h2);
}

.box > h2 {
	background: var(--color-bg-box-h2);
}


/* ============================================================================
   CURSOR E SELEÇÃO
   ============================================================================ */

.mouse-default, .mouse-default * {
	cursor: default;
}

.mouse-hand {
	cursor: hand;
	cursor: pointer;
}

.mouse-block {
	cursor: not-allowed;
}

.mouse-help {
	cursor: help;
}

.mouse-move {
	cursor: m;
}

.no-selection-all * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* ============================================================================
   CORES E LINKS
   ============================================================================ */

.link {
	text-decoration: underline;
}

.gray, .gray * { color: var(--color-text-gray); }
.blue, .blue * { color: blue; }
.red, .red * { color: red; }


/* ============================================================================
   BOTÕES DO MENU TOPO
   ============================================================================ */

.botao-menu-topo {
	padding-left: 5px;
	padding-right: 5px;
}

.botao-menu-topo, .botao-menu-topo span {
	font-size: 13px;
	font-weight: 400;
	background: transparent;
	color: var(--color-text-white);
	cursor: default;
	cursor: pointer;
}

.botao-menu-topo i {
	font-size: 12px;
}

.botao-menu-topo:hover, .botao-menu-topo-hover {
	background: var(--color-primary-hover);
	color: var(--color-text-white);
	cursor: default;
	cursor: pointer;
}

.botao-topo {
	font-size: 13px;
	font-weight: 400;
	border: 0px;
	background: transparent;
	color: var(--color-text-white);
	margin-left: 0px;
	display: inline-block;
	padding: 3px;
	padding-left: 7px;
	padding-right: 7px;
	cursor: default;
	cursor: pointer;
}

.botao-topo:hover, .botao-topo-hover, .botao-topo-hovered {
	border: 0px;
	background: var(--color-primary-hover);
	color: var(--color-text-white);
	margin-left: 0px;
	display: inline-block;
	cursor: default;
	cursor: pointer;
}

.botao-entendi {
	font-size: 12px;
	font-weight: 400;
	border: 1px solid var(--color-border-toolbar);
	background: var(--color-bg-white);
	color: var(--color-text-button-yellow);
	margin-left: 5px;
	display: inline;
	padding: 2px;
	padding-left: 4px;
	padding-right: 4px;
	cursor: default;
	cursor: pointer;
}

.botao-entendi:hover {
	border: 0px;
	background: var(--color-primary-hover);
	color: var(--color-text-white);
	display: inline;
	cursor: default;
	cursor: pointer;
}


/* ============================================================================
   SPANS ESPECIAIS (RECURSO, TAREFA, ETC)
   ============================================================================ */

.sp-recurso_extra {
	font-size: 10px;
	background: var(--color-sp-recurso-extra-bg);
	border: 1px solid transparent;
	color: var(--color-sp-recurso-extra-text);
	padding: 0px;
	padding-left: 3px;
	padding-right: 3px;
	cursor: hand; cursor: pointer;

	border-radius: 7px;
}
.sp-ok-item {
	min-width: 17px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: var(--color-sp-ok-item);
	padding: 0px;
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 3px;
	cursor: hand;
	cursor: pointer;
	float: right;

	border-radius: 7px;
}
.sp-tarefa-menu, .sp-tarefa-item {
	min-width: 12px;
	text-align: center;
	font-size: 10px;
	background: var(--color-sp-tarefa-bg);
	border: 1px solid transparent;
	color: var(--color-text-white);
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	cursor: help;

	border-radius: 7px;
}
.sp-tarefa-item {
	background: var(--color-sp-tarefa-item-bg);
	color: var(--color-text-white);
	font-weight: bold;
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
}
.sp-tarefa {
	min-width: 12px;
	text-align: center;
	font-size: 10px;
	background: var(--color-sp-tarefa-bg);
	border: 1px solid transparent;
	color: var(--color-text-white);
	padding: 0px;
	padding-left: 3px;
	padding-right: 3px;
	cursor: help;
	position: absolute;
	right: 5px;
	top: 7px;

	border-radius: 7px;
}
.sp-tarefa-area {
	position: absolute;
	right: 7px;
	top: 7px;
}


/* ============================================================================
   AUTOCOMPLETE
   ============================================================================ */

.ui-autocomplete {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1;
}
* html .ui-autocomplete {
	height: 400px;
}


/* ============================================================================
   REFERÊNCIAS
   ============================================================================ */

ul.ul-referencia, ul.ul-referencia ul { line-height: normal; margin: 0px; padding-left: 15px; }
ul.ul-referencia li, ul.ul-referencia ul li { line-height: normal; }

#accordion-referencia-item h3 a { padding-top: 2px; padding-bottom: 1px; }
#accordion-referencia-item-base h3 a { padding-top: 2px; padding-bottom: 1px; }
#accordion-referencia-item-base ul { margin-top: 0px; margin-bottom: 2px; }
#dialog-referencia-item ul li { cursor: move; }
.area-referencia-item { height: 350px; }
.area-referencia-item-base { height: 350px; }

.referencia-item-final ul {
	margin: 0px;
	padding: 0px;
	padding-left: 25px;
	line-height: 15px;
}
.referencia-item-final ul li {
	margin: 0px;
	padding: 0px;
	line-height: 15px;
}

.span-btn-ajuda { margin: 2px; padding: 3px; background: var(--color-primary-hover); color: var(--color-text-white); float: right; }
.ui-widget button.btn_ajuda span.ui-button-text { padding: 0em 0.4em 0.1em 0.4em; }

#tipArea p, .tip-area p { margin: 5px; }
#tipArea, .tip-area { border: 1px solid var(--color-border-default); }
.span-btn-tip { background: var(--color-primary-hover); color: var(--color-text-white); }


/* ============================================================================
   UPLOAD DE ARQUIVOS
   ============================================================================ */

.upload-file-upload {
	background-color: var(--color-upload-bg);
	color: var(--color-text-white);
	padding: 3px 5px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
}
.upload-file-upload:hover {
	background-color: var(--color-upload-hover);
}

.upload-file-input {
	display: inline-block;
	position: relative;
}

.upload-file-input-group:not(:first-child) {
	margin-top: 3px;
}

.upload-file-name {
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
}


/* ============================================================================
   MENSAGENS OFFLINE
   ============================================================================ */

#offline-message-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg-offline-overlay); /* Cor preta com 50% de opacidade */
	z-index: 999999999998; /* Z-index menor que o da mensagem de erro para que o fundo fique atrás */
	display: none;
}

.offline-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-bg-offline-message);
	color: var(--color-text-offline);
	text-align: center;
	padding: 20px;
	border-radius: 10px;
	z-index: 999999999999; /* Z-index maior para que fique sobre o fundo semitransparente */
	display: none;
}

.offline-message-system {
	background-color: var(--color-bg-offline-system);
}

.offline-message i {
	font-size: 48px;
	margin-bottom: 10px;
}

.offline-message h2 {
	font-size: 24px;
	margin-bottom: 5px;
}

.offline-message p {
	font-size: 18px;
	line-height: 1;
}


/* ============================================================================
   IMAGENS
   ============================================================================ */

div.image-cropper {
	width: 45px;
	height: 45px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}
img.image-rounded {
	display: inline;
	margin: 0px;;
	padding: 0px;;
	height: 60px;
	width: 45px;
}


/* ============================================================================
   PROGRESS BARS
   ============================================================================ */

#volume_base .ui-progressbar-value {
	background-color: blue;
}
#volume_arquivos .ui-progressbar-value {
	background-color: green;
}
#volume_ftp .ui-progressbar-value {
	background-color: yellow;
}
#volume_total .ui-progressbar-value {
	background-color: red;
}


/* ============================================================================
   MENU INTERNO
   ============================================================================ */

.menu-interno, .menu-botao {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu-interno li, .menu-botao li {
	margin: 3px;
	padding: 0.4em;
	font-size: 13px;
	min-height: 14px;
	cursor: pointer;
	user-select: none;
}

.menu-interno li.ui-state-highlight, .menu-botao li.ui-state-highlight {
	background: var(--color-bg-white);
}

.menu-interno li.ui-state-highlight:hover, .menu-botao li.ui-state-highlight:hover {
	background: var(--color-bg-menu-interno-hover);
}

.menu-interno li.ui-state-active {
	background: var(--color-bg-menu-interno-active);
	color: var(--color-text-menu-active);
	font-weight: bold;
}

.menu-botao li.ui-state-highlight {
	margin-top: 1px;
}

#tabs-MENU {
	padding: 5px;
	border: 1px solid var(--color-border-tabs-menu);
}

#tabs-MENU div {
	padding-right: 5px;
}

.tabs-MENU-fixo {
	position: fixed;
	top: 0;
	padding-top: 2px;
	border: 1px solid var(--color-border-tabs-menu-fixo);
}


/* ============================================================================
   GRID NOWRAP
   ============================================================================ */

.ui-widget table.grid-NOWRAP {
	table-layout: fixed;
}

.ui-widget table.grid-NOWRAP thead tr th {
	white-space: nowrap;
	overflow: hidden;
	font-weight: bold;
	text-overflow: ellipsis;
	padding: 0;
	user-select: none;
}

.ui-widget table.grid-NOWRAP tbody tr td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-widget table.grid-NOWRAP thead tr th div.text {
	padding: .6em .2em;
}

.ui-widget table.grid-NOWRAP thead tr th div.resize {
	float: right;
	cursor: col-resize;
	z-index: 10000;
}

.ui-widget table.grid-NOWRAP thead tr th div.resize:hover {
	background: var(--color-bg-cabecalho-consumo-hover);
}

.ui-widget table.grid-NOWRAP tbody tr td.no-pad {
	padding: 0;
	padding-top: 3px;
	padding-bottom: 3px;
}

.ui-widget table input[type=checkbox] {
	margin-left: 0;
	margin-right: 0;
}


/* ============================================================================
   UTILITÁRIOS GERAIS
   ============================================================================ */

.padding-0 { padding: 0px; }

.button-x { width: 20px; }

.w-15 { max-width: 15px; }
.w-20 { max-width: 20px; }
.w-25 { max-width: 25px; }
.w-30 { max-width: 30px; }
.w-40 { max-width: 40px; }
.w-50 { max-width: 50px; }
.w-55 { max-width: 55px; }
.w-65 { max-width: 65px; }
.w-70 { max-width: 70px; }
.w-75 { max-width: 75px; }
.w-85 { max-width: 85px; }
.w-100 { max-width: 100px; }
.w-125 { max-width: 125px; }
.w-150 { max-width: 150px; }
.w-200 { max-width: 200px; }
.w-250 { max-width: 250px; }
.w-300 { max-width: 300px; }
.w-400 { max-width: 400px; }

select.w-15 { max-width: calc(15px + 6px); }
select.w-20 { max-width: calc(20px + 6px); }
select.w-25 { max-width: calc(25px + 6px); }
select.w-30 { max-width: calc(30px + 6px); }
select.w-40 { max-width: calc(40px + 6px); }
select.w-50 { max-width: calc(50px + 6px); }
select.w-55 { max-width: calc(55px + 6px); }
select.w-65 { max-width: calc(65px + 6px); }
select.w-70 { max-width: calc(70px + 6px); }
select.w-75 { max-width: calc(75px + 6px); }
select.w-85 { max-width: calc(85px + 6px); }
select.w-100 { max-width: calc(100px + 6px); }
select.w-125 { max-width: calc(125px + 6px); }
select.w-150 { max-width: calc(150px + 6px); }
select.w-200 { max-width: calc(200px + 6px); }
select.w-250 { max-width: calc(250px + 6px); }
select.w-300 { max-width: calc(300px + 6px); }
select.w-400 { max-width: calc(400px + 6px); }

.w-25p { max-width: 25%; }
.w-50p { max-width: 50%; }
.w-60p { max-width: 60%; }
.w-65p { max-width: 65%; }
.w-70p { max-width: 70%; }
.w-75p { max-width: 75%; }
.w-85p { max-width: 85%; }
.w-90p { max-width: 90%; }
.w-100p { width: 95%;  max-width: 95%; }
.w-100f { width: 100%;  max-width: 100%; }
.w-100x { min-width: 100% !important; }

select.w-25p { max-width: calc(25% + 6px); }
select.w-50p { max-width: calc(50% + 6px); }
select.w-60p { max-width: calc(60% + 6px); }
select.w-65p { max-width: calc(65% + 6px); }
select.w-70p { max-width: calc(70% + 6px); }
select.w-75p { max-width: calc(75% + 6px); }
select.w-85p { max-width: calc(85% + 6px); }
select.w-90p { max-width: calc(90% + 6px); }
select.w-100p { width: calc(95% + 6px); max-width: calc(95% + 6px); }
select.w-100f { width: calc(100% + 6px); max-width: calc(100% + 6px); }
select.w-100x { min-width: calc(100% + 6px) !important; }

.hide { display: none; }
.hidden { visibility: hidden; }
th.hidden, td.hidden { border: 0px; }

.border-radius-2 {
	border-radius: 4px;
}

.border-radius-5 {
	border-radius: 7px;
}

.small-novo {
	background: var(--color-small-novo-bg);
	color: var(--color-small-novo-text);
	padding-left: 3px;
	padding-right: 3px;
}

.l-MODERN { }
.l-MOBILE { display: none; }


/* ============================================================================
   DATEPICKER
   ============================================================================ */

.ui-datepicker * { font-size: 10px; font-weight: normal; }
.ui-datepicker .ui-state-default { font-weight: normal; }
.ui-datepicker .ui-state-active { font-weight: bold; }
.ui-datepicker .ui-state-active { font-weight: bold; }


/* ============================================================================
   DIALOG E ÍCONES
   ============================================================================ */

#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}


/* ============================================================================
   OVERLAY E CARREGAMENTO
   ============================================================================ */

.ui-widget-overlay-dark
{
	opacity: .40 !important;
	filter: Alpha(Opacity=40) !important;
	background: var(--color-bg-overlay-dark) !important;
	position: fixed;
}

.carregando-centered {
	background: var(--color-bg-carregando);
	border: 1px solid var(--color-border-toolbar);
	z-index: 999999999;
	position: fixed;
	width: 25%;
	margin-top: -6.25%;
	top: 50%;
	left: 50%;
	margin-left: -12.5%
}

.carregando-wait { color: var(--color-text-carregando); }

/*
* ==========================================================================
* ESTILOS PARA DIALOGS E Z-INDEX
* ==========================================================================
* Estilo necessário para o Dialog, para que o z-index seja controlado corretamente e checkboxes funcionarem corretamente
*/
.ui-widget-overlay { z-index: 89999999; }
.ui-dialog-content { z-index: 99999999; }
.ui-dialog { z-index: 99999998; }

/*
* ==========================================================================
* ESTILOS PARA INTERAÇÕES E HOVER
* ==========================================================================
*/
#div_clicked {
    opacity: 0.3;
}

#div_clicked:hover {
    opacity: 1;
}

/*
* ==========================================================================
* MEDIA QUERIES PARA RESPONSIVIDADE
* ==========================================================================
*/
@media screen and (max-width: 600px) {
    .ui-tabs .ui-tabs-panel { padding: 2px 2px 0px 2px }

    .ui-widget dl { padding:5px; margin:0px; }
    .ui-widget dt { text-align:left; width:100%; padding:0px; margin:0px; }
    .ui-widget dd { width:100%; padding:0px; padding-left:5px; margin:0px; }

    .l-MODERN { display: none; }
    *.l-MOBILE { 
        /* Classe vazia mantida para compatibilidade */ 
    }
    .ui-widget table.grid td.l-MOBILE, .ui-widget table.grid th.l-MOBILE { display: table-cell; }

    .ui-widget input.text, .ui-widget textarea.text, .ui-widget select.text { max-width: 300px; }
    .ui-widget input.text-small { max-width: 300px; }
    .ui-widget select.text { max-width: 300px; }

    .w-300 { max-width: 250px; }
    .w-400 { max-width: 300px; }

    .toolbar-filtro { max-height: 200px; overflow: auto; }
}

/*
* ==========================================================================
* ESTILOS COM CORES DINÂMICAS (USANDO CSS VARIABLES)
* ==========================================================================
*/
#area-cabecalho { background: var(--color-primary) !important; }
.botao-menu-topo:hover, .botao-menu-topo-hover,
.botao-topo:hover, .botao-topo-hover, .botao-topo-hovered,
.botao-entendi:hover,
.sp-tarefa-item,
.span-btn-ajuda,
.span-btn-tip { background: var(--color-primary-hover) !important; }

.ui-widget table.grid tr:not(.no-hover):nth-child(even):hover td, .ui-widget table.grid tr:not(.no-hover):hover td,
.ui-widget table.grid tr td.hover:hover,
.ui-widget table.grid-group tr.even:hover td, .ui-widget table.grid-group tr:hover td,
.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:nth-child(even):hover,
.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:nth-child(even):hover { background: var(--color-hover-light) !important; }

.ui-widget table.grid tr:nth-child(even) td,
.ui-widget table.grid-group tr.even td,
.ui-widget table.grid tr:nth-child(odd) td div.grid-div div.grid-div-line:nth-child(even),
.ui-widget table.grid tr:nth-child(even) td div.grid-div div.grid-div-line:nth-child(odd),
.box table.grid-basic tr:hover td,
.box table.grid-basic tr:hover:nth-child(even) td { background: var(--color-row-hover) !important; }
.box table.grid-basic tr:nth-child(even) td { background: var(--color-row-even); }
input, select, textarea, button, a { outline-color : var(--color-outline) !important; }

.ui-widget table.grid tr.selected td,
.ui-widget table.grid tr.selected:nth-child(odd) td,
.ui-widget table.grid tr.selected:nth-child(even) td { background: var(--color-selected) !important; }

#menu-accordion-divisao:hover,
#ajuda-divisao:hover,
#menu-accordion-icon:hover { background: var(--color-menu-hover); }

div.tabs li.tab-blue { background: var(--color-tab-primary) !important; }
div.tabs li.tab-blue:hover { background: var(--color-tab-primary-hover) !important; }

input[type=checkbox],
input[type=radio] {
    border: 1.5px solid var(--color-checkbox-border);
}

input[type=checkbox]:focus,
input[type=radio]:focus {
    border: 1.5px solid var(--color-checkbox-border-focus);
    background-color: var(--color-checkbox-bg-focus);
}

input[type=checkbox]:hover,
input[type=radio]:hover {
    border: 1.5px solid var(--color-checkbox-border-focus);
    background-color: var(--color-checkbox-bg-focus);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    border: 1.5px solid var(--color-checkbox-border-focus);
    background-color: var(--color-primary);
}

.cms-checkbox.cms-checked {
    background: var(--color-primary) !important;
    border-color: var(--color-checkbox-border-focus) !important;
}

.menu-interno li.ui-state-highlight:hover { background: var(--color-row-hover); }
.menu-interno li.ui-state-active { background: var(--color-row-hover);  }

.menu-botao li.ui-state-highlight:hover { background: var(--color-row-hover); }

div.bell-cropper i {
    display: inline-block;
    border-radius: 100px;
    border: 5px solid var(--color-primary);
    padding: 0.5em 0.5em;
    margin: 0.5em 0.6em 0.5em 0em;
    color: var(--color-text-white);
    background: var(--color-bell-bg);
    font-size: 11px;
    width: 11px;
}
div.bell-cropper i:hover {
    border: 5px solid var(--color-primary);
    background: var(--color-bell-hover-bg);
}
div.bell-selected i {
    border: 5px solid var(--color-border-bell-selected);
    color: var(--color-text-bell-selected);
}
div.bell-selected i:hover {
    border: 5px solid var(--color-border-bell-selected);
    background: var(--color-bell-hover-bg);
}
div.bell-red i {
    border: 5px solid var(--color-primary);
    background: var(--color-bell-red-bg);
    color: var(--color-text-bell-red);
}
div.bell-red i:hover, div.bell-red-selected i {
    border: 5px solid var(--color-text-bell-red);
    background: var(--color-bell-red-hover-bg);
}
div.bell-red-selected i:hover {
    border: 5px solid var(--color-text-bell-red);
    background: var(--color-bell-red-selected-hover);
}
div.bell-cropper strong {
    position: absolute;
    border-radius: 100px;
    border: 1px solid var(--color-border-bell);
    padding: 0.1em 0.3em 0.2em 0.3em;
    margin: 28px 16px;
    min-width: 10px;
    color: var(--color-bell-badge-text);
    background: var(--color-bell-badge-bg);
    font-size: 9px;
    text-align: center;
}

div.item-notificacao {
    margin: 5px;
    padding: 5px;
    color: var(--color-text-notificacao);
    border: 1px solid var(--color-border-notificacao);
    text-align: justify;

    display: grid;
    grid-template-columns: 20% 80%;
}

div.item-notificacao:hover {
    color: var(--color-text-notificacao-hover);
	background: var(--color-bg-notificacao-hover);
}