/*****************************************/
/*              SKIN PORTAL LIGHT        */
/*****************************************/
/************************************************************/
/*Para personalizar o CSS do Webrun, recomendamos a criação */
/*de um arquivo chamado custom.css dentro desta pasta.      */
/*                                                          */
/* OBSERVAÇÃO: Adicionar !important ao final do atributo.   */
/* Exemplo: background: red!important;                      */
/************************************************************/
/*****************************************/
/*              Font Import              */
/*****************************************/
.WFRIframeForm {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(25, 25, 25, 0.65)!important;
    -moz-box-shadow: 1px 1px 4px 1px rgba(25, 25, 25, 0.65)!important;
    -o-box-shadow: 1px 1px 4px 1px rgba(25, 25, 25, 0.65)!important;
    box-shadow: 1px 1px 4px 1px rgba(25, 25, 25, 0.65)!important;
}

.WFRIframeForm {
    width: auto !important;
    background-color: #D2D2D2!important;
    border: solid 1px #D2D2D2!important;
    border-top: none!important;
    border-radius: 4px !important;
}

.WFRIframeForm-Active {
    background-color: #f7f7f7!important;
    border: solid 1px #f1f1f1!important;
    border-top: none !important;
}

.WFRIframeForm .Title {
    color: #676767!important;
}

#minimizedFloatingDivs .WFRIframeForm .Title {
    left: 0;
} 

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}

/* Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic-webfont.eot');
    src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 200;
    font-style: normal;
}

#box-icons {
  position: relative;
  top: 0 !important;                                      
  width: 100% !important;
  height: 260px !important;
  margin-right: 165px;
  overflow: auto;
}

/* Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
}

/* Semibold */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: 500;
    font-style: normal;
}

/* Semibold Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;
    font-weight: 700;
    font-style: normal;
}

/* Bold Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
    font-weight: bold;
    font-weight: 700;
    font-style: italic;
}

/* Extra Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBold-webfont.eot');
    src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
    font-weight: 900;
    font-style: normal;
}

/* Extra Bold Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
    src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
    font-weight: 900;
    font-style: italic;
}

/* -- Maker web font-icon */
@font-face {
  font-family: 'webicons-maker';
  src: url('fonts/webicons-maker.eot?24407687');
  src: url('fonts/webicons-maker.eot?24407687#iefix') format('embedded-opentype'),
       url('fonts/webicons-maker.woff2?24407687') format('woff2'),
       url('fonts/webicons-maker.woff?24407687') format('woff'),
       url('fonts/webicons-maker.ttf?24407687') format('truetype'),
       url('fonts/webicons-maker.svg?24407687#webicons-maker') format('svg');
  font-weight: normal;
  font-style: normal;
}

.HTMLNavigationFormButton a:before {
  font-family: "webicons-maker";
  margin-top: 14px;
  font-style: normal;
  font-weight: 100;
  font-size: 19px;
  speak: none;
  display: inline-block;
  color: #89949E;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.HTMLNavigationFormButton:hover a:before {
  color: #ff9428;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif, arial;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  color: #6e6e6e;
  background: #fefefc;
}

@media screen and (max-width: 422px){
  body {
      overflow: hidden!important;
  }
}

.component {
  background: #e0dfe3;
}

.buttonComponent {
  background: #e0dfe3;
}

.navigation {
  background: #F2F2EE;
}

a {
  text-decoration: none;
  color: #62727B;
}
a:focus {
  outline: none;
}
a:hover {
  text-decoration: none;
  color: #000000;
}
a.cont {
  text-decoration: none;
  color: #000000;
}
a.cont:hover {
  text-decoration: none;
  color: #000000;
}

img[src=""] {
  border: 1px solid #EFEFEF;
}

td {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  color: #000000;
}
.b {
  font-size: 11px;
  font-weight: bold;
}
.u {
  font-weight: bold;
  text-decoration: underline;
}

.des {
  color: #FE5400;
}

.label {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
}

::selection { background: #1f6a8f; color: #fff; } 
::-moz-selection { background: #1f6a8f; color: #fff; }

.edit {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  padding-left: 8px;
}

.editMark {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-top: 1px solid #ff0000;
  border-bottom: 1px solid #ff0000;
  background: #E6F2FF;
}

.button {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  outline: none;
}

.duallist {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
}

.duallistMark {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-top: 1px solid #ff0000;
  border-bottom: 1px solid #ff0000;
  background: #E6F2FF;
}

.lookup {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  padding-left: 8px;
}

.lookupMark {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-top: 1px solid #ff0000;
  border-bottom: 1px solid #ff0000;
  background: #E6F2FF;
}

.checkbox {
}

.checkboxMark {
}

.editLogon {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  font-weight: bold;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.calendar{
	height: 100%;
}
.calendar>tbody>tr>td>table {
  font-size: 12px;
  background: #cccccc;
  width: 101%;
  color: #000000;
}

.calendarHeader {
  color: #000000;
  background: #f2f2f2;
}

.calendarLine1 {
  color: #000000;
  background: #ffffff;
}

.calendarLine2 {
  color: #000000;
  background: #ffffff;
}

.lookupSearch {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 0px solid #FFFFFF;
  border-bottom: 1px solid #D3D1D1;
}

.lookupSearchInput {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 0px solid #D3D1D1;
  border-left: 0px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  background: #E5E5E5;
}

.tabButton {
  background: #F6F6F4;
}

.tabBack {
  background: #ffffff;
  border-top: 1px solid #D3D1D1;
}

.clickText {
  text-decoration: none;
  color: #000000;
}
.clickText:hover {
  text-decoration: none;
  color: #000000;
}
.clickText.cont {
  text-decoration: none;
  color: #000000;
}
.clickText.cont:hover {
  text-decoration: none;
  color: #000000;
}

.cur {
  cursor: pointer;
}

.grid {
  margin: 1px;
}

.gridMark {
  border: 1px solid #4ABA58;
  margin: 0px;
  border-radius: 4px;
}

.gridDiv {
  border: 1px solid #C7C7C7;
  border-radius: 2px;
}

.gridDiv:hover {
  border: 1px solid #A0A0A0;
}
.exitProgressBar {
  background: #FFFFFF;
  width: 100%;
  height: 100%;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666;
  border-right: 1px solid #666666;
  border-bottom: 1px solid #D3D1D1;
  display: none;
  cursor: pointer;
}

.divProgressBar {
  z-index: 99999999;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}

.searchInteger {text-align: right;}
.searchDouble {text-align: right;}
.searchTime {text-align: left;}
.searchDate {text-align: left;}
.searchBoolean {text-align: left;}
.searchString {text-align: left;}

input, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

textarea {
  overflow: auto;
}

/*****************************************/
/* HTMLButton: Componente Botão          */
/*****************************************/
.HTMLButton button {
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  background: #07c;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  outline: none;
  overflow: hidden;
}

.HTMLButton button:not([class*="HTMLNavigation"] button){
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.HTMLButton button:hover {
  background:#ff9428;
  border: solid 1px #07c;
}

.HTMLButton button:focus {
  border: 2px solid #07c;

}

.HTMLButton button:active {
  background: #07c;
}

.HTMLButton button:disabled {
  cursor: default;
  background: #EAEAEA;
  color: #A1AAB3;
  border: 1px solid #D9DDE0;
  outline: none;
}

.HTMLButton button[readonly=readonly] {
  cursor: default;
}

.HTMLButton button,.HTMLButton span {
  font-family: 'Open Sans', sans-serif, arial;
  font-weight: 500;
}

.HTMLButton span {vertical-align: middle;}
.HTMLButton img {vertical-align: middle;}

/*****************************************/
/* Div que bloqueia acesso ao formulário */
/*****************************************/
.formViewDiv {
  background: #FFFFFF;
  filter: alpha(opacity = 1);
  opacity: 0;
  position: absolute;
  z-index: 99998;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

/*****************************************/
/* HTMLTabArea: Área do Form/Componentes */
/*****************************************/
.HTMLTabArea {
  background: #1f6a8f;
  height: 100%;
  left: 0px;
  z-index: 1;
  display: none;
  position: absolute;
  width: 100%;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/*****************************************/
/* HTMLTab: Botão das Abas (Formulário)  */
/*****************************************/
.HTMLTab {
  background: #F9F9F9;
  color: #A2A9B9;
  font-weight: 500;
  cursor: pointer;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: inline;
  float: left;
  height: 21px;
  margin-right: 3px;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 0px -1px 1px 1px rgba(61, 63, 68, 0.1);
  z-index: 1;
}

.HTMLTab div {
  float: left;
}

.HTMLTab span,.HTMLTab img {
  vertical-align: middle;
}

.HTMLTab-Selected {
  position: relative;
  font-weight: 500;
  color: #646C8C;
  background: #fefefc;
  float: left;
  height: 21px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-right: 3px;
  display: inline;
  line-height: 20px;
  cursor: pointer;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0px -4px 4px 2px rgba(61, 63, 68, 0.24);
  box-shadow: 3px -2px 7px -1px rgba(61, 63, 68, 0.32);
  z-index: 9;
}

.HTMLTab-Selected div {
  float: left;
}

/*****************************************/
/* HTMLTabController: Área das Abas      */
/*****************************************/
.HTMLTabController {
  top: 0px;
  left: 0px;
  width: 100%;
  height: initial !important;
  z-index: 2;
  position: absolute;
  background-color: #E9ECEC;
}

/*****************************************/
/* HTMLTabContainer: Container da Aba    */
/*****************************************/
.HTMLTabContainer {
  width: 100%;
  position: absolute;
  z-index: 1;
}

/*****************************************/
/* HTMLGroupBox: Componente Moldura      */
/*****************************************/
.HTMLGroupBox-Top {
  border-top: 1px solid #BFB8BF;
  border-left: 0px solid !important;
  border-right: 0px solid !important;
  border-bottom: 0px solid !important;
  border-radius: 0px!important;
}

.HTMLGroupBox-Left {
  border-left: 1px solid #BFB8BF;
  border-top: 0px solid !important;
  border-right: 0px solid !important;
  border-bottom: 0px solid !important;
  border-radius: 0px!important;
}

.HTMLGroupBox-Right {
  border-right: 1px solid #BFB8BF;
  border-top: 0px solid !important;
  border-left: 0px solid !important;
  border-bottom: 0px solid !important;
  border-radius: 0px!important;
}

.HTMLGroupBox-Bottom {
  border-bottom: 1px solid #BFB8BF;
  border-top: 0px solid !important;
  border-left: 0px solid !important;
  border-right: 0px solid !important;
  border-radius: 0px!important;
}

.HTMLGroupBox {
  border: 1px solid #D3D1D1;
  box-sizing: border-box;
  border-radius: 2px;
  width: 100%;
}

.HTMLGroupBox-Box-Inset {
  border: 1px inset #BFB8BF;
  border-radius: 4px;
}

.HTMLGroupBox-Box-Outset {
  border: 1px outset #BFB8BF;
  border-radius: 4px;
}

.HTMLGroupBox-None {
  border-style: none;
}

/*****************************************/
/* HTMLRadioGroup: Componente Opções     */
/*****************************************/
.HTMLRadioGroup .HTMLLabel>div>div {
  background: white;
}

.HTMLRadioGroup #HTMLRadioGroupOptions {
  height: 100%;
  display: table;
  width: 100%;
}

.HTMLRadioGroup #HTMLRadioGroupOptionsRow {
  display: table-row;
}
.HTMLRadioGroup #HTMLRadioGroupOption {
  margin: 2px 2px;
  display: table-cell;
  vertical-align: middle;
}

.HTMLRadioGroup #HTMLRadioGroupOption input:enabled {
  cursor: pointer;
}

.HTMLRadioGroup #HTMLRadioGroupOption input:disabled {
  cursor: default;
}

.HTMLRadioGroup #HTMLRadioGroupOption label {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  cursor: pointer;
}

/*****************************************/
/* HTMLLabel: Componente Text            */
/*****************************************/
.HTMLLabel {
  display: table !important;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.HTMLLabel>div {
  display: table-cell;
}

.HTMLLabel>div>div {
  cursor: default;
  background: white;
}

/*****************************************/
/* HTMLEdit: Componente Edit             */
/*****************************************/
.HTMLEdit input:not([type='checkbox']){
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #555B61;
  background: #FFFFFF;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  outline: none;
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -o-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -ms-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  height: 100%!important;
  width: 100%!important;
  }

.HTMLEdit input:hover {
  border: 1px solid #C7C7C7;
}

.HTMLEdit input:focus {
  border: 1px solid #4ABA58;
  outline: none;
}

.HTMLEdit input:disabled {
  background: #ebebe4;
  border-color: #D3D1D1 !important;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

.HTMLEdit input[readonly=readonly] {
  background: #ECFFE8 !important;
  border-color: #B4CAB0 !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

.HTMLEdit input[readonly=readonly]:hover {
  border-color: #9BBB95 !important;
}

.HTMLEdit font {
  cursor: default;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.HTMLEditCalendar {
  position: absolute;
  width: 240px;
  height: 160px;
  z-index: 999999;
  box-shadow: 10px 10px 15px -2px #888888;
}

.HTMLEditCalendar > iframe {
  border: 1px solid #cccccc;
  width: 100%;
  height: 100%;
}

.HTMLEditCalendarLock {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999998;
  opacity: 0.1;
}

/*****************************************/
/* HTMLNavigationForm: Barra de Navegação*/
/*****************************************/

.HTMLNavigationFormButton, .HTMLNavigationButton {
  width: 40px;
  display: inline-block;
}

.HTMLNavigationForm {
  width: 100%;
  height: 60px;
  padding-top: 0;
  position: absolute;
  top: 0px;
  text-align: center;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.HTMLNavigationForm img {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: 45px;
}

.HTMLNavigationForm a {
  padding: 25px 8px;
}

.HTMLNavigationForm .HTMLNavigationFormButton, .HTMLNavigationButton {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/*Barra de Fundo da Navegação*/
.HTMLNavigationFormBar {
  width: 100%;
  height: 50px;
  background: #E9ECEC;
}

/*Botões da Barra de Navegação*/
[class*="-Des"],
[class*="-Des"] a {
  cursor: default !important;
}

.HTMLNavigationFormButton-Include a:before { content: '\e82d'; }
.HTMLNavigationFormButton-Include-Over a:before { content: '\e82d'; }
.HTMLNavigationFormButton-Include-Des a:before { 
  content: '\e82d';
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Edit a:before { content: '\e820'; }
.HTMLNavigationFormButton-Edit-Over a:before { content: '\e820'; }
.HTMLNavigationFormButton-Edit-Des a:before { 
  content: '\e820';
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-First a:before { content: '\e800'; }
.HTMLNavigationFormButton-First-Over a:before { content: '\e800'; }
.HTMLNavigationFormButton-First-Des a:before { 
  content: '\e800';
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Previous a:before {content: '\e800';width: 9px;overflow: hidden;margin-bottom: -3px;}
.HTMLNavigationFormButton-Previous-Over a:before { 
  content: '\e800';
  overflow: hidden;
  width: 9px;
  margin-bottom: -3px;
   }
.HTMLNavigationFormButton-Previous-Des a:before {
  content: '\e800';
  opacity: 0.3 !important;
  overflow: hidden;
  width: 9px;
  margin-bottom: -3px;
}

.HTMLNavigationFormButton-Next a:before {
  content: '\e801';
  overflow: hidden;
  width: 8px;
  margin-bottom: -3px;
}

.HTMLNavigationFormButton-Next-Over a:before {content: '\e801';
  margin-bottom: -3px;
  overflow: hidden;
  width: 8px;
}

.HTMLNavigationFormButton-Next-Des a:before {
  content: '\e801';
  opacity: 0.3 !important;
  overflow: hidden;
  width: 8px;
  margin-bottom: -3px;
}

.HTMLNavigationFormButton-Last a:before { content: '\e801';  }
.HTMLNavigationFormButton-Last-Over a:before { content: '\e801';}
.HTMLNavigationFormButton-Last-Des a:before { 
  content: '\e801';
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Delete a:before { content: '\e81b'; }
.HTMLNavigationFormButton-Delete-Over a:before { content: '\e81b'; }
.HTMLNavigationFormButton-Delete-Des a:before { 
  content: '\e81b';
  opacity: 0.3 !important;   
}

.HTMLNavigationFormButton-Refresh a:before { content: '\e806'; }
.HTMLNavigationFormButton-Refresh-Over a:before { content: '\e806'; }
.HTMLNavigationFormButton-Refresh-Des a:before { 
  content: '\e806'; 
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Print a:before { content: '\e81f'; }
.HTMLNavigationFormButton-Print-Over a:before { content: '\e81f'; }
.HTMLNavigationFormButton-Print-Des a:before { 
  content: '\e81f'; 
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Log a:before { content: '\e80b'; }
.HTMLNavigationFormButton-Log-Over a:before { content: '\e80b'; }
.HTMLNavigationFormButton-Log-Des a:before { 
  content: '\e80b'; 
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-DefaultValues a:before { content: '\e833'; }
.HTMLNavigationFormButton-DefaultValues-Over a:before { content: '\e833'; }
.HTMLNavigationFormButton-DefaultValues-Des a:before { 
  content: '\e833'; 
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Help a:before { content: '\e82b'; }
.HTMLNavigationFormButton-Help-Over a:before { content: '\e82b'; }
.HTMLNavigationFormButton-Help-Des a:before { 
  content: '\e82b';
  opacity: 0.3 !important;  
}

.HTMLNavigationFormButton-Exit a:before { content: '\e808'; }
.HTMLNavigationFormButton-Exit-Over a:before { content: '\e808'; }
.HTMLNavigationFormButton-Exit-Des a:before { 
  content: '\e808'; 
  opacity: 0.3 !important;  
}

[class*="HTMLNavigationFormButton-EditSave"],
[class*="HTMLNavigationFormButton-EditCancel"],
[class*="HTMLNavigationFormButton-IncludeSave"],
[class*="HTMLNavigationFormButton-IncludeCancel"]{
  width: 100px;
}

@media (max-width: 420px){
[class*="HTMLNavigationFormButton-EditSave"],
[class*="HTMLNavigationFormButton-EditCancel"],
[class*="HTMLNavigationFormButton-IncludeSave"],
[class*="HTMLNavigationFormButton-IncludeCancel"],
[class*="HTMLNavigationFormButton-IncludeSaveMore"]{
  width: 40px!important;
}
.HTMLNavigationFormButton-IncludeSaveMore a:before,
.HTMLNavigationFormButton-IncludeSaveMore-Over a:before {
  content: '\e807'' \e82d';
  width: 31px!important;
}

}

.HTMLNavigationFormButton-EditSave a:before,
.HTMLNavigationFormButton-EditSave-Over a:before{ content: '\e807'; }
.HTMLNavigationFormButton-EditSave-Des a:before {
  content: '\e807';
}

.HTMLNavigationFormButton-EditSave-Des a:before {
  content: '\e807';
  opacity: 0.2 !important;

}


.HTMLNavigationFormButton-EditCancel a:before,
.HTMLNavigationFormButton-EditCancel-Over a:before {
  content: '\e82f';

}

.HTMLNavigationFormButton-EditCancel-Des a:before {
  content: '\e82f';
  opacity: 0.2 !important;
   
}

.HTMLNavigationFormButton-IncludeSaveMore a:before,
.HTMLNavigationFormButton-IncludeSaveMore-Over a:before {
  content: '\e807'' \e82d';
  width: 80px;
 
}

.HTMLNavigationFormButton-IncludeSaveMore-Des a:before {
  content: '\e807'' \e82d';
  opacity: 0.2 !important;
  
}

.HTMLNavigationFormButton-IncludeSave a:before,
.HTMLNavigationFormButton-IncludeSave-Over a:before { content: '\e807'; }
.HTMLNavigationFormButton-IncludeSave-Des a:before {
  content: '\e807';
 opacity: 0.2 !important;
  
}

.HTMLNavigationFormButton-IncludeSave-Des a:before {
  content: '\e807';
 
}

.HTMLNavigationFormButton-IncludeCancel a:before,
.HTMLNavigationFormButton-IncludeCancel-Over a:before {
  content: '\e82f';

}

.HTMLNavigationFormButton-IncludeCancel-Des a:before {
  content: '\e82f';
  opacity: 0.2 !important;

}

/*****************************************/
/* HTMLNavigationGridButton: Botões Grade*/
/*****************************************/

.HTMLNavigationGridButton img {
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

.HTMLNavigationGridButton-pt_BR img {
  background: url('HTMLNavigationGrid/navGridIcons.gif');
}

.HTMLNavigationGridButton-en_US img {
  background: url('HTMLNavigationGrid/en_US/navGridIcons.gif');
}

.HTMLNavigationGridButton-es_ES img {
  background: url('HTMLNavigationGrid/es_ES/navGridIcons.gif');
}

.HTMLNavigationGridButton-fr_FR img {
  background: url('HTMLNavigationGrid/fr_FR/navGridIcons.gif');
}

.HTMLNavigationGridButton-Include img {
  background-position: 0px;
}

.HTMLNavigationGridButton-Include-Des img {
  background-position: -16px;
}

.HTMLNavigationGridButton-Edit img {
  background-position: -32px;
}

.HTMLNavigationGridButton-Edit-Des img {
  background-position: -48px;
}

.HTMLNavigationGridButton-Delete img {
  background-position: -64px;
}

.HTMLNavigationGridButton-Delete-Des img {
  background-position: -80px;
}

.HTMLNavigationGridButton-Refresh img {
  background-position: -96px;
}

.HTMLNavigationGridButton-Refresh-Des img {
  background-position: -112px;
}

.HTMLNavigationGridButton-EditSave img, .HTMLNavigationGridButton-IncludeSave img {
  background-position: -128px;
}

.HTMLNavigationGridButton-EditSave-Des img, .HTMLNavigationGridButton-IncludeSave-Des img {
  background-position: -144px;
}

.HTMLNavigationGridButton-EditCancel img, .HTMLNavigationGridButton-IncludeCancel img {
  background-position: -160px;
}

.HTMLNavigationGridButton-EditCancel-Des img, .HTMLNavigationGridButton-IncludeCancel-Des img {
  background-position: -176px;
}

/*****************************************/
/* HTMLPaging: Paginação da Grade        */
/*****************************************/
.HTMLPagingButton img {
  background: url('HTMLPaging/paging.gif');
  background-repeat: no-repeat;
  width: 8px;
  height: 7px;
}

.HTMLPagingButton-First img {
  background-position: 0px;
}

.HTMLPagingButton-First-Des img {
  background-position: -8px;
}

.HTMLPagingButton-Previous img {
  background-position: -16px;
  width: 4px;
}

.HTMLPagingButton-Previous-Des img {
  background-position: -20px;
  width: 4px
}

.HTMLPagingButton-Next img {
  background-position: -24px;
  width: 4px;
}

.HTMLPagingButton-Next-Des img {
  background-position: -28px;
  width: 4px;
}

.HTMLPagingButton-Last img {
  background-position: -32px;
}

.HTMLPagingButton-Last-Des img {
  background-position: -40px;
}

/*****************************************/
/* HTMLMemo: Componente Texto Longo      */
/*****************************************/
.HTMLMemo textarea {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #555B61;
  background: #FFFFFF;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  border-radius: 2px;
  padding-left: 8px;
  padding-right: 8px;
  outline: none;
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -o-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -ms-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  width: 100%!important;
  height: 100%!important;
}

.HTMLMemo textarea[readonly=readonly] {
  background: #FFFFE1;
}

.HTMLMemo textarea:hover {
  border: 1px solid #A0A0A0;
}

.HTMLMemo textarea:focus {
  border: 1px solid #4ABA58;
  outline: none;
}


.HTMLMemo font {
  cursor: default;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.HTMLMemo textarea:disabled {
  cursor: default;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-left: 1px solid #ebebe4;
  border-right: 1px solid #ebebe4;
  border-top: 1px solid #ebebe4;
  border-bottom: 1px solid #ebebe4;
  background: #ebebe4;
}

.HTMLMemo textarea:disabled:hover {
  border: 1px solid #FF0000;
}

/*****************************************/
/* HTMLDualList: Componente Lista Dupla  */
/*****************************************/
.HTMLDualList {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  outline: none;
  background: #ffffff;
}

.HTMLDualList select {
  height: 100%;
  width: 100%;
  outline: none;
}

.HTMLDualList #dlTop {
  height: 7%;
  width: 100%;
}

.HTMLDualList #dlMiddle {
  height: 86%;
  width: 100%;
}

.HTMLDualList #dlBottom {
  height: 7%;
  width: 100%;
}

.HTMLDualList #dlLeftSeparator,#dlRightSeparator {
  float: left;
  height: 100%;
  width: 5%;
}

.HTMLDualList #dlMiddleSeparator {
  float: left;
  height: 100%;
  text-align: center;
  width: 6%;
}

.HTMLDualList #dlMiddleSeparator div:first-child {
  height: 34%;
}

.HTMLDualList #dlMiddleSeparator div[id*="bt"] {
  padding-bottom: 3px;
}

.HTMLDualList div[id*="WFRComponentLEFT"] {
  float: left;
  height: 90%;
  width: 42%;
}

.HTMLDualList div[id*="WFRComponentRIGHT"] {
  float: left;
  height: 90%;
  width: 42%;
}

.HTMLDualList #celDescPrincipal,#celDescSelecionados {
}

/*****************************************/
/* HTMLLookup: Componente Lista Dinâmica */
/*****************************************/
.HTMLLookup input:not([type='checkbox']){
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  text-indent: 5px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  border-radius: 4px;
  padding-left: 3px;
  padding-right: 3px;
  outline: none;
  width: 100%;
  height: 100%;

  -webkit-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -o-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -ms-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
}

.HTMLLookup input:hover {
  border-right: 1px solid #A0A0A0;
  border-left: 1px solid #A0A0A0;
  border-top: 1px solid #A0A0A0;
  border-bottom: 1px solid #A0A0A0;
  background: #FFFFFF;
}

.HTMLLookup input:focus {
  font-family: 'Open Sans', sans-serif, arial;
  border-right: 1px solid #4ABA58;
  border-left: 1px solid #4ABA58;
  border-top: 1px solid #4ABA58;
  border-bottom: 1px solid #4ABA58;
  background: #FFFFFF;
  outline: none;
}

.HTMLLookup input:disabled:hover {
  background: #ebebe4;
}

.HTMLLookup-ReadOnly input {
  background: #FFFFE1;
}

.HTMLLookup-ReadOnly input:focus {
  background: #FFFFE1;
}

.HTMLLookup-ReadOnly input:hover {
  background: #FFFFE1;
}

.HTMLLookupDetails {
  box-shadow: 3px 5px 10px #747171;
  border-radius: 8px;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
  background: white;
}

.HTMLLookupDetails #lookupHeader div {
  float: left;
  height: 18px;
}

.HTMLLookupDetails #lookupHeader img {
  cursor: pointer;
  margin: 0;
}

.HTMLLookupDetails #lookupSearchQuery {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 0px solid #999999;
  border-left: 0px solid #999999;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  background: #fefefd;
  height: 18px;
  outline: none;
}

.HTMLLookupDetails #lookupQueryNavigation {
  background: #fefefc;
  height: 14px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.HTMLLookupDetails #lookupQueryContent {
  background: #CCCCCC;
}

.HTMLLookupDetails #lookupInput {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 0px solid #D3D1D1;
  border-left: 0px solid #D3D1D1;
  border-top: 0px solid #FFFFFF;
  border-bottom: 1px solid #D3D1D1;
  background: #FEFEFC;
}

.HTMLLookupTypeSearch {
  right: 9px;  
  position: absolute; 
  top: 0px;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 12%!important;
  visibility: hidden;
  transition: visibility 0s, opacity 0.5s cubic-bezier(0, 0, 0.06, 1.22);
  animation: ripple-animation 1.5s;
  overflow: hidden;
  border-radius: 45%;
  z-index: 5;
}

@keyframes ripple-animation {
    from {
      transform: scale(0.5);
      opacity: 0.7;
    }
    to {
      transform: scale(1.2);
      opacity: 0;
      background-color: gray;
    }
}

div[id*="WFRLookupSubForm"] {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  z-index: 99999;
}

.HTMLLookupMobile {
  border: 1px solid #a6a7b0;
  border-radius: 8px;
  cursor: pointer;
  color: #fefefc;
  background: #fefefc;
  padding: 0;
  vertical-align: middle;
  outline: none;
  position: relative;
  z-index: 100;
  height: calc(100% - 16px);
  width: 20px;
  outline: none;
}

.grid .HTMLLookupMobile {
  position: absolute;
  float: right;
  z-index: 1000000000;
  height: 100%;
  width: 20px;
  left: calc(100% - 20px)!important;
}

.HTMLLookup button {
  border: none !important;
  border-left: solid 1px #D3D1D1 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 4px;
  background: url('HTMLComboBox/drop-arrow-icon.png') no-repeat center center transparent !important;
  background-size: 10px;

  -webkit-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -o-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -ms-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  height: 100%;
}

.HTMLLookup .HTMLButton img {
  display: none;
}

/*****************************************/
/* HtmlComboBox: Componente Lista        */
/*****************************************/
.HTMLComboBox select {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #555B61;
  text-indent: 5px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  border-radius: 4px;
  padding-left: 3px;
  padding-right: 3px;
  outline: none;
  width: 100%!important;
  height: 100%!important;

  -webkit-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -o-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  -ms-box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
  box-shadow: inset 0 2px 4px 0 rgba(66, 66, 66, 0.1);
}

.HTMLComboBox select:hover {
  border-right: 1px solid #A0A0A0;
  border-left: 1px solid #A0A0A0;
  border-top: 1px solid #A0A0A0;
  border-bottom: 1px solid #A0A0A0;
  background: #FFFFFF;
}

.HTMLComboBox select:focus {
  font-family: 'Open Sans', sans-serif, arial;
  border-right: 1px solid #4ABA58;
  border-left: 1px solid #4ABA58;
  border-top: 1px solid #4ABA58;
  border-bottom: 1px solid #4ABA58;
  background: #FFFFFF;
  outline: none;
}

.HTMLComboBox select:disabled:hover {
  background: #ebebe4;
}

.HTMLComboBox select:disabled {
  background: #ebebe4;
}

.HTMLComboBox-ReadOnly select {
  background: #FFFFE1;
}

.HTMLComboBox-ReadOnly select :focus {
  background: #FFFFE1;
}

.HTMLComboBox-ReadOnly select:hover {
  background: #FFFFE1;
}

.HTMLComboBox .HTMLComboBoxPlaceholder {
  position: absolute;
  pointer-events: none;
  color: #757575;
  padding-left: 7px;
  padding-top: 2px;
  width: calc(100% - 17px);
  overflow: hidden;
  font-size: 12px;
}

/*****************************************/
/* HTMLCheckBox: Componente Check        */
/*****************************************/
.HTMLCheckBox #chkLabel {
  position: relative;
  margin-left: 1px;
  top: -6px;
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

.HTMLCheckBox #chkLabel-disabled {
  cursor: default;
  color: #D3D1D1;
  position: relative;
  margin-left: 1px;
  top: -6px;
}

.HTMLCheckBox input:enabled {
  cursor: pointer;
}

.HTMLCheckBox input:enabled:hover {
  border-color: #6FD07B;
}

.HTMLCheckBox input:disabled {
  cursor: default;
}

input[type='checkbox'] {
  height: 15px;
  padding: 3px 2px 2px 11px;
  background:#FFF;
  border: 1px solid #D3D1D1;
  outline:none;
  color:#96999D;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 2px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

input[type='checkbox']:checked {
  background: url('checked-box-icon.png') no-repeat center center rgb(71, 193, 86) !important;
  border-color: #47C156;
}

/*****************************************/
/* HTMLImage: Componente Imagem          */
/*****************************************/
.HTMLImage #HTMLImageLock {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  outline: none;
}

.HTMLImage #HTMLImageNoImage {
  background: #FFFFFF;
  display: table;
  height: 100%;
  width: 100%;
  outline: none;
  border: 2px dashed #D4D4D4;
  cursor: pointer;
}

.HTMLImage #HTMLImageNoImageRow {
  display: table-row;
  text-align: center;
}

.HTMLImage img {
  position: absolute;
  left: 0px;
  top: 0px;
}

.HTMLImage #HTMLImageNoImageCell {
  display: table-cell;
  vertical-align: middle;
}

.HTMLImage #HTMLImageWebCam {
    float: right;
    position: relative!important;
    left: -30px!important;
    cursor: pointer;
}

.HTMLImage #HTMLImageWebCam img {
  height: 24px;
  width: 25px;
}

.HTMLImage #HTMLImageZoom {
  cursor: pointer;
  float: right;
  position: relative!important;
  left: 23px!important;
}

.HTMLImage #HTMLImageZoom img {
  height: 24px;
  width: 25px;
}

.HTMLImage #HTMLImageSelf {
  width: 100%;
  height: 100%;
}

.HTMLImageZoom {
  position: absolute;
  z-index: 1000000;
  background: #FFF;
  border: 1px solid black;
  overflow: hidden;
  box-shadow: 0 0 30px 0 rgba(50, 50, 50, 0.75);
}


/*****************************************/
/* HTMLDetailPanel: Componente Sub-Form  */
/*****************************************/
.HTMLDetailPanel {
  border: 1px solid #BFB8BF;
  box-sizing: border-box;
}

/*****************************************/
/* HTMLInteraction: Mensagem de Interação*/
/*****************************************/
div[id*="HTMLInteraction"] { 
  -webkit-box-shadow: 0px 0px 29px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 29px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 29px 2px rgba(0, 0, 0, 0.2);
  display: block;
  background: #ffffff;
  width: 382px;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #EAEAEA;
  outline: none;
  box-sizing: content-box;
}

div[id*="HTMLInteraction"] * {
  box-sizing: content-box;
}

div[id*="HTMLInteraction"] #intTitle {
  opacity: 1.0;
  background: #ffffff;
  height: 26px;
  width: 100%; 
  outline: none;
}

div[id*="HTMLInteraction"] #intTitleIcon {
  height: 100%;
  width: 30px;
  float: left;
  text-align: center;
}

div[id*="HTMLInteraction"] #intTitleIcon img {
  vertical-align: middle;
}

div[id*="HTMLInteraction"] #intTitleMessage {
  cursor: default;
  display: table;
  float: left;
  height: 100%;
  width: 332px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;    
}

div[id*="HTMLInteraction"] #intTitleMessage span {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
  color: #459C48;
  font-weight: 500;
  text-decoration: none;
  padding-left: 10px;
  font-family: 'Open Sans', sans-serif, arial;
}

div[id*="HTMLInteraction"] #intTitleClose {
  cursor: pointer;
  float: left;
  position: absolute;
  right: -7px;
  width: auto;
  height: auto;
  text-align: center;
  top: -7px;
}

div[id*="HTMLInteraction"] #intTitleClose button {
  background: #fdfdfd;
  border: solid 1px;
  font-size: 11px;
  color: #b5b5b5;
  overflow: hidden;
  border-radius: 50%;
  height: 17px;
  width: 7px;
}

.intOnlyMessage {
  height: 40px !important;
}

div[id*="HTMLInteraction"] #intMessage {
  cursor: default;
  height: 80px;
  width: 100%;
  text-align: center;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left;
}

div[id*="HTMLInteraction"] #intIcon {
  float: left;
  top: 31%;
  width: 13%;
  background-color: #F9F9F9;
}

div[id*="HTMLInteraction"] #intIconTable {
  display: table;
  height: 80px;
}

div[id*="HTMLInteraction"] #intIconCell {
  display: table-cell;
  vertical-align: middle;
}

.intOnlyText {
  width: 100% !important;
  height: 40px !important;
}

div[id*="HTMLInteraction"] #intText {
  display: table;
  height: 80px;
  width: 332px;
  word-break: break-word;
  background-color: #F9F9F9;
}

div[id*="HTMLInteraction"] #intText #intTextCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
}

div[id*="HTMLInteraction"] #intText #intTextCenter {
  padding: 0px 6px;
  margin-left: 15px;
  text-align: center;
  width: 305px;
  overflow-y: auto;
}

div[id*="HTMLInteraction"] #intText #intTextAux {
  max-height: 80px;
  word-break: break-word;
  text-align: left;
}

div[id*="HTMLInteraction"] #intText span {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  color: #8A8E90;
}

div[id*="HTMLInteraction"] #intUserOptions {
  background: rgb(239,235,231);
  padding-left: 15px;
}

div[id*="HTMLInteraction"] #intUser {
  background: rgb(239,235,231);
}

div[id*="HTMLInteraction"] #intUserRadio {
  float: left;
  width: 100%;
}

div[id*="HTMLInteraction"] #intUserRadio input {
  float:left;
}

div[id*="HTMLInteraction"] #intUserRadio label {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #333333;
  padding-left: 5px;
  text-decoration: none;
}

div[id*="HTMLInteraction"] #intBtnCancel {
  left: 0%;
  bottom: 0%;
  height: 28px;
  width: 50%;
  background-repeat:no-repeat;
  background-position-y: bottom;
  background-position:100% bottom;
  float: left;
}

div[id*="HTMLInteraction"] #intBtnDetails {
  left: 0%;
  bottom: 0%;
  height: 28px;
  width: 50%;
  background-repeat:no-repeat;
  background-position-y: bottom;
  background-position:100% bottom;
  float: left;
}

div[id*="HTMLInteraction"] #intBtnOk {
  right: 0%;
  bottom: 0%;
  height: 28px;
  width: 50%;
  background-repeat:no-repeat;
  background-position-y: bottom;
  float: right;
}

div[id*="HTMLInteraction"] #intBase {
  left: 0%;
  bottom: 0%;
  height: 12px;
  width: 50%;
  position: absolute;
}

div[id*="HTMLInteraction"] #intBtnDetails button {
  border: 1px solid #a6a7b0;
  cursor: pointer;
  color: #747474;
  background: rgb(254,254,252);
  bottom: 1%;
  cursor: pointer;
  position: absolute;
  height: 26px;
  min-width: 60px;
}

div[id*="HTMLInteraction"] #intBtnDetails button:hover {
  border: 1px solid #a6d4d5;
  cursor: pointer;
  color: #747474;
  background: rgb(254,254,252);
}

div[id*="HTMLInteraction"] #intBtnCancel button {
  border: 1px solid #DFDFDF;
  -moz-border-radius: 8px;
  cursor: pointer;
  color: #414141;
  background: -moz-linear-gradient(top,#ffffff 0%,#F0F0F0);
  background: -webkit-gradient(linear, left top, left bottom,from(#ffffff),to(#F0F0F0));
  height: 25px;
  min-width: 80px;
}

div[id*="HTMLInteraction"] #intBtnOk button {
  border: 1px solid #DFDFDF;
  -moz-border-radius: 8px;
  cursor: pointer;
  color: #414141;
  background: -moz-linear-gradient(top,#ffffff 0%,#F0F0F0);
  background: -webkit-gradient(linear, left top, left bottom,from(#ffffff),to(#F0F0F0));
  cursor: pointer;
  position: absolute;
  bottom: 0%;
  right: 0%;
  height: 25px;
  min-width: 80px;
}

div[id*="HTMLInteraction"] #intBtnOk button:hover,
div[id*="HTMLInteraction"] #intBtnCancel button:hover {
  background:#ffffff;
  border-color: rgb(234, 234, 234);
}

div[id*="HTMLInteraction"] #intBtnOk button:focus{
  outline:none;
}


div[id*="HTMLInteraction"] #intBtnCancel img, #intBtnDetails img, #intBtnOk img {
  vertical-align:middle;
}

div[id*="HTMLInteraction"] #intBtnCancel a, #intBtnDetails a, #intBtnOk a {
  color: #333333;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-decoration: none;
}

div[id*="HTMLInteractionBack"] {
  background-color: #FFFFFF;
  filter: alpha(opacity = 30);
  opacity: 0.4;
  height: 100%;
  width: 100%;
  position: absolute;
  border: 0;
}

/*****************************************/
/* HTMLProgressBar: Barra de Progresso   */
/*****************************************/
div[id*="HTMLProgressBar"] {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

div[id*="HTMLProgressBarBack"] {
  background: #FFFFFF;
  filter: alpha(opacity = 30);
  opacity: 0.3;
  height: 100%;
  width: 100%;
  position: absolute;
  border: 0;
}

/*****************************************/
/* HTMLTreeview: Componente Arvore        */
/*****************************************/
.HTMLTreeviewSelectedItem {
  background: #ffffb4;
}

.HTMLTreeview {
  color: #BFB8BF;
}

.HTMLTreeview > span {
  color: #747474;
}

/*****************************************/
/* HTMLAlert: Indicadores do Modo do Form*/
/*****************************************/
.HTMLAlert {
  width: 45px;
  height: 53px;
  top: 7px;
  right: 7px;
  text-align: center;
  position: absolute;
  font-size: 8px;
}

/**********************************************/
/* HTMLPage: Componente usado na aba localizar*/
/**********************************************/
.HTMLPage {
  border: 0;
  width: 100%;
  top: 0px;
  left: 0px;
  display: block;
  position: absolute;
}

/***********************************************/
/* WFRQueryForm: Aba Localizar: Básico/Avançado*/
/***********************************************/
.WFRQueryForm {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  font-family: calibri;
  font-size: 12px;
}

iframe[name="WFRQueryResults"] {
  width: 100%!important;
}

.WFRQueryForm #HeaderSearchParams {
  width: 100%;
  background-repeat: repeat-x;
  float: left;
}

.WFRQueryForm #BodySearchFilterTitle {
  width: 115px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.WFRQueryForm #HeaderSearchParamsTitle {
  text-align: center;
  font-family: calibri;
  font-size: 12px;
}

.WFRQueryForm #BodySearch {
  float: left;
  width: 98%;
  background: #FFFFFF;
}

.WFRQueryForm #HeaderResults {
  width: 100%;
  background-repeat: repeat-x;
  float: left;
}

.WFRQueryForm #HeaderResultsTitle {
  text-align: center;
}

.WFRQueryForm #BodySearchFilter {
  float: left;
  padding-left: 2px;
}

.WFRQueryForm #BodySearchFilterCombo select {
  background: transparent;
  border: 0px;
  width: 100%;
  padding: 4px;
  font-size: 11px;
  line-height: 1;
  height: 21px;
  outline: none;
}

.WFRQueryForm #BodySearchFilterCombo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
}

.WFRQueryForm #BodySearchOptions {
  float: right;
}

#WFRQueryResults {
  width: 100%;
}

/*Consulta Avançada*/
.WFRQueryForm #HeaderOptions {
  margin-left: 4px;
  border: 2px solid;
  float: left;
  width: 65px;
}

.WFRQueryForm #HeaderOptionsRow {
  height: 30px;
}

.WFRQueryForm #HeaderOptionsRow div {
  float: left;
  margin: 5px;
}

.WFRQueryForm #HeaderOptionsRow {
  cursor: pointer;
}

.WFRQueryForm #HeaderBasicQueryButton {
  text-align: right;
}

#divQueryRow {
  width: 100%;
  float: left;
}

#divQueryRadio {
  float: left;
}

#divQueryLabel {
  float: left;
}

#divQuerySelect {
  float: left;
}

#divQueryInput div {
  float: left;
}

#divQueryInput input {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  border-right: 1px solid #D3D1D1;
  border-left: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
}

/********************************************************************/
/* WFRReportMessageWait: Mensagem de espera da geração de relatórios*/
/********************************************************************/
#WFRReportMessageWait {
  position: absolute;
  display: table;
  z-index: 1000000;
  text-align: center;
  background: #FFFFC7;
  border: 1px solid #EFEFEF;
}

#WFRReportMessageWait div {
  display: table-cell;
  vertical-align: middle;
}

/********************************************/
/* WFRNavigation: Paginação da Aba Localizar*/
/********************************************/
#WFRNavigation {
  height: 26px;
  position: absolute;
  right: 2px;
  top: 0px;
  z-index: 2;
}

#WFRNavigation > div {
  float: left;
}

#WFRNavigation button {
  border: 1px solid #a6a7b0;
  border-radius: 8px;
  cursor: pointer;
  color: #747474;
  background: #fefefc;
  cursor: pointer;
  vertical-align: middle;
  outline: none;
  padding: 0;
  height: 15px;
  width: 40px;
}

#WFRNavigation button:hover {
  cursor: pointer;
  border: 1px solid #ff0000;
  color: #747474;
  outline: none;
}

#WFRNavigation button:disabled {
  cursor: default;
  background: #fefefc;
  color: #DFDFDF;
  border: 1px solid #DFDFDF;
  outline: none;
}

/*****************************************/
/* HTMLMenu: Componente Menu             */
/*****************************************/

/* Definindo o espaçamento da estrutura de lista (OPCIONAL, mas influencia no posicionamento dos elementos) */
.HTMLMenuContainer ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Limitando a largura do menu Vertical */
.HTMLMenuVertical {
  display: inline-block;
}

/* Horizontal: Definindo o estilo da lista, a borda cinza e a orientação de flutuação (OPCIONAL, mas influencia no posicionamento dos elementos) */
.HTMLMenuHorizontal .HTMLMenu {
  list-style: none;
  float: left;
  /* Itens opcionais/customizáveis:*/
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 11px;
  background: #34383C;
  width: 100%;
}

/* Vertical: Definindo o estilo da lista, a borda cinza e a orientação de flutuação (OPCIONAL, mas influencia no posicionamento dos elementos) */
.HTMLMenuVertical .HTMLMenu {
  list-style: none;
  /* Itens opcionais/customizáveis: */
  border-radius: 3px;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  background: #FFFFFF;
  padding: 5px 5px;
}

/* Horizontal: Definindo a borda interna e a posição superior do menu de level 1 */
.HTMLMenuHorizontal .HTMLMenu li {
  position: relative;
  float: left;
  display: block;
  min-width: 90px;
}

.LevelArrowDown > a {
  color: #3E824D !important;
}

.HTMLVerticalFirstLevelArrow > a::after, 
.HTMLVerticalRemainingLevelsArrow > a::after,
.HTMLHorizontalArrowRight > a:after{
  content: '';
  position: absolute;
  display: block;
  top: 4px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-image: url("arrow_item_msb.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px;

  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}

.LevelArrowDown > a {border-bottom: solid 3px #89C396;}

.LevelArrowDown > a::after {
  content: '';
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate( 90deg);
  -ms-transform: rotate( 90deg);
  -o-transform: rotate( 90deg);
  transform: rotate( 90deg);
}

.LevelArrowDown > ul {
  border-bottom: solid 3px #89C396;
}

/* Vertical: Definindo a orientação do menu vertical */
.HTMLMenuVertical .HTMLMenu li {
  position: relative;
  display: block;
  min-width: 90px;
  background-color: #FFF;
}

/* Personalizando os links com o espaçamento top e right */
.HTMLMenu li a {
  display: block;
  text-decoration: none;
  /* Itens opcionais/customizáveis: */
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 12px;
}

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



/* Definindo o efeito do mouse over dos links (OPCIONAL) */
.HTMLMenu > li:not(.HTMLMenuFirstLevelDisabled) > a:hover {background-color: #EFEFEF;color: #ff9428;}

/*****************************************/
/* HTMLMenu: Item Horizontal             */
/*****************************************/

/* Exibição do primeiro item no menu vertical */
.HTMLMenuVertical .HTMLMenu > li:not(.HTMLMenuFirstLevelDisabled):hover > .HTMLItem {
}

/* Conserto da dupla borda entre os elementos (menu vertical) */
.HTMLMenuVertical .HTMLMenu > li > .HTMLItem li:not(:first-child) {
  border-top: 0px;
}

/* Definindo o item horizontal */
.HTMLItem  {
  top: 0px;
  min-width: 200px;
  overflow: hidden;
  max-height: 0;
  display: block !important;
  -webkit-transition: max-height 0.3s ease-in-out, transform 0.2s ease-in-out;
  -moz-transition: max-height 0.3s ease-in-out, transform 0.2s ease-in-out;
  -ms-transition: max-height 0.3s ease-in-out, transform 0.2s ease-in-out;
  -o-transition: max-height 0.3s ease-in-out, transform 0.2s ease-in-out;
  transition: max-height 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.item-show {
  max-height: 4000px;
  transition: max-height 2s;
}

/* Exibição do item horizontal */
.HTMLItem li:not(.HTMLMenuRemainingLevelsDisabled):hover > .HTMLItem {
  display: block;
}

/* Configuração do item horizontal */
.HTMLItem li {
  display: block;
  white-space: nowrap;
}

/*****************************************/
/* HTMLMenu: Item Vertical               */
/*****************************************/

/* Definindo o estilo do item vertical */
.HTMLMenuHorizontal .HTMLMenu > li > .HTMLItem {
  position: absolute;
  left : 0px;
  display: none;
  /* Itens opcionais/customizáveis: */
  top: 43px;
  border-radius: 2px;
}

/* Exibição de item vertical */
.HTMLMenuHorizontal .HTMLMenu > li:not(.HTMLMenuFirstLevelDisabled):hover > .HTMLItem {
  display: block;
}

/* Configuração do item vertical */
.HTMLMenuHorizontal .HTMLMenu > li > .HTMLItem li {
  display: block;
  width: 100%;
  white-space: nowrap;
  /* Itens opcionais/customizáveis: */
}

.HTMLMenuHorizontal .HTMLMenu > li > .HTMLItem li a {
  background-color: #fff;
}

/* Conserto da dupla borda entre os elementos */
.HTMLMenuHorizontal .HTMLMenu > li > .HTMLItem li:not(:first-child) {
  border-top: 0px;
}


.HTMLMenuHorizontal .HTMLFirstLevel > a {
  text-align: center;
  line-height: 36px;
  color: #fff;
  padding: 7px 13px 7px 13px;
  font-size: 11px;
}

.HTMLMenuHorizontal .HTMLFirstLevel > a:hover {
  background-color: #4E5154 !important;
  color: #fff !important;
}

.HTMLMenuVertical .HTMLFirstLevel > a {
  text-align: left;
  line-height: 25px;
  font-weight: 500;
  color: #000000;
  font-size: 12px;
}

.HTMLRemainingLevels {
  padding-left: 5px;
}

.HTMLRemainingLevels > a {
  background-color: currentColor;
}
.HTMLRemainingLevels > a {
  min-height: 15px;
  color: #000000;
  font-weight: 500;
  text-align: left;
  line-height: 25px;
  border-left: solid 1px #D9DCDA;
  background-color: rgba(80, 80, 80, 0.05);
}

.HTMLRemainingLevels :not(.HTMLMenuRemainingLevelsDisabled):hover {
  background: #EFEFEF;
}

/* CSS para links desabilitados */
.HTMLMenuFirstLevelDisabled {
  background-color: #C0C0C0;
}

/* Desabilitando evento e ponteiro (Atenção o Focus via TABULAÇÃO ainda se mantém) */
.HTMLMenuHorizontal .HTMLMenuFirstLevelDisabled a {
  cursor: default;
  pointer-events: none;
  text-align: center;
  line-height: 30px;
}

.HTMLMenuVertical .HTMLMenuFirstLevelDisabled a {
  cursor: default;
  pointer-events: none;
  line-height: 30px;
}


/* CSS para links desabilitados */
.HTMLMenuRemainingLevelsDisabled {
  background-color: #C0C0C0;
}

/* Desabilitando evento e ponteiro (Atenção o Focus via TABULAÇÃO ainda se mantém) */
.HTMLMenuRemainingLevelsDisabled a {
  cursor: default;
  pointer-events: none;
}

/********************************************/
/* Slider: Componente Slider                */
/********************************************/

.HTMLSlider {
  position: absolute;
  z-index: 100000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.HTMLSliderDisable {
  position: absolute;
  z-index: 100001;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
}

.HTMLSliderSeletor {
  position: absolute;
  z-index: 4;
  height: 14px;
  width: 14px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.HTMLSliderSeletor > span {
  position: absolute;
  bottom: -14px;
  width: 134px;
  left: -60px;
  cursor: default;
  text-align: center;
}
.HTMLSliderSeletor > img {
  width: 14px;
  height: 14px;
  position: absolute;
  z-index: 5;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.HTMLSliderSeletor>img:hover {
  cursor: -webkit-grab;
  cursor: -moz-grab;

}

.HTMLSliderSeletor >img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

.HTMLSliderSeletor >img:focus {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}
.HTMLSliderBar {
  position: absolute;
  z-index: 4;
  background: #C0C0C0;
  border-radius: 4px;
  margin-top: 2px;
  height: 9px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.HTMLSliderBarSecundary {
  position: absolute;
  z-index: 4;
  background: #C0C4CC;
  border-bottom: #F00 2px solid;
  border-radius: 4px;
  margin-top: 2px;
  height: 9px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/***************************************************/
/* HTMLImageGallery: Componente Galeria de Imagens */
/***************************************************/
.HTMLImageGalleryMain {
  border-left: 1px solid #D3D1D1;
  border-right: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.HTMLImageGalleryMain:hover {
  border-left: 1px solid #4ABA58;
  border-right: 1px solid #4ABA58;
  border-top: 1px solid #4ABA58;
  border-bottom: 1px solid #4ABA58;
}

.HTMLImageGalleryThumbnail {
  border-left: 1px solid #D3D1D1;
  border-right: 1px solid #D3D1D1;
  border-top: 1px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.HTMLImageGalleryThumbnail:hover {
  border: 1px solid #4ABA58;
  opacity: 1;
  box-shadow: 2px 2px 5px #ccc;
}

.HTMLImageGalleryThumbnail img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.HTMLImageGalleryRemove {
  background: transparent;
  width: 16px;
  height: 16px;
  top: 2px;
  right: 2px;
  position: absolute;
  background-image: url("HTMLImageGallery/remove_item_galery_disabled.png");
  cursor: pointer;
}

.HTMLImageGalleryRemove:hover {
  background-image: url("HTMLImageGallery/remove_item_galery.png");
}

.HTMLImageGalleryExpandedBackground {
  width: 100%;
  height: 100%;
  z-index: 100100;
  background: #000000;
  opacity: 0.5;
  position: absolute;
}

.HTMLImageGalleryExpandedImage {
  z-index: 100110;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0px 5px 35px #000000;
}

/***************************************************/
/* HTMLCalendar: Componente Calendário *************/
/***************************************************/
.HTMLCalendarMain {
  min-width: 250px;
  min-height: 180px;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: rgb(242, 242, 242);
  color: #ffffff;
  border: solid 1px rgb(199, 199, 199);
  -webkit-box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.12);
}

.HTMLCalendarHeader {
  position: relative;
  width: 100%;
  height: 16%;
  border-bottom: 1px solid #737b82;
  text-align: center;
  min-width: 250px;
  max-height: 38px;
  min-height: 30px;
  background-color: rgb(131, 144, 156);
  padding-top: 3px;
}

.HTMLCalendarPreviousYear {
  position: relative;
  display: inline-block;
  background: url('HTMLCalendar/calendar_previous_year.png');
  height: 28px;
  width: 28px;
  margin-top: 1%;
  margin-right: 4px;
  background-size: 75%;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.HTMLCalendarSpan {
  position: relative;
  display: inline-block;
  margin-right: 4px;
  font-family: verdana;
  top: 10px;
}

.HTMLCalendarPreviousYear:hover {
  background: url('HTMLCalendar/calendar_previous_year_over.png');
  background-repeat: no-repeat;
  background-size: 75%;
  opacity: 1.0;
}

.HTMLCalendarPrevious {
  position: relative;
  display: inline-block;
  background: url('HTMLCalendar/calendar_previous.png');
  height: 28px;
  width: 15%;
  max-width: 30px;
  min-width: 30px;
  margin-top: 1%;
  margin-right: 4px;
  background-size: 75%;
  background-repeat: no-repeat;
  opacity: 0.6;
}
.HTMLCalendarPrevious:hover {
  background: url('HTMLCalendar/calendar_previous_over.png');
  background-repeat: no-repeat;
  background-size: 75%;
  opacity: 1.0;
}

@font-face {
  src: url(HTMLCalendar/4365_cent_g.ttf);
}

.HTMLCalendarInformation {
  font-family: 'Open Sans', sans-serif, arial;
  position: relative;
  display: inline-block;
  margin-right: 4px;
  top: -12px;
  width: 110px;
  left: -4px;
  font-size: 12px;
}

.HTMLCalendarNext {
  position: relative;
  display: inline-block;
  background: url('HTMLCalendar/calendar_next.png');
  height: 28px;
  width: 15%;
  max-width: 30px;
  min-width: 30px;
  margin-top: 1%;
  margin-right: 4px;
  background-size: 75%;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.HTMLCalendarNext:hover {
  background: url('HTMLCalendar/calendar_next_over.png');
  background-repeat: no-repeat;
  background-size: 75%;
  opacity: 1.0;
}

.HTMLCalendarNextYear {
  position: relative;
  display: inline-block;
  background: url('HTMLCalendar/calendar_next_year.png');
  height: 28px;
  width: 15%;
  max-width: 30px;
  min-width: 10px;
  margin-top: 1%;
  margin-right: -5px;
  background-size: 75%;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.HTMLCalendarNextYear:hover {
  background: url('HTMLCalendar/calendar_next_year_over.png');
  background-repeat: no-repeat;
  background-size: 75%;
  opacity: 1.0;
}

.HTMLCalendarDaysOfTheWeek {
  position: relative;
  width: 100%;
  height: 11.4%;
  text-align: center;
  background: #737e88;
}

.HTMLCalendarCellDayOfTheWeek {
  position: relative;
  width: 13%;
  height: 100%;
  display: inline-block;
  margin-left: 0.4%;
  margin-right: 0.4%;
  color: #ffffff;
  top: 10%;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 100%;

}

.HTMLCalendarDaysOfTheMonth {
  position: relative;
  width: 100%;
  height: 11.4%;
  top: 3%;
  text-align: center;
}

.HTMLCalendarCellDayOfTheMonth {
  position: relative;
  width: 13%;
  height: 100%;
  display: inline-block;
  margin-left: 0.4%;
  color: rgb(87, 87, 87);
  margin-right: 0.4%;
  font-family: verdana;
  font-size: larger;
  cursor: pointer;
  padding-top: 6px;
}
.HTMLCalendarCellDayOfTheMonth:hover {
  background: #D7D7D7;
}

.HTMLCalendarOfToday {
  position: relative;
  width: 13%;
  height: 100% !important;
  display: inline-block;
  margin-left: 0.4%;
  margin-right: 0.4%;
  font-family: verdana;
  font-size: larger;
  cursor: pointer;
  font-weight: bold;
  background: rgb(171, 171, 171);
  padding-top: 6px;
}
.HTMLCalendarCellHoliday {
  position: relative;
  width: 13%;
  height: 100%;
  display: inline-block;
  margin-left: 0.4%;
  margin-right: 0.4%;
  font-family: 'Open Sans', sans-serif, arial;
  color: rgb(244, 67, 54);
  font-size: larger;
  cursor: pointer;
  padding-top: 6px;
}

.HTMLCalendarCellHoliday:hover {
  background: #b8bfc5;
  color: #fff;
}

.HTMLCalendarCellActivity {
  position: relative;
  width: 13%;
  height: 100%;
  display: inline-block;
  margin-left: 0.4%;
  margin-right: 0.4%;
  font-family: verdana;
  color: green;
  font-size: larger;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
}

.HTMLCalendarCellActivity:hover {
  background: #FFFAFA;
}

.navController {
  position: relative;
  z-index: 99999999999999999999999;
  width: 26px;
  top: 90px;
  overflow: hidden;
  background: #87CEFA;
  opacity: 0.3;
  float: right;
  height: 560px;
  transition: all 0.5s;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-bottom-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-bottomleft: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

/*****************************/
/* HTMLChat: Componente Chat */
/*****************************/

.HTMLChat, .HTMLChatError {
  position: absolute;
  border: 1px solid rgb(226, 226, 226);
  overflow: hidden;
  background-color: white;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.HTMLChatSlider {
  transition: all 0.7s;
  z-index: 999999;
}

.HTMLChatSlider:hover {
  bottom: 0px !important;
}

.HTMLChatHeader {
  height: 20px;
  border-bottom: 1px solid rgb(226, 226, 226);
  position: relative;
  font-size: 14px;
  padding-top: 3px;
  padding-left: 15px;
}

.HTMLChatHeaderSlider {
  height: 25px;
  background: #404040;
  color: white;
}

.HTMLChatSearch {
  position: relative;
  border-bottom: 1px solid rgb(241,241,241);
}

.HTMLChatSearch input {
  border-radius: 0px !important;
  position: relative;
  height: 20px;
  width: 100%;
  background: #CBCBCB;
  border: 1px solid #ABBFFF;
}

.HTMLChatSearch input:hover {
  border: 0px solid;
}

.HTMLChatSearch input:focus {
  border: 0px solid;
}

.HTMLChatSendAll {
  position: relative;
  height: 19px;
  border-bottom: 1px solid rgb(241,241,241);
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.HTMLChatSendAll span {
  position: relative;
  vertical-align: middle;
}

.HTMLChatSendAll:hover {
  background-color: #87CEFA;
}

.HTMLChatScroll {
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.HTMLChatUsersList {
  position: relative;
  width: inherit;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.HTMLChatUsersListRow {
  width: inherit;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

.HTMLChatUsersListCellUser {
  width: inherit;
  border-bottom: 1px solid rgb(241, 241, 241);
  display: inline-block;
  left: -25px;
  height: 19px;
}

.HTMLChatUsersListRow:hover {
  background-color: #e4f7ff;
}

.HTMLChatUsersListCellStatus {
  margin: 0px 5px;
  float: left;
  border-radius: 50%;
  top: 2px;
  height: 15px;
  width: 15px;
}

.HTMLChatUsersListCellUser span {
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  width: calc(100% - 25px);
  padding-left: 25px;
  top: 3px;
}

.HTMLChatUsersListCellStatus, .HTMLChatUsersListCellUser {
  position: relative;
  vertical-align: middle;
}

.HTMLChatUserOffline {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

.HTMLChatUserOnline {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

.HTMLChatUserOffline > .HTMLChatUsersListCellStatus {
  background-color: #c3c3c3;
}

.HTMLChatUserOnline > .HTMLChatUsersListCellStatus {
  background-color: lawngreen;
}

.HTMLChatTalk .HTMLMemo {
  width: 100%!important;
  border-radius: 0;
}

.HTMLChatTalk textarea {
  resize: none;
  height: 100%!important;
  width: 100%!important;
}

.HTMLChatTalk textarea, .HTMLChatTalk textarea:hover, .HTMLChatTalk textarea:focus {
  border: 0;
}

.HTMLChatTalk .HTMLMemo:nth-child(1) {
  background-color: #E5E5E5;
}

.HTMLChatTalk .HTMLMemo:nth-child(1) textarea {
  background-color: transparent!important;
  border-radius: 0;
  padding: 13px;
  font-size: 16px;
}

.HTMLChatTalk .HTMLMemo:nth-child(2) textarea {
  border-radius: 0;
  padding: 4px;
  overflow: hidden;
  font-size: 18px;
  border: 0px solid #fff;
  border-bottom: 1px solid #404040;
}

/*************************************************/
/* HTMLPlayer: Reprodutor de Mídia               */
/*************************************************/

.HTMLPlayer {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

.HTMLPlayerSliding {
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -ms-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
  z-index: 2147483647;
  padding-top: 30px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4zjOaXUAAAAhlJREFUWEftlzlLA1EUhRNc4hLFxEILkQj+BUs7/4CFYGOhtWBhoZaCYIKoWIqFhTYWdjZilcYqnQEJhEgwSEgCCVlnsvq9+CIjWWCcGRtz4PC2O/edefe+y4ytjz46oVgsOsrlsqvRaLjNpKqqrlwuN0Tf1mIbCoWCo1QqnVYABqaClyrjf59udwHYuK3YvAUhgqa7ACanodXoC9AngOwN1Wo1L11drFarJ/l8/pGwK4y10CcAXMhl3SDr58npW+mnBd0CzuVyE4FAwB4KhcYymcwka4NyuiM4OWe9Xvd9ufmGMQHRaHQiHo+vUi92KVrLrA/LpTaw5oQiJFoYE5BKpTwc7RUxfic/nuhv0i5g13YazI3AQ+FEA2MC0un0IhvecbQKVInxm6IoNwhZw3YG2qWp8GeHu1AL8wSIRdo6sVbI9ldq/VYymRyVpk1gsiPsNLBEgMopRBKJxHYkEhmXpk1gYp0ANq7AFOMHEnKDcPwIgQBjcwVwxB4KzDWbfXATnhHgI/5L2HVKwgG4J5xoYExAOByejMVi64g4yGazK6zPwo71gPkxeAS1MCbA7/fbg8Ggk5OYIgw9CxHPmlIHfl2KOaU5cuOSmlGSvgT0CeDhF970mK4u8oyXm3FPgmYYa6FPgAXoC+gu4A8+SlWa7gIoKA6y9swKEWJzfPf+LBfg6ogfE/EzIcJhGrkRbgT0/jH5Z7DZPgEGiNBQxJe7wQAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
}

.HTMLPlayerSliding:hover {
  bottom: -4px !important;
}

.HTMLVideoPlayer, .HTMLAudioPlayer {
  background-color: #000;
  z-index: 1;
}

.HTMLVideoPlayer {
  margin-top: 3px;
  margin-left: 3px;
  margin-right: 3px;
}

.HTMLAudioPlayer {
  height: 30px;
}

/*************************************************/
/*                 RSS: Leitor RSS               */
/************************************************/

.HTMLRSSBody {
  position: absolute;
  background: #FFF;
  border: #E6E6E6 1px solid;
  border-radius: 3px;
  min-height: 100px;
  z-index: 100000;
  padding: 4px;
}

.HTMLRSSSlider {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.HTMLRSSTitle {
  color: #000;
  position: relative;
  font-weight: bold;
  width: 94%;
  height: auto;
  min-height: 30px;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  z-index: 1;
  left: 3%;
  padding-top: 2%;
  TEXT-TRANSFORM: uppercase;
  margin-bottom: 2px;
  border-bottom: 1px #E6E6E6 solid;
}

.HTMLRSSItem {
  position: relative;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  width: 94%;
  margin-top: 10px;
  margin-left: 3%;
}

.HTMLRSSItemTitle {
  position: relative;
  width: 100%;
  height: auto;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #000;
}
.HTMLRSSItemTitle span {
  display: table;
  margin-top: auto;
}

.HTMLRSSDescription {
  position: relative;
  width: 100%;
  height: auto;
  color: gray;
  font-size: 16px;
  float: left;
}

.HTMLRSSDescription > * {
  float: left;
  vertical-align: 30%
}
.HTMLRSSDescription img {
  border-radius: 3px;
  margin-right: 10px;
  max-width: 75px;
}

.HTMLRSSDescription br {
  display: none;
}

.HTMLRSSSeparator {
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #E6E6E6;
  float: left;
}

/***************************************************/
/* Tabela: Novo Componente Tabela (Feito em Maker) */
/***************************************************/

.HTMLTable {
  border-bottom: 1px solid #C7C7C7;
  border-top: 1px solid #C7C7C7;
  border-left: 1px solid #C7C7C7;
  border-right: 1px solid #C7C7C7;
  background-color: white;
}

.HTMLTableAllModes {
  z-index: 100000;
}

.HTMLTable * {
  box-sizing: initial !important;
}

.HTMLTableDragDrop {
  background: white;
  border-bottom: 1px solid #D3D1D1;
  box-sizing: border-box!important;
}

.HTMLTableNavButtons {margin-top: -2px !important;z-index: -1!important;}

.HTMLTable 
.HTMLEdit, 
.HTMLTableSearchEdge { 
  height: 22px; 
}

.HTMLTable .HTMLEdit {
  border-right: 2px solid #D3D1D1;
  border-bottom: 1px solid #D3D1D1;
  display: inline-block!important;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  background-color: white;
}

.HTMLTableSearchEdge {
  overflow: hidden;
  display: inline-block!important;
  text-overflow: ellipsis;
  cursor: default;
  height: 100%;
  width: 13px;
  display: none!important;
}

.HTMLTable .HTMLEdit input {
  width: 100% !important;
  border-radius: 0;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
  text-indent: 8px;
}

.HTMLTable .HTMLEdit input:focus {
  border-color: #62cdf1;
  border: 1px solid #4ABA58;
}

.HTMLTable .HTMLEdit input:hover {
  border-color: #4ABA58;
}

.HTMLTableHeaderRow, .HTMLTableEdge {
  height: 22px;
  white-space: nowrap;
  width: calc(100% + 0px);
  padding: 0px 0px 0px 0px!important;
  z-index: 1;
  background: #fff;
}

.HTMLTableHeaderSearch {
  white-space: nowrap;
  border-bottom: 1px solid #c9b6b6;
  width: calc(100% + 0px);
  padding: 0px 0px 0px 0px!important;
  z-index: 1;
  height: 22px;
}

.HTMLTableEdge {
  width: 13px;
  border-bottom: 2px solid #e6e6e6;
}

.HTMLTableHeaderCell, .HTMLTableEdge {
  background: #fff;
}

.HTMLTableHeaderCell {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  height: 100%;
}

.HTMLTableHeaderCell:last-child {
  overflow: hidden;
  float: none;
}

.HTMLTableHeaderCell:hover, .HTMLTableEdge:hover {
  background: #fff;
}

.HTMLTableHeaderCell span {
  cursor: default;
  padding-left: 3px;
  padding-right: 3px;
  position: relative;
  top: 7px;
}

.HTMLTableHeaderCell[draggable = true], .HTMLTableHeaderCell[draggable = true] > span {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.HTMLTableHeaderCellSeparator {
  display: inline-block;
  text-overflow: ellipsis;
  height: 100%;
  cursor: e-resize;
  background: #ccc;
}

.HTMLTableHeaderCellSeparator:hover, .HTMLTableHeaderCellSeparator:active {
  background-color: red;
}

.HTMLTableBody {
  width: 100%;
  border-top: solid 2px #E6E6E6;
}

.HTMLTableBody2 {
  outline: none;
  overflow-y: hidden;
  overflow-x: hidden!important;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  width: calc(100% + 0px);
  padding: 0px 0px 0px 0px!important;
  z-index: 1;
}

.HTMLTableBodyRow {
  white-space: nowrap;
  width: 100%;
}

.HTMLTableBodyRowAuto {
  white-space: normal!important;  
}

.HTMLTableBodyRow{
  background-color: #F7F7F7;
}

.HTMLTableBodyRowOdd{
  background-color: #ffffff;
}

.HTMLTableBodyRow > div{
  background-color: #F7F7F7;
}

.HTMLTableBodyRowOdd > div{
  background-color: #ffffff;
}

.HTMLTableBodyRow:hover div{
  background-color: rgb(236, 249, 226) !important;
}

.HTMLTableBodyRow:hover {
  background-color: #E4E4E4!important;
}

.HTMLTableBodyRowSelected{
  background-color: rgb(221, 247, 204) !important;
}

.HTMLTableBodyRowSelected > div{
  background-color: rgb(221, 247, 204) !important;
}

.HTMLTableBodyCell {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 1px;
  cursor: default;
  height: 100%;
  border-right: 1px solid #ABABAB;
}

.HTMLTableBodyCell span {
  padding-right: 2px;
}

.HTMLTableBodyCell img {
  cursor: pointer;
}

.HTMLTableContainerPagination {
  background: #F1F1F1;
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -21px;
}

.HTMLTablePrevious, .HTMLTableNext, .HTMLTableFirst,.HTMLTableLast {
  position: absolute;
  width: 32px;
  height: 16px;
  background-size: 256px 16px;
  background-repeat: no-repeat;
  top: 2px;
  cursor: pointer;
  -webkit-transition: 0.2s opacity ease-in;
  -moz-transition: 0.2s opacity ease-in;
  -ms-transition: 0.2s opacity ease-in;
  -o-transition: 0.2s opacity ease-in;
  transition: 0.2s opacity ease-in;
  opacity: 0.6;
}

.HTMLTablePrevious:not(.HTMLTablePreviousDisabled):hover, .HTMLTableNext:not(.HTMLTableNextDisabled):hover, .HTMLTableFirst:not(.HTMLTableFirstDisabled):hover,.HTMLTableLast:not(.HTMLTableLastDisabled):hover {
  opacity: 1;
}

.HTMLTablePreviousDisabled, .HTMLTableNextDisabled,.HTMLTableFirstDisabled,.HTMLTableLastDisabled {
  cursor: default;
  pointer-events: none;
}

.HTMLTablePrevious {
  background-position: -64px;
  right: 70px;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTablePreviousDisabled {
  background-position: -96px;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTableNext {
  background-position: -128px;
  right: 35px;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTableNextDisabled {
  background-position: -160px;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTableFirst {
  background-position: 0px;
  right: 105px;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTableFirstDisabled {
  background-position: -32px;
  background-image: url("HTMLTable/nav_pagination.png");
}
.HTMLTableLast {
  background-position: -192px;
  right: 0;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTableLastDisabled {
  background-position: -224px;
  background-image: url("HTMLTable/nav_pagination.png");
}

.HTMLTableInputPagination {
  font-weight: bold;
  height: 16px;
  top: 2px;
  position: relative;
  float: left;
  margin-left: 5px;
  font-size: 11px;
}

.HTMLTableSpanPagination {
  line-height: 20px;
  position: relative;
  float: left;
  margin-left: 4px;
  color: #808080;
}


.HTMLTableContextMenu {
  position: absolute;
  z-index: 2147483647;
  background-color: #f5f5f5;
  font-size: 1.2em;
  white-space: nowrap;
  line-height: 30px;
  width: 200px;
  text-indent: 10px;
  box-shadow: 1px 1.732px 9px 0px rgba(64, 64, 64, 0.5);
  border-radius: 4px;
}

.HTMLTableContextMenu > div {
  cursor: pointer;
  border-bottom: 1px solid #e7e7e7;
  color: #434343;
  -webkit-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
  border-top: 1px solid #e7e7e7;
}

.HTMLTableContextMenu > div:hover {
  background-color: lightblue;
  color: #171717;
  border-bottom-color: lightblue;
  border-top-color: lightblue;
}

.HTMLTableOrderArrow {
  position: absolute;
  width: 7px;
  left: calc(50% - 3.5px);
  top: 1px;
  display: none;
}

.HTMLTableOrderArrowInverted {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.HTMLTableOrderArrowSort {
  display: block;
}

.HTMLTableOrderArrowSort {
  display: block;
}


.HTMLTableRowGroups {
  border-bottom: 1px solid #E0E0E0!important;
  background: #F3F3F3;
}

.HTMLTableHeaderCellGroup {
  float: left;
  height: 100%;
  outline: none;
  border-right: 1px solid #ababab;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.HTMLTableHeaderCellGroup > span {
  top: 3px;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
}

.HTMLTableHeaderCellGroup > img {
  top: 5px;
  right: 2px;
  width: 10px;
  position: relative;
  float: right;
  cursor: pointer;
}

.HTMLTableSumaryGeneral {
  background: #F3F3F3;
  border: 1px solid #ccc;
}

.HTMLTableIntermediary {
  overflow-y: hidden!important;
  height: 100%;
}

/*************************************************/
/* HTMLScrollBar: Barra de Rolagem               */
/*************************************************/

.HTMLScrollBar {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: default;
  background-color: rgba(211,211,211,0.3);
  -webkit-transition: 0.5s background-color ease;
  -moz-transition: 0.5s background-color ease;
  -ms-transition: 0.5s background-color ease;
  -o-transition: 0.5s background-color ease;
  transition: 0.5s background-color ease;
}

.HTMLScrollBar:hover , .HTMLScrollBar:active {
  background-color: rgba(211,211,211,0.3);
}

.HTMLScrollThumbX, .HTMLScrollThumbY {
  position: relative;
  background-color: rgb(193, 193, 193);
}

.HTMLScrollThumbX {
  height: 14px;
  min-width: 20px;
  display: none!important;
}

.HTMLScrollBarX {
  display: none;
}

.HTMLScrollThumbY {
  width: 14px;
  min-height: 20px;
}

/*************************************************/
/*                COMPONENTE ABA                 */
/************************************************/

.HTMLTabComponent, .HTMLTabComponentClose, .HTMLTabComponentUndock {
  background-color: #ECECEC;
  color: #000000;
  max-width: 10px;
  min-width: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.HTMLTabComponent {
  border-top-left-radius: 0px;
}

.HTMLTabComponentClose {
  border-top-right-radius: 0px;
  vertical-align: middle;
  font-size: 12px;
  text-align: center;
}

.fecharAba>span {
  color: #C7C7C7!important;
}

.fecharAba>span>b {
}

.fecharAbaDesabilitada>span {
  color: #AFAFAF!important;
}

.separarAba img {
  width: 14px;
  height: auto;
  top: 3px;
  margin-left: -3px;
  position: absolute;
}

.HTMLTabComponentSelected {
  border-bottom: 2px solid #99E2A2;
  border-top-left-radius: 4px !important;
  -webkit-box-shadow: 0px -4px 4px 2px rgba(61, 63, 68, 0.24);
  box-shadow: 3px -2px 7px -1px rgba(61, 63, 68, 0.32);
}

.HTMLTabComponentUndockSelected {
  border-top: 3px solid #FF0000;
}

.HTMLTabComponentUndock {
  border-top: 1px solid #91A7B4;
}

.HTMLTabComponentCloseSelected {
  border-bottom: 2px solid #99E2A2;
  border-top-right-radius: 3px !important;
  -webkit-box-shadow: 0px -4px 4px 2px rgba(61, 63, 68, 0.24);
  box-shadow: 4px -2px 7px -1px rgba(61, 63, 68, 0.32);
}

.HTMLTabComponent {
  border-bottom: 1px solid #ECECEC;
  font-weight: 500;
  cursor: pointer;
}

.HTMLTabComponentClose {
  border-bottom: 1px solid #ECECEC;
}

.HTMLTabComponentSelected,.HTMLTabComponentCloseSelected,.HTMLTabComponentUndockSelected {
  background-color: #FEFEFC;
  color: #000000;
  max-width: 10px;
  min-width: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.HTMLTabComponent:hover a {
  color: #46555F !important;
}

.HTMLTabComponentSelected>a {
  color: #5B6F7B!important;
  font-weight: 500;
}

.HTMLTabComponentSelected {
  border-top-left-radius: 0px;
}

.HTMLTabComponentCloseSelected {
  border-top-right-radius: 0px;
  vertical-align: middle!important;
  font-size: 12px;
  text-align: center;
}

.HTMLTabComponentRow table {
  border-bottom: 4px solid #3173AD;
  width: 100%!important;
}

.HTMLTabComponentGroupBox {
  top: 50px!important;
}

/********************************************/
/* WFRReport: Janela de Filtros do Relatório*/
/********************************************/
#WFRReport iframe {
  height: 500px;
}

/* Style da cor de fundo da janela de filtro do relatório*/
#WFRReportHeaderActions, #WFRReportHeaderOptions {
  float: left;
  width: 100%;
  background: #FFF;
  background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(50%,#F3F3F3), color-stop(51%,#EDEDED), color-stop(100%,#FFF));
  background: -webkit-linear-gradient(top, #FFF 0%,#F3F3F3 50%,#EDEDED 51%,#FFF 100%);
  background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  background: linear-gradient(to bottom, #FFF 0%,#F3F3F3 50%,#EDEDED 51%,#FFF 100%);
  padding-bottom: 4px;
}

#WFRReportHeaderActions div, #WFRReportHeaderActions span {
  cursor: pointer;
  padding: 4px;
}

/* Style da cor de fundo da baorda da janela de filtro do relatório*/
#WFRReportHeaderOptions {
  border-bottom: 1px solid #F5F5F5;
}

#WFRReportHeaderActionsPreview, #WFRReportHeaderActionsDesign, #WFRReportHeaderActionsOrder,
#WFRReportHeaderActionsReload, #WFRReportHeaderOptionsPlugin, #WFRReportHeaderOptionsReportGenerator,
#WFRReportHeaderOptionsReportFormat {
  float: left;
}

#WFRReportHeaderActions img, #WFRReportHeaderOptionsPlugin img {
  vertical-align: middle;
}

#WFRReportHeaderOptionsPlugin {
  padding-top: 2px;
  padding-left: 6px;
}

/* Style referente a fonte para o texto de download do plugin do adobe*/
#WFRReportHeaderOptionsPlugin span {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  color: #747474;
}

/* Style referente as fontes dos textos da janela de filtro do relatório*/
.WFRUserSelectReport {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  color: #747474;
}

#WFRReportHeaderOptionsReport {
  float: right;
}

#WFRReportHeaderOptionsReport span {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  cursor: default;
}

/* Style referente a linha que envolve as opções de gerador e formato*/
#WFRReportHeaderOptionsReportGenerator {
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  padding-left: 6px;
  padding-top: 2px;
  border-top-left-radius: 8px;
  padding-left: 6px;
  width: 130px;
}

/* Style referente a linha que envolve as opções de gerador e formato*/
#WFRReportHeaderOptionsReportFormat {
  border-top: 1px solid #ffffff;
}

#WFRReportHeaderOptionsReportGenerator div {
  float: left;
}

/********************************************/
/* WFRReportOrder: Janela de Ordenação do Relatório*/
/********************************************/

/* Style da cor de fundo da janela de Ordenação do Relatório*/
#WFRReportBackgroundOrder {
  float: left;
  width: 100%;
  background: #FFF;
  background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(50%,#F3F3F3), color-stop(51%,#EDEDED), color-stop(100%,#FFF));
  background: -webkit-linear-gradient(top, #FFF 0%,#F3F3F3 50%,#EDEDED 51%,#FFF 100%);
  background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  background: linear-gradient(to bottom, #FFF 0%,#F3F3F3 50%,#EDEDED 51%,#FFF 100%);
}


/* Style dos textos da janela de Ordenação do Relatório*/
.WFRUserSelectReportOrder {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  color: #747474;
}

/*Estilo dos botões*/
.WFRReportButtonOrderOk,.WFRReportButtonOrderClose {
  width: 70px;
  height: 20px;
  border: 1px solid #A6A7B0;
  border-radius: 8px;
  cursor: pointer;
  color: #747474;
  background: #FEFEFC;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  outline: none;
}

.WFRReportButtonOrderOk:hover,.WFRReportButtonOrderClose:hover {
  background: #FFF;
  border: 1px solid #F00;
  color: #747474;
}

/********************************************/
/* AccessManager: Janela Modo Gerente*/
/********************************************/

#AccessManagerBackground {
  background: #FFF;
  background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(50%,#F3F3F3), color-stop(51%,#EDEDED), color-stop(100%,#FFF));
  background: -webkit-linear-gradient(top, #FFF 0%,#F3F3F3 50%,#EDEDED 51%,#FFF 100%);
  background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  background: linear-gradient(to bottom, #FFF 0%,#F3F3F3 50%,#EDEDED 51%,#FFF 100%);
}

#AccessManagerBackgroungTitleBar {
  background: #727272;
}

#AccessManagerFontTitleAccessPermissions {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  color: #727272;
  font-weight: bold;
}

#AccessManagerFontTitleOptionBar {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  color: #ffffff;
  font-weight: bold;
}

#AccessManagerFontText {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  color: #727272;
}

#AccessManagerFontMenu {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  color: #ccc;
  font-weight: bold;
}

#AccessManagerFontUpdateGroups {
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  color: #89948C;
  ;
  font-weight: bold;
}

#AccessManagerAccessPermissionsBackground {
  background: #ffffff;
}

/********************************************/
/*                MENU: Atalhos             */
/********************************************/

.HTMLMenuShortCut {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1000;
}

.HTMLMenuShortCut > img {
  position: absolute;
  width: 40px;
  height: 40px;
}

.HTMLMenuShortCut > span {
  position: absolute;
  top: 40px;
  text-align: center;
  width: 80px;
  left: -50%;
  overflow-wrap: break-word;
}

/********************************************/
/*              ORGANOGRAMA               */
/********************************************/

/*CLASSES API*/

.google-visualization-orgchart-lineleft {
  border-left: 1px solid #b1b1b1;
}

.google-visualization-orgchart-linebottom {
  border-bottom: 1px solid #b1b1b1;
}

.google-visualization-orgchart-lineright {
  border-right: 1px solid #b1b1b1;
}

.GoogleChartOrg {
  text-align: center;
  vertical-align: middle;
  font-family: arial,helvetica;
  cursor: pointer;
  border-radius: 1px;
  background: #F3F3F3;
  border: 1px solid #d0d0d0;
  color: #7e8792;
  min-width: 40px;
  border-radius: 4px;
}

.GoogleChartOrg:hover {
  background: #FBFBFB;
}

.GoogleChartOrgSelected {
  border: 1px solid #43a24f;
  background: #47C156;
  color: #FFFFFF;
  min-width: 40px;
  overflow: hidden;
  position: relative;
}

.GoogleChartOrgSelected:before {
  content: '';
  width: 100%;
  height: 0;
  left: 0;
  top: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: absolute;
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
  
  -webkit-animation: selectedorgan 0.3s ease-in-out;
  -moz-animation: selectedorgan 0.3s ease-in-out;
  -ms-animation: selectedorgan 0.3s ease-in-out;
  -o-animation: selectedorgan 0.3s ease-in-out;
  animation: selectedorgan 0.3s ease-in-out;
  
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.GoogleChartOrgSelected:hover {
  background: #56d866;
}

/* -- Animação dos itens selecionados -- */
@-webkit-keyframes selectedorgan {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: 100%;
    opacity: 0;
  }
}

@-moz-keyframes selectedorgan {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: 100%;
    opacity: 0;
  }
}

@-o-keyframes selectedorgan {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: 100%;
    opacity: 0;
  }
}

@keyframes selectedorgan {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: 100%;
    opacity: 0;
  }
}


/*******************************************/
/*            PESQUISA DO MENU             */
/*******************************************/
.DocumentSearchItens{
  top: 0;
  left: 0;
  width: 100%;
  position: relative;
  min-height: 40px;
}

.DocumentSearchItens > input{
  position: relative;
  top: 0;
  width: 100%;
  min-height: 40px;
  color: rgb(138, 140, 142);
  line-height: 16px;
  text-align: left;
  text-indent: 40px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif, arial;
  border: solid 1px #dddddd;
  outline: none;
  margin-bottom: 10px;
  border-radius: 2px;
  background: url('search-menu-magnify.png') no-repeat left 10px center #fff;
  background-repeat: no-repeat;
  background-size: 18px;
  transition: 0.2s;
}

.DocumentSearchItens > input:focus {
  text-indent: 15px;
  background-position: -28px;
  border-color: #A9ACAF;
  box-shadow: 2px 2px 3px 1px #D2D2D2;
}

.resultSearchList{ 
  width: 100%;
}

.resultSearchList #result-item-selected {
  background: url(arrow_item_msb.png) no-repeat center right 0px rgba(228, 230, 232, 0.8);
  padding-right: 0px;
  z-index: 10000;
}

.DocumentSearchItens > ul{
  height: auto !important;
  position: relative;
  width: 100%;
  left: 0;
  font-size: 10pt;
  padding: 5px 5px;
  margin: 0;
  background-color: #fff;
  color: #B0B4B7;
  border: solid 1px #dddddd;
}

.DocumentSearchItens > .HTMLImage {
  left: 235px !important;
  border: none;
  top: 7px !important;
  box-shadow: none;
}

.DocumentSearchItens > ul > li {padding: 0;}
.DocumentSearchItens > ul > li:hover { background-color: rgba(250, 250, 250, 0.1); }

.DocumentSearchItens > ul > li > a {
  text-decoration: none;
  font-weight: 500;
  color: #42484C;
  display: block;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 7px;
  padding-bottom: 7px;
  text-decoration: none;
  line-height: 25px;
  font-size: 12px;
}

.DocumentSearchItens > ul > li:hover{
  background-color: #EFEFEF;
}

.DocumentSearchItens .close-result {
  font-size: 20px;
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: #EAEAEA;
  background: url("search-menu-close.png") no-repeat center center #fff;
  background-size: 15px;
  cursor: pointer;
  padding: 4px 12px 9px 13px;
  border: none;
  height: 38px;
  width: 35px;
  outline: none;
  opacity: 0.8;
}

.DocumentSearchItens .close-result:hover { opacity: 1;}
.DocumentSearchItens .close-result:active { background-color: #D4D4D4; }

.result-way {
  display: none;
  position: relative;
  float: right;
  margin-top: 2px;
  padding: 7px 12px 5px 4px;
  line-height: 1;
  white-space: pre;
  color: black;
  cursor: default;
  background-color: #ecf0f1;
  border-radius: 2px;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif, arial;
  opacity: 0.9;
}

.result-way:before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  margin-top: -7.5px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #ECF0F1;
}

.resultSearchList li:hover .result-way,
.resultSearchList li#result-item-selected .result-way {
  display: block;
}

.resultSearchList li span {color: #85898C;}
.resultSearchList li b {font-weight: 500;}

@media screen and (max-width: 479px) {
  .DocumentSearchItens {
      width: 100% !important;
      height: 50px !important;
    }

  .DocumentSearchItens > input {
    width: 100%;
    margin-left: 0;
    min-height: 50px;
    font-size: 18px;
    line-height: 1.5;
  }

  .DocumentSearchItens > ul > li > a {
    font-size: 16px;
    line-height: 25px;
    text-indent: 0;
  }

  .DocumentSearchItens .close-result{
    height: 48px;
    width: 55px;
  }

  .DocumentSearchItens > ul {
    font-size: 15pt;
    line-height: 50px;
    text-indent: 15px;
    /* margin-top: 1px; */
  }
}

/********************************************/
/*              Localizar                   */
/********************************************/
.CustomTabSearch > div {
  position: relative;
  width: calc(100% - 72px);
  height: 45px;
  overflow-x: hidden;
  overflow-y: auto;
}

#busca_acao {
  width: 72px;
  transition: 1s all;
}

#div_busca_rodape {
  bottom: 7px!important;
  width: 100%;
  overflow: hidden;
}

.CustomTabSearch img {
  float: right;
  margin: 2px;
  z-index: 3;
  cursor: pointer;
}

.CustomTabSearch #calendarDiv img{
	float: left;
	margin: 0px;
}

.CustomTabSearch > div > span {
  text-align: left;
  float: right;
  margin: 7px;
  font-weight: bold;
}

#div_busca_avancada_container {
  width: 100%;
}

.CustomTabSearch > tr {
  text-align: center;
  cursor: pointer;
}

#div_busca_avancada {
  position: absolute;
  height: calc(100% - 24px);
  display: table;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.619608);
  font-size: 15px;
  width: 100%;
}

#div_busca_avancada {
  position: absolute;
  height: calc(100% - 24px);
  display: table;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.619608);
  font-size: 15px;
  width: 100%;
}

#div_busca_avancada > div {
  width: 200px;
  background: #fff;
  text-align: center;
  position: relative;
  margin: 0 auto;
  vertical-align: middle;
  max-width: 200px;
  top: 75px;
  cursor: pointer;
  padding-top: 10px;
  word-break: break-all;
  max-height: 200px;
  overflow: auto;
}

#div_busca_avancada > div > div:hover:not(:last-child) {
  background: #78bff3;
  color: #fff;
  position: relative;

}

#div_busca_avancada > div > div:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

/********************************************/
/*              ESPECÍFICAS                 */
/********************************************/

.maker-container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#sidebar #MenuPrincipal {
    width: 100% !important;
    padding-left: 15px;
    height: calc(100% - 0px) !important;
    padding-top: 10px;
    overflow: hidden;
    position: absolute !important;
}

#sidebar #MenuPrincipal .HTMLMenuVertical {
    width: 100%;
    border-radius: 3px;
    overflow: auto;
    height: calc(100% - 50px);
}

/* -- CSS Barra de rolagem -- */

#sidebar #MenuPrincipal .HTMLMenuVertical::-webkit-scrollbar {
  width: 8px;
}
#sidebar #MenuPrincipal .HTMLMenuVertical::-webkit-scrollbar-button {
  display: none;
}
#sidebar #MenuPrincipal .HTMLMenuVertical::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.06);
}
#sidebar #MenuPrincipal .HTMLMenuVertical::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 1px;
  transition: 0.5s;
}
#sidebar #MenuPrincipal .HTMLMenuVertical:hover::-webkit-scrollbar-thumb {
  background-color: rgba(110, 110, 110, 0.8);
}

#sidebar #MenuPrincipal .HTMLMenuVertical > ul {
  overflow: auto;
  border: solid 1px #dddddd;
}



/* CSS MAKER PARA A NOVA VERSÃO */
.sidebar-toggle {
  width: 50px;
  height: 50px;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sidebar-toggle .HTMLImage {
    left: 0 !important;
    top: 0 !important;
    position: relative !important;
}

.options-action {
    display: inline-block;
    float: right;
    cursor: pointer;
}

.options-action:hover{
  background-color: rgba(255,255,255,0.10);
}

#dropdown-options {
  display: block;
  padding: 7px 4px 7px 4px;
  position: absolute;
  float: right;
  top: 46px;
  right: 0px;
  border-radius: 2px;;
  min-width: 200px;
  min-height: 33px;
  background-color: #fafafa;
  
  -webkit-box-shadow: 1px 1.732px 3px 0px rgba(5, 3, 5, 0.18);
  -moz-box-shadow: 1px 1.732px 3px 0px rgba(5, 3, 5, 0.18);
  -o-box-shadow: 1px 1.732px 3px 0px rgba(5, 3, 5, 0.18);
  -ms-box-shadow: 1px 1.732px 3px 0px rgba(5, 3, 5, 0.18);
  box-shadow: 1px 1.732px 3px 0px rgba(5, 3, 5, 0.18);
}

#maker-option-1 #dropdownMenu {
  float: right;
  top: 46px !important;
  right: 0;
  animation-name: dropdown;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

  #maker-option-1 #dropdownMenu > div {
    width: 100%;
    float:right;
  }

  #maker-option-1 #dropdownMenu li:not(:last-child) { border-bottom: solid 1px #EAECED;}
    #maker-option-1 #dropdownMenu > div ul { border: solid 1px #EAECED;}

.dropdown > div:nth-child(2) {
    display: block !important;
    z-index: 9989 !important;
    position: relative;
}

#maker-profile > div {
    float: right;
    display: inline-block !important;
    position: relative !important;
}

#maker-profile .HTMLImage {
    border-radius: 50%;
    overflow: hidden;
}


/********************************************/
/*           SISTEMA DE DIVISOES            */
/********************************************/

[class*="mk-layout-"] {
  float: left;
  padding: 7.5px;
  display: block;
  height: 100%;
}

.mk-layout-1 {width: 28.00%;}
.mk-layout-2 {width: 16.00%;}
.mk-layout-3 {width: 28.00%;}
.mk-layout-4 {width: 28.00%;}
.mk-layout-5 {width: 35.00%;}
.mk-layout-6 {width: 30.00%;}
.mk-layout-7 {width: 35.00%;}
.mk-layout-8 {width: 58.33%;}
.mk-layout-9 {width: 41.67%;}
.mk-layout-10 {width: 41.67%;}
.mk-layout-11 {width: 58.33%;}
.mk-layout-12 {width: 50.00%;}
.mk-layout-13 {width: 50.00%;}
.mk-layout-14 {width: 60.00%;}
.mk-layout-15 {width: 40.00%;}

.mk-line:after {
  content: "";
  clear: both;
  display: block;
}

.mk-box {
  background-color: #fff;
  min-height: 100px;
  border: solid 1px #e9e9e9;
  display: block;
  width: 100%;
  height: auto;
  float: left;
  position: relative;
}

.mk-box > div {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

@media (max-width: 767px){ 
  [class*="mk-layout-"] {
    width: 100%;
    float: left;
  }

  #maker-profile {
    display: none !important;
  }
}

/* CCS Boxer de ações */
#BoxerActions {
  height: auto !important;
  min-height: auto !important;
  float: right;
  right: 0;
  background-color: white;
  padding: 10px 10px;
  border-radius: 4px;
  animation-name: dropdown;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

#BoxerActions:after, #BoxerActions:before {
  content: " ";
  bottom: 100%;
  right: 67.5px;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#BoxerActions:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #fff;
  border-width: 8px;
  margin-left: -8px;
}
#BoxerActions:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #fff;
  border-width: 8px;
}

#BoxerActions > div {
  position: relative !important;
  width: 80px !important;
  height: 80px !important;
  float: left;
  left: 0;
  top: 0;
  margin-left: 2px;
  margin-bottom: 2px;
  border-radius: 2px;
  border: solid 1px #ECECEC;
}

#BoxerActions > div:hover { background-color: #F0F0F1; }
#BoxerActions > div:active { background-color: #DDE1E2; }

#maker-profile{
  padding-right: 10px;
  height: 50px;
} 

#maker-profile:hover {background-color: #ff9428;}
#maker-profile > .HTMLImage {top: 5px;}
#maker-profile > .HTMLLabel { top: 14.5px; }
#maker-profile > .HTMLLabel > div { float: right; }
[class*=collapse] {margin-left: -250px !important;}
[class*=collapse] + [class*=content-dashboard] {left: 0 !important;margin-left: 0 !important;}

#maker-profile > .HTMLLabel > div > div {
  font-size: 13px !important;
  font-family: 'Open Sans', sans-serif, arial !important;
  background-color: transparent !important;
}


/* Navegação da grid e da tabela */
.active-templates-row:nth-child(2n) .active-row-cell {
  background-color: #F2F2F3;
}

.HTMLNavigationGrid {
  width: 100%;
  height: 25px !important;
  margin-top: -2px;
}

.HTMLNavigationGrid .HTMLButton {
  margin-right: 3px;
  border-radius: 0;
  height: 25px !important;
  float: left;
}
.HTMLNavigationGrid .HTMLButton button {
  height: 25px !important;
  width: 100% !important;
  cursor: pointer;
}

.HTMLTable button {
  height: 25px !important;
  cursor: pointer;
}
  
.HTMLNavigationGridButton-Include{
  width: 61px !important;
}

.HTMLNavigationGridButton-Edit,
.HTMLNavigationGridButton-Refresh,
.HTMLNavigationGridButton-Delete {
  margin-left: 21px !important;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Include > button, .HTMLTable [id*="div_botoes"] button[id*="_inclusao"] {
  position: absolute;
  float: left;
  padding-right: 20px;
  border-radius: 2px;
  border: solid 1px #459C48 !important;
  background: url("grid-incl.png") no-repeat top 5px left 7px #4CAF50 !important;
  background-size: 12px !important;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Include > button:hover, .HTMLTable [id*="div_botoes"] button[id*="_inclusao"]:hover{
  background-color: #57bb5b !important;
}

.HTMLNavigationGrid .HTMLButton button img,
.HTMLTable button img {
  display: none;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Include > button span:before, .HTMLTable [id*="div_botoes"] button[id*="_inclusao"]:before {
  content:'Add';
  display: block;
  position: absolute;
  top: 4px;
  left: 22px;
  font-size: 12px;
  float: left;
  color: #fff;
  padding-left: 6px;
  border-left: solid 1px #459C48;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Edit > button, .HTMLTable [id*="div_botoes"] button[id*="_edicao"]  {
  background: url("grid-alt.png") no-repeat center 5px #2595E4 !important;
  background-size: 13px !important;
  border: solid 1px #2187D0;
  border-radius: 3px;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Edit > button:hover, .HTMLTable [id*="div_botoes"] button[id*="_edicao"]:hover  {
  background-color: #3D97D8 !important;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Delete > button, .HTMLTable [id*="div_botoes"] button[id*="_exclusao"] { 
  background: url("grid-del.png") no-repeat center 5px #F44336 !important;
  background-size: 14px !important;
  border: solid 1px #F44336;
  border-radius: 3px;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Delete > button:hover, .HTMLTable [id*="div_botoes"] button[id*="_exclusao"]:hover {
  background-color: #f95240 !important;
}

.HTMLNavigationGrid .HTMLNavigationGridButton-Refresh > button {
  background: url("grid-reft.png") no-repeat center 3px #D8D9DA !important;
  background-size: 17px !important;
  border: solid 1px #B2B9BF;
}

.HTMLNavigationGrid [title*="Canc"] {
  background: #D8D9DA !important;
  color: #778592;
}

.HTMLNavigationGrid [title*="Cancelar"]:hover {
  border-color: silver;
}

.grid button[title="Cancelar"],
.grid button[title="Cancel"],
.grid button[title="Annuler"], {
  background-color: #DADADA !important;
  color: #80808F;
  border: solid 1px silver;
}

.HTMLTable button[id*="_salvar"] {
  border: none;
  border-radius: 3px;
  color: #fff;
  background: url("save-table-bt.png") no-repeat center #47C156 !important;
  background-size: 12px !important;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  outline: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.HTMLTable button[id*="_salvar"]:hover {
  background-color: #4ED05E !important;
}

.HTMLTable button:nth-child(4):focus { border: 2px solid #318C3C; }
.HTMLTable button:nth-child(4):active { background: #399E45; }

.HTMLTable button[id*="_cancelar"] {
  border-radius: 3px;
  background: url("cancel-table-bt.png") no-repeat center 5px #DADADA !important;
  background-size: 14px !important;
  border: solid 1px silver;
}

#maker-option-3 {
  display: none;
}

.HTMLTableBodyCell .HTMLComboBox input{
  border: 0px solid;
  box-shadow: 0px 0px 0px #000;
  font-size: 10px;
  padding: 0px;
  margin: 0px;
}
  
/********************************************/
/*       Responsividade especifica          */
/********************************************/

@media screen and (max-width: 1152px) {
  #maker-profile > .HTMLLabel {
    display: none !important;
  }

  #maker-profile:hover .HTMLLabel {
    display: block !important;
    position: relative !important;
    float: right !important;
    background: #292929 !important;
    right: 0 !important;
    margin-right: -35px;
    width: auto !important;
    height: auto;
    top: calc(100% + 5px) !important;
    border-radius: 4px;
    height: auto !important;
  }

  #maker-profile:hover .HTMLLabel div div { margin: 4px 7px; }
  .HTMLMenuHorizontal .HTMLFirstLevel > a { padding: 7px 0px 7px 0px; }
}

@media screen and (max-width: 1023px) {
  .maker-container-fluid { padding: 0 !important; } 
   #header .brand-header { display: none !important; }

  .navbar-default {
    margin-left: -100%;
    background-color: white;
  }

  [class*=collapse] {
    width: 280px !important;
    margin-left: 0 !important;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
  }
  
  sidebar.collapse {
    margin-left: 0;
    box-shadow: 0px 0px 3px 2px rgba(27, 27, 27, 0.18);
  }

  #sidebar #MenuPrincipal { padding: 0 !important; }
  .content-dashboard { margin-left: 0 !important; }
  .DocumentSearchItens { height: 50px !important; }

  .DocumentSearchItens > input {
    width: 100%;
    margin-left: 0;
    min-height: 50px;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0;
  }

  [class*=collapse] + [class*=content-dashboard] {
    left: 125px !important;
  }
}

@media screen and (max-width: 422px) {
  #BoxerActions {
    position: fixed !important;
    vertical-align: middle;
    right: auto;
    top: auto !important;
    left: 0;
    width: 100% !important;
    overflow: auto;
    height: calc(100% - 50px) !important;
    background-color: rgb(244, 246, 247);
    padding-top: 10px;
  }

  #BoxerActions > div {
    width: calc(33.3% - 2px) !important;
    height: auto !important;
    border-radius: 0;
    margin: 2px 1px 0 0;
    border: none;
  }
  
  #BoxerActions > div > img{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto;
  }

  .options-action:not(#maker-profile), 
  .options-action > div,
  .sidebar-toggle,
  .sidebar-toggle .HTMLImage,
  .sidebar-toggle .HTMLImage img{
    height: 60px !important;
    width: 60px !important;
  }

  .options-action > div >img {
    width: 60px !important;
    position: relative;
    top: 5px;
  }
  #maker-profile {
    height: 60px;
  }
  
  #maker-profile > div,
  #maker-profile > div > img {
    top: 0 !important;
    width: 50px !important;
    height: 50px !important;
  }

  #maker-profile > .HTMLImage { top: 5px !important; }
  #control-actions { padding: 0 !important; }
  #page-wrapper { padding-top: 60px !important; }

  #maker-option-1 #dropdownMenu {
    top: 58px !important;
    width: 220px !important;
    height: auto !important;
  }

  #dropdownMenu .HTMLMenuVertical .HTMLFirstLevel > a {
    line-height: 30px;
  }

  .HTMLMenu li a {
    font-size: 16px !important;
  }

  /* --------------------   Responsividade das janelas flutuantes */
  
  .WFRIframeForm {
    position: fixed;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 0;
  }

  .WFRIframeForm .Options > div { margin-left: 3px !important; }
  .FormIframe iframe { width: 100% !important;}
  .WFRIframeForm .Title { width: calc(100% - 32%) !important;}

  .WFRIframeForm .Title,
  .WFRIframeForm .Options {
    padding-top: 10px;
  }



  .HTMLTabController,
  .HTMLNavigationFormBar {
    width: 100% !important;
    background: #F5F5F5 !important;
    top: 0 !important;
  }

  .WFRIframeForm .StatusBar {
    height: 50px;
    position: absolute;
    z-index: 9;
    margin-left: 55px;
    max-width: calc(100% - 55px);
  }

  /* --------------------   Responsividade dos formulários */
  /*
  *Removido devido a barra de rolagem não persistir no mobile.
  #lay {
    overflow: hidden !important;  
  }
  */
  .HTMLTabController {
    position: relative;
    background: #FEFEFC !important;
    overflow: hidden;
  }
  .HTMLTabContainer {
    height: 100%;
    top: 50px !important;
  }

  .HTMLTabController td {
    padding: 0;
  }
  
  .HTMLTabArea{
    padding-left: 15px;
    padding-right: 15px;
    position: relative !important;
    border: none;
    top: 0 !important;
  }
  
  .HTMLEdit:not([id*="BodySearchFilterUserInput"]), 
  .HTMLEdit div:last-child:not(.HTMLImage),
  .HTMLComboBox,
  .HTMLComboBox > div:last-child {
    height: auto !important;
  }

  .HTMLEdit div:first-child,
  .HTMLComboBox div:first-child {
    position: relative !important;
    height: auto !important;
    margin-bottom: 8px;
  }

  .HTMLEdit>div>input,
  .HTMLComboBox>div>input {
    width: 100% !important;
  }

  .HTMLComboBox> div> .HTMLButton { width: 45px !important; }
  .HTMLComboBox> div> .HTMLButton button { background-size: 15px !important; }

  .HTMLEdit font,
  .HTMLComboBox font strong {
    font-weight: 500 !important;
  }

  .HTMLComboBoxDetails {
    width: calc(100% - 30px) !important;
    display: block;
    left: 17px !important;
    margin-top: 25px !important;
  }
  
  .formViewDiv {
    width: calc(100% - 17px) !important;
    top: 95px !important;
  }

  .HTMLNavigationGrid { height: 60px !important; }
  .HTMLNavigationGrid .HTMLButton { height: 50px !important; }
  .grid { width: calc(100% - -12px)!important; }

  .HTMLNavigationGrid .HTMLButton button {
    height: 27px !important;
    min-height: 27px !important;
    margin-top: 15px;
  }

  .HTMLNavigationMenu {
    background: url("menu.png") no-repeat center center #E9ECEC !important;
    background-size: 34px !important;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    opacity: 0.5;
  }

  .HTMLNavigationMenu-active {
    left: 0;
    top: 0;
    background: url("close.png") no-repeat center center #E9ECEC !important;
    background-size: 34px !important;
    opacity: 0.5;
  }

  .HTMLTab, .HTMLTab-Selected {
    height: 45px;
    display: inline;
    margin: 0;
    border-radius: 0;
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-top: 4px;
    padding: 6px 10px 0 10px;
    font-size: xx-small;
  }

  .HTMLTab-Selected {
    padding-top: 12px;
    border-bottom: solid;
  }

  .HTMLNavigationForm {
    height: 100% !important;
    width: 60px !important;
  }

  .HTMLNavigationForm[style*="display: none"] + .HTMLTabContainer {
    top: 0 !important;
  }

  .HTMLNavigationGridButton-IncludeCancel,
  .HTMLNavigationGridButton-IncludeCancel button,
  .HTMLNavigationGridButton-IncludeSave,
  .HTMLNavigationGridButton-IncludeSave button {
    overflow: visible;
    float: left !important;
    display: inline-block !important;
    float: right !important;
    clear: left;
    margin-top: -24px;
    min-height: 40px !important;
  }

  .HTMLNavigationForm .HTMLNavigationFormButton, .HTMLNavigationButton {
    min-height: 35px;
    padding-top: 0 !important;
  }

  #arealogin {
    top: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    position: fixed !important;
  }
}

.FormIframe iframe {
  position: relative !important;
}

/* Form de Login */
#arealogin > div {
  left: auto !important;
  position: relative !important;
  margin: 0 auto;
  line-height: 1.5;
}
#arealogin #EdtEmpresa { top: 50px !important; }
#arealogin #EdtLogin { top: 15px !important; }
#arealogin #EdtSenha { top: 95px !important; }
#arealogin #BttLogar { top: 220px !important; }

#arealogin #txwelcome {
  font-family: 'Open Sans', sans-serif, arial;
  top: 0 !important;
  margin-top: -233px;
}

#arealogin #txdescricao {
  font-family: 'Open Sans', sans-serif, arial;
  top: 25px !important;
}

#arealogin #cpfooter { top: 300px !important; }
.WFRIframeForm .OptionMinimize { background-image: url('wmin.png'); }
.WFRIframeForm .OptionMinimize:hover { background-image: url('wmin_hover.png');}
.WFRIframeForm .OptionRefresh { background-image: url('wrec.png');}
.WFRIframeForm .OptionRefresh:hover { background-image: url('wrec_hover.png');}

.WFRIframeForm .OptionClose {
    width: 30px;
    background-image: url('wclose.png');
}

.WFRIframeForm .OptionClose:hover {
    width: 30px;
    background-image: url('wclose_hover.png');
}

.WFRIframeForm .OptionClose:active {
    width: 30px;
    background-image: url('wclose_active.png');
}

#minimizedFloatingDivs {
    bottom: 17px;
    height: 26px;
}

#minimizedFloatingDivs .WFRIframeForm .OptionMinimize { background-image: url('wmin-max.png'); }
#minimizedFloatingDivs .WFRIframeForm .OptionMinimize:hover { background-image: url('wmin-max_hover.png');}

/********************************************/
/*              Animations                 */
/********************************************/

@-webkit-keyframes dropdown {
    from { right: -20px; opacity: 0;}
    to   { right: 0; opacity: 1;}
}
@-moz-keyframes dropdown {
    from { right: -20px; opacity: 0;}
    to   { right: 0; opacity: 1;}
}
@-o-keyframes dropdown {
    from { right: -20px; opacity: 0;}
    to   { right: 0; opacity: 1;}
}
@keyframes dropdown {
    from { right: -20px; opacity: 0;}
    to   { right: 0; opacity: 1;}
}

/********************************************/
/*                 UPLOAD                   */
/********************************************/

.HTMLBodyUpload{
  background: #fff;
}

.HTMLButtonUpload{
 background: #FFFFFF!important;
  width: 100px;
  height: 35px;
  border-radius: 14px;
  border: 1px solid #D3D1D1;
}

.HTMLButtonUpload:hover{
  border: 1px solid #f00;
}

.HTMLButtonUpload .botao{
  color: #000!important;
  font-size: 12px;
}

/*******************************************************/
/* HTMLGroupBoxCheck: Componente Moldura no CheckList  */
/*******************************************************/

.HTMLGroupBoxCheckDefault{
  border-radius: 0px;
  text-align: center;  
  text-indent: -18%;
  line-height: 41px;
  font-size: 17px;
  cursor: default;
}

.HTMLGroupBoxCheckTrue{
  background-color: #C2E2C1;
  text-decoration: line-through;
  color: #047700;
}

.HTMLGroupBoxCheckFalse{
  background-color: #FF9B97;
  color: #864343;
  border: none;
}

.HTMLGroupBoxCheckWarning{
  background-color: #f0ad4e;
  text-decoration: line-through;
  color: #885000;
}

.HTMLSystemCheckLabelInfo > div >div{
  font-size: 12px!important;
  color: #fff!important;
}

.HTMLSystemCheckLabelInfo > div >div:hover{
  font-size: 13px!important;
}

.HTMLSystemCheckLabelInfo a{
  color: #fff!important;
}

.HTMLSystemCheckOk{
  color: #047700;
}

.HTMLSystemCheckFail{
  color: #f00;  
}

.charts-tooltip{
  display: none !important;
}

@media (max-width: 420px){
	.HTMLEdit:not([id*="BodySearchFilterUserInput"]){
	    top: 28px!important;
	    padding-bottom: 24px!important;
	}
}

@media (max-width: 420px){

.HTMLLookup {
    width: 100%!important;
    position: relative!important;
    left: 2px!important;
    top: 25px!important;
    padding-bottom: 47px!important;
}

.HTMLNavigationGrid > .HTMLNavigationGridButton-Include {
    position: absolute!important;
    width: 59px!important;
    top: 0px!important;
}

.active-box-normal {
    height: 27px!important;
}

}

@media screen and (max-width: 422px){
.HTMLEdit div:first-child, .HTMLComboBox div:first-child {
    margin-bottom: 13px;
    top: -18px!important;
}

}

/*********************************************/
/***               ACCORDION               ***/
/*********************************************/
.HTMLAccordion {
  overflow: hidden; 
  margin: -1px; 
  color: #474747; 
  padding: 0px;
  background: #ececec;
  width: 100%;
  height: 100%;
}
/*Configurações Gerais*/

.HTMLAccordion section h2 a{
  padding:8px 10px;
  display:block; 
  font-size:100%;  
  font-weight:normal;
  color: #525252;
  text-decoration:none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Open Sans', sans-serif, arial;
}

/*Apresentação do Slide fechado*/
.HTMLAccordion section{
  float: left; 
  cursor: pointer; 
  overflow: hidden;
  background-color: rgba(80, 80, 80, 0.05);
  margin:1.9px;
}

.HTMLAccordion section:hover {
  background-color: rgba(93, 93, 93, 0.19);
}

.HTMLAccordion section p {
  visibility:hidden;
}

.HTMLAccordion section div {
  visibility:hidden;
}

.HTMLAccordion section:after{
  position:relative;
  font-size:24px;
  color:#000;
  font-weight:bold;
}

/*Configuração para o horizontal*/
.HTMLAccordionHorizontal section{ 
  -moz-transition:width 0.2s ease-out; 
  -webkit-transition:width 0.2s ease-out;
  -o-transition:width 0.2s ease-out;
  -ms-transition:width 0.2s ease-out;
  transition:width 0.2s ease-out;
  border-top: 2px solid #89C396;
}
/**/
.HTMLAccordionHorizontal section:after{
  top:140px;
  left:15px;
}
/**/
.HTMLAccordionHorizontal section h2 { 
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width:240px; 
  position:relative; 
  left:-100px; 
  top:85px;
} 

/*Configuração para o vertical*/
.HTMLAccordionVertical section{ 
  width:99%; 
  height:36px;
  -webkit-transition:height 0.2s ease-out;
  -moz-transition:height 0.2s ease-out;
  -o-transition:height 0.2s ease-out;
  -ms-transition:height 0.2s ease-out;
  transition:height 0.2s ease-out;
  border-left: 2px solid #89C396;
}
/**/
.HTMLAccordionVertical section h2 { 
  position:relative; 
  left: 0px; 
  top: 0px;
  margin: 0px;
}
/**/
.HTMLAccordionVertical section:after{ 
  top:-60px;
  left:810px;
}

/*Abrir Horizontalmente*/
.HTMLAccordionHorizontalOpen{
  -moz-transition:width 0.2s ease-out; 
  -webkit-transition:width 0.2s ease-out;
  -o-transition:width 0.2s ease-out;
  -ms-transition:width 0.2s ease-out;
  transition:width 0.2s ease-out; 
  background:#FFF!important; 
  padding:0px!important; 
  background: #FFF!important;
  opacity: 1.0!important;
  border-top: 2px solid #89C396!important;
  border-bottom: solid 3px #89C396!important;
  border-left: 0px solid #41A200!important;
}

.HTMLAccordionHorizontalOpen h2 {
  width:100%!important;
  top:0px!important;
  left:0px!important;
  -webkit-transform:rotate(0deg)!important;
  -moz-transform:rotate(0deg)!important;
  -o-transform: rotate(0deg)!important;
  -ms-transform: rotate(0deg)!important;
  transform: rotate(0deg)!important; 
  margin: 0px;
}

.HTMLAccordionHorizontalOpen h2 a{
  color: #3E824D !important;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 120%!important;
  transition: font-size 0.2s;
}

.HTMLAccordionHorizontalOpen p {
  visibility:visible!important;
}

.HTMLAccordionHorizontalOpen div {
  visibility:visible!important; 
  color:black!important;
}

/*Abrir Verticalmente*/
.HTMLAccordionVerticalOpen{ 
  width:99%!important;
  background: #FFF!important;
  opacity: 1.0!important;
  border-top: 2px solid #89C396!important;
  border-bottom: solid 3px #89C396!important;
  border-left: 0px solid #41A200!important;
}

.HTMLAccordionVerticalOpen:after{ 
  left:-9999px!important;
}

.HTMLAccordionVerticalOpen p {
  visibility:visible!important;
}
.HTMLAccordionVerticalOpen div {
  visibility:visible!important; 
  color:black!important;
}

.HTMLAccordionVerticalOpen h2 a{
  color: #3E824D !important;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 120%!important;
  transition: font-size 0.2s;
}



// Spinner Variables
//********************************************************//
$color:      #ffffff;
$size:       30px;
$speed:      0.75s;
$thickness:  8px; // Odd numbers created a "wobble" effect.


// Animation Keyframes
//********************************************************//

@-webkit-keyframes rotate-forever { @include rotate-forever; }
   @-moz-keyframes rotate-forever { @include rotate-forever; }
        @keyframes rotate-forever { @include rotate-forever; }


// The Loading Spinner?
//********************************************************//
.loading-spinner {
  @include animation-duration($speed);
  @include animation-iteration-count(infinite);
  @include animation-name(rotate-forever);
  @include animation-timing-function(linear);
  @include size($size);
  border: $thickness solid $color;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
}


/***********************************/
/****** Classe HTMLMessage  ********/ 
/**********************************/

.HTMLMessage {
  left: calc(50% - 150px);
  position: absolute;
  cursor: default;
  top: 30%;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin: 9px;
  z-index: 999998;
  background: rgb(255, 255, 255);
  padding: 15px 12px 0 12px !important;
  width: 350px;
  /*border: 1px solid #efefef;*/
  transition: top 0.2s;
  animation: showHTMLMessage 0.2s;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  display: inline-grid;
  
}

@media screen and (max-height: 350px){
  .HTMLMessage{
    top: 0px;
    transform: scale(.95);
  }
}




/**
* Classe HTMLMessageOverlay (overlay)
**/
.HTMLMessageOverlay {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 100;
    transition: display 0.2s;
}

/**
* Classe HTMLMessageTitle (título principal)
**/

.HTMLMessageTitle {padding-top: 0px;font-weight: 600;font-size: 1rem;margin: 0;}

/**
* Classe HTMLMessageMessage (mensagem)
**/

.HTMLMessageMessage {
    margin: 5px 0 0 0;
    font-size: .9rem;
    color: #b6b7b7;
}

.HTMLMessageContainerButtons {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 16px;
  min-height: 0;
  color: white;
  overflow: hidden;
  text-align: right;
  font-size: small;
  font-family: sans-serif, arial;
}

.HTMLMessageConfirm {
  position: relative;
  width: 85px;
  background-color: rgb(54, 204, 93);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  font-family: inherit;
  margin: 0 auto;
  padding: 8px 13px;
}

.HTMLMessageConfirm:hover {
  cursor: pointer;
}

.HTMLMessageConfirmError {
  position: relative;
  height: 24px;
  width: 85px;
  background-color: rgb(19, 123, 212);
  border: none;
  color: #fff;
  font-size: 11px;
  font-family: inherit;
  margin: 0 auto;
}

.HTMLMessageConfirmError:hover {
  cursor: pointer;
}


.HTMLMessageCancel {
  position: relative;
  display: block;
  width: 85px;
  border-radius: 4px;
  background-color: rgb(213, 216, 220);
  border: none;
  cursor: pointer;
  to; */
  border-radius: 4px;
  color: #61666d;
  font-size: .8rem;
  margin: 0 6px;
  font-weight: 600;
  padding: 8px 13px;
}

.HTMLMessageCancel:hover {
  cursor: pointer;
}

.HTMLMessageInputText {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #969696;
  height: 25px;
  margin-top: 10px;
  font-size: 13px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.HTMLMessageInputText:focus {
  border-color: #137bd4;
}

.HTMLMessageWarning {
  width: 28px;
  height: 28px;
  border: 4px solid gray;
  border-radius: 50%;
  border-color: #F8BB86;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 20px;
  position: relative;
  box-sizing: content-box;
  float: left;
  display: none;
}

.HTMLMessageWarningBody {
  position: absolute;
  height: 8px;
  left: 50%;
  top: 4px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-left: -2px;
  border-color: #F8BB86;
  border: 2px solid;
}

.HTMLMessageWarningDot {
  position: absolute;
  height: 1px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: -3px;
  left: 52%;
  bottom: 5px;
  border-color: #F8BB86;
  border: 2.5px solid;
}

.HTMLMessageAnimate{
  -webkit-animation: HTMLMessageAnimate 0.75s infinite alternate;
  animation: HTMLMessageAnimate 0.75s infinite alternate;
}

@-webkit-keyframes HTMLMessageAnimate {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } 
}

@keyframes HTMLMessageAnimate {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } 
}

.HTMLMessageError {
  width: 28px;
  height: 28px;
  border: 4px solid gray;
  -webkit-border-radius: 40px;
  border-color: #F27474;
  border-radius: 40px;
  border-radius: 50%;
  margin-top: 2px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  position: relative;
  float: left;
  box-sizing: content-box;
}

.HTMLMessageErrorMain {
  position: relative;
  display: block;
}

.HTMLMessageErrorRight {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 6px;  
}

.HTMLMessageErrorLeft {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 6px;
}

.HTMLMessageErrorLine {
  position: absolute;
  height: 4px;
  width: 16px;
  background-color: #F27474;
  display: block;
  top: 12px;
  border-radius: 14px;
}

.HTMLMessageBoxDetails {
  word-break: break-all;
  position: static;
  border: none;
  max-height: 0;
  max-height: 0px;
  padding: 0; 0 */
  overflow: hidden;
  display: block;
  width: 100%;
  transition: max-height 0.4s;
  -webkit-transition-delay: 0.1s; /* Safari */
  transition-delay: 0.1s;
  top: 80%;
}


.HTMLMessageDetails {
  position: relative;
  align-items: center;
  float: right;
  right: 9px;
  margin-top: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  background: #dddede;
}

.HTMLMessageDetails *{
  background-color: #9c9c9c;
}

.HTMLMessagePlusX {
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  left: calc(50% - 6px);
  top: 9px;
  position: absolute;
  height: 2px;
  width: 12px;
  display: block;
  transition: transform 0.2s ease-in;
  transition-delay: 0.1s;
}

.HTMLMessagePlusXClick {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: calc(50% - 6px);
  position: absolute;
  height: 2px;
  width: 12px;
  display: block;
  top: 9px;
  transition: transform 0.3s ease-in;
  transition-delay: 0.1s;
}

.HTMLMessagePlusY {
  cursor: pointer;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 9px;
  height: 2px;
  width: 12px;
  left: calc(50% - 6px);
  display: block;
  position: absolute;
  transition: transform 0.3s;
  transition-delay: 0.1s;
}

.HTMLMessagePlusYClick {
  cursor: pointer;
  /*-webkit-transform: rotate(90deg);
  transform: rotate(90deg);*/
  height: 2px;
  width: 12px;
  top: 9px;
  left: calc(50% - 6px);
  display: block;
  position: absolute;
  transition: transform 0.4s ease-out;
  transition-delay: 0.1s;
}

.HTMLMessageMessage > p {
    margin: 0 0 18px 0;
}


@keyframes showHTMLMessage{
  0%{
  transform: scale(0.7);
  opacity: 0.5;
  }
  50%{
  transform: scale(1.2);
  opacity: 0.7;
  }
  70%{
  transform: scale(1.1);
  opacity: 0.9;
  }
  100%{
  transform: scale(1);
  opacity: 1;
  }
}

.HTMLMessageTextDetails:not(:empty) {
  padding: 10px;
  background: #ebeeef;
}



.HTMLMessageLeftEscape {
  position: relative;
  animation-name: HTMLMessageEscapeToLeft;
  animation-duration: 0.2s;
}

@-webkit-keyframes HTMLMessageEscapeToLeft{
  0%{opacity: 1;}
  25%{opacity: 0.7; left: -70px; transform: scale(.9)}
  50%{opacity: 0.5; left: -140px; transform: scale(.7)}
  75%{opacity: 0.3; left: -210px; transform: scale(.6)}
  80%{opacity: 0.2; left: -280px;  transform: scale(.4)}
  100%{opacity: 0.1; left: -360px; transform: scale(.2)}
}

@keyframes HTMLMessageEscapeToLeft{
  0%{opacity: 1;}
  25%{opacity: 0.7; left: -70px; transform: scale(.9)}
  50%{opacity: 0.5; left: -140px; transform: scale(.7)}
  75%{opacity: 0.3; left: -210px; transform: scale(.6)}
  80%{opacity: 0.2; left: -280px;  transform: scale(.4)}
  100%{opacity: 0.1; left: -360px; transform: scale(.2)}
}

.HTMLMessageRightEscape {
  position: relative;
  animation-name: HTMLMessageEscapeToRight;
  animation-duration: 0.2s;
}

@-webkit-keyframes HTMLMessageEscapeToRight{
  0%{opacity: 1;}
  25%{opacity: 0.7; right: -70px; transform: scale(.9)}
  50%{opacity: 0.5; right: -140px; transform: scale(.7)}
  75%{opacity: 0.3; right: -210px; transform: scale(.6)}
  80%{opacity: 0.2; right: -280px;  transform: scale(.4)}
  100%{opacity: 0.1; right: -360px; transform: scale(.3)}
}

@keyframes HTMLMessageEscapeToRight{
  0%{opacity: 1;}
  25%{opacity: 0.7; right: -70px; transform: scale(.9)}
  50%{opacity: 0.5; right: -140px; transform: scale(.7)}
  75%{opacity: 0.3; right: -210px; transform: scale(.6)}
  80%{opacity: 0.2; right: -280px;  transform: scale(.4)}
  100%{opacity: 0.1; right: -360px; transform: scale(.3)}
}


/*******************************************************/
/* HTMLListagem: Componente Listagem                   */
/*******************************************************/
.HTMLListagem .HTMLImage{
  cursor: pointer;
  max-width: 30px;
}

.HTMLListagemFields {
   overflow: auto;
   height: calc(100% - 75px);
}

.HTMLListagemFields > div {
  width: 100%;
  height: 20px;
  display: inline-flex;
  position: relative;
  background: #e9ecec;
  overflow: hidden;
}

.HTMLListagemFields > div .HTMLCheckBox{
  display: inline-flex!important;
  position: relative!important;
  overflow: hidden!important;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #555B61;
  text-indent: 5px;
}

.HTMLListagemFields > div .HTMLCheckBox > input{
  margin-left: calc(50% - 7.5px);
}

.HTMLListagemFields > div .HTMLLabel{
  display: inline-flex!important;
  position: relative!important;
  overflow: hidden!important;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 10px;
  font-weight: 500;
  color: #555B61;
  text-indent: 5px;
  margin-top: 4px;
}

.HTMLListagemFields > div .HTMLLabel > div > div {
  background: rgba(255, 255, 255, 0);
}

.HTMLListagemFields > div .HTMLComboBox{
  display: inline-flex!important;
  position: relative!important;
  overflow: hidden!important;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #555B61;
  text-indent: 5px;
}

.HTMLListagemFields > div .HTMLEdit{
  display: inline-flex!important;
  position: relative!important;
  overflow: hidden!important;
  font-family: 'Open Sans', sans-serif, arial;
  font-size: 12px;
  font-weight: 500;
  color: #555B61;
  text-indent: 5px;
}
.endChat .icon {
    width: 11px!important;
    height: 11px!important;
    float: right!important;
    display: none!important;
    margin: 2.5px!important;
}