/*
Parâmetros padrão
hpro.css
Desenvolvido por HPro Consultoria em Informática Ltda
e-mail: contato@hpro.com.br
Desenvolvedor: José Eduardo Helminsky
Criado em 13/02/2021
Última atualização: 10/02/2025
*/
:root {
   --FullCenter: linear-gradient(179deg, #a1a1a1 -6%, #575757 22%, #575757);
   --FullBackgroundColor: url(images/background_default.png);
   --FullMenuBackgroundColor: #E0E0E0;

   --LogoLoginColor: #565655;
   --LogoLoginColorSecond: #01A09A; 
   --LogoUserColor: #ffffff;
   --LogoUserColorSecond: #01A09A; 

   --inputLoginLabelColor: #ffffff;
   --inputLoginLabelActiveColor: #575757;  
   --textLoginInputColor: #ffffff;    
   --inputLoginBackgroundColor: #575757;
   --inputLoginBorderColor: #ffffff;
   --buttonLoginColor: #00A19B;
   --buttonLoginColorHover: #095D68;
   --textPasswordColor: #ffffff;
   --textPasswordColorHover: #00A19B;

   --buttonTextColor: #000000;
   --buttonBackgroundColor: #84BEBC; 
   --buttonBorderColor: #808080; 
   --buttonTextColorHover: #ffffff;
   --buttonBackgroundColorHover: #095D68; 
   --buttonBorderColorHover: #000000; 
   --buttonDisabledColor: #808080; 
   --buttonFocusColor: #000000;

   --inputLabelColor: #737373;
   --inputLabelActiveBackgroundColor: #ffffff; 
   --inputLabelActiveColor: #095D68;
   --inputTextColor: #000000;
   --inputBackgroundColor: #ffffff;
   --inputBorderColor: #000000;
   --inputFocusColor: #00A19B;
   --inputRequiredColor: #FF0000;
   --inputLabelActiveDisabledColor: #808080;
   --inputDisabledColor: #737373;
   --inputDisabledBorder: #848484;
   --inputDisabledBackgroundColor: #ffffff;
   --textAttribute: #000000;
   --iconLupa: #000000;
   --iconMap: #ff0000;

   --CheckBoxLabelColor: #000000;
   --cboxBorder: #808080;
   --cboxBackgroundColor: #ffffff;
   --cboxBfBorder: #ffffff;
   --cboxCheckedBackgroundColor: #00A19B;

   --RadioButtonLabelColor: #000000;
   --rbtnBorder: #808080;
   --rbtnBackgroundColor: #ffffff;
   --rbtnBfBorder: #ffffff;
   --rbtnCheckedBackgroundColor: #00A19B;
   --rbtnCheckedBorder: #00A19B;

   --labelTop: 5px;
   --labelLeft: 5px;
   --labelActiveTop: -8px;
   --labelActiveLeft: 5px;
   --labelTopLogin: 12px;
   --labelLeftLogin: 6px;
   --labelActiveTopLogin: 1px;
   --labelActiveLeftLogin: 6px;

   --headerHeight: 62px;
   --headerBackgroundColor: #464646;
   --headerHamburguerColor: #00fff7; 
   --headerTitle: #ffffff;  
   --headerToolBorder: #ffffff;
   --iconColorHPro: #00fff2; 
   --iconColorRight: #00fff7;
   --iconColorHProHover: #ffffff;

   --calculatorTextColor: #ffffff;
   --calculatorBackgroundColor: #575757; 
   --calculatorScreenColor: #575757;
   --calculatorButtonColor: #095D68;
   --calculatorTextColorHover: #000000;
   --calculatorButtonColorHover: #0dd6cf;
   --calculatorButtonSimbolColor: #00A19B; 
   --calculatorBoxShadow: #000000;

   --calendarHeaderBackgroundColor: #00A19B;
   --calendarTitleColor: #ffffff;
   --calendarSubtitleColor: #000000;
   --calendarSubtitleColorHover: #ff0000;
   --calendarBackgroundColor: #575757;
   --calendarBoxShadow: #35343499;
   --calendarBorderColor: #00A19B;
   --calendarNoWorlColor: #ff0000;
   --calendarMonthColor: #ffffff;
   --calendarMonthYearColor: #ffffff;
   --calendarMonthYearColorHover: #00A19B; 
   --calendarWeekColor: #2b84d8;
   --calendarAniversarioColor: #4dd6cf59;
   --calendarFeriadoColor: #00fff21a;
   --calendarAgendaColor: #3be9e059;
   --calendarDayColor: #ffffff;
   --calendarDayColorHover: #000000;
   --calendarDayBackgroundColorHover: #3ad3c4;
   --calendarInputBackgroundColor: #575757;
   --calendarTextColor: #ffffff;
   --calendarInputBorderColor: #ffffff;
   --calendarOperationColor: #00fff7;
   --calendarArrowColor: #138882;
   --calendarArrowColorHover: #3ad3c4;
   --calendarYearColor: #ffffff;
   --agendaBackgroundColor: #575757; 
   --agendaDescriptionColor: #ffffff;
   --agendaDescriptionBackgroundColor: #016864;
   --agendaTitle: #ffffff;
   --agendaBackgroundColorHover: #3ad3c4;
   --agendaDescriptionColorHover: #000000;
   --agendaActiveTextColor: #000000;
   --agendaActiveBackgroundColor: #ffffffbd;
   --agendaSpecialDateTextColor: #1482e9;
   --agendaSpecialDateBackgroundColor: #ffffff;
  
   --menuFontSize: 12px;  
   --menuTextColor: #ffffff;
   --menuBackgroundColor: #575757;
   --menuHoverColor: #ffffff41;
   --menuHoverBorder: #ffffff;
   --menuSeparator: #c0c0c0;
   --menuIconColor: #00fff7;
   --menuItemDisabled: #c0c0c0;
   --menuWidth: 190pt;
   --menuLogoMainBackgroundColor: #00A099;
   --menuLogoMainBorder: #00A099;
   --menuSearchBackgroundColor: #575757;
  
   --viewColor: #000000;
   --viewColorHover: #b8b8b8;
   --viewCircleColor: #ffffff;
   --viewItemColor: #000000;
   --viewItemColorHover: #000000;
   --viewItemBackgroundColor: #ffffff;
   --viewItemBackgroundColorHover: #04c4ba; 
   --viewItemActiveColor: #ffffff;
   --viewItemActiveBackgroundColor: #138882;

   --comboItemActiveBackgroundColor: #138882;
   --comboItemActiveColor: #ffffff;
   --comboItemInactiveBackgroundColor: #ffffff;
   --comboItemInactiveColor: #000000;
   --comboArrow: #000000;
   --comboItemSelectBackgroundColor: #04c4ba;
   --comboItemSelectColor: #000000;
   
   --fontFamily: Verdana;
   --fontSize: 9pt;
  
   --groupTitleFontColor: #000000; 
   --groupTitleBackgroundColor: #79d4d0;
   --groupArrow: #000000;
   --groupBodyBackgroundColor: #ffffff;
   --groupMainBoxShadow: #969696;

   --dialogTitleColor: #000000;
   --dialogTitleBackgroundColor: #00A19B; 
   --dialogFontColor: #000000;
   --dialogBackgroundColor: #FFFFFF;
   --dialogBoxShadow: #3d3d3d; 
   --dialogButtonColor: #00A19B;
   --dialogButtonColorHover: #095D68;

   --popupMenuBackgroundColor: rgba(0,0,0,0.2);
   --popupOptionBackgroundColor: #84BEBC;
   --popupOptionColor: #000000;
   --popupOptionBorder: #808080;
   --popupOptionBackgroundColorHover: #04c4ba;
   --popupOptionColorHover: #000000;
   --popupOptionBorderHover: #000000;
   --popupOptionChecked: #095D68;

   --choiceConfirmBackgroundColor: #00A099;
   --choiceConfirmBackgroundColor2: #ffffff;
   --choiceCancelBackgroundColor: #FF0000;
   --choiceCancelBackgroundColor2: #ffffff;
   --choiceDeleteBackgroundColor: #000000;
   --choiceDeleteBackgroundColor2: #ffffff;
   --choiceVoltarBackgrounColor: #000000;
   --choiceVoltarBackgroundColor2: #000000;
   --choiceVoltarBackgrounColorInside: #fff0;
   --choiceFocus: #00A19B;

   --questionSvgBackgroundColor: #216ac8;
   --questionSvgBackgroundColor: #ffffff;

   --selectionTextBackgroundColor: #6ad4d1;
   --selectionTextColor: #000000;

   --counterTitleFontColor: #ffffff;
   --counterTitleFontSize: 12pt;
   --counterTitleBackgroundColor: #095D68;
   --counterDescriptionFontColor: #000000;
   --counterDescriptionFontSize: 14pt;
   --counterDescriptionBackgroundColor: #ffffff;  
}

* {
   border: 0;
   padding: 0;
   margin: 0;
   font-family: var(--fontFamily);
   font-size: var(--fontSize);   
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   box-sizing: border-box;
   user-select: none;
}
*::selection{
   background-color: var(--selectionTextBackgroundColor);
   color: var(--selectionTextColor);
}
a {
   color: blue;
   text-decoration: underline;
}
@keyframes rotate {
   to {
     transform: rotate(360deg);
   }
}
.column {
   display: table;
   position: relative;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
   align-self: flex-start;
   order:0;
   margin:0;
   padding:0;
   height:100%;
}
.columnTitle {   
   color: var(--groupTitleFontColor);
   background: var(--groupTitleBackgroundColor);
   text-align: center;
   margin-bottom: 3px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   height: 20px;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   display: flex;
}   
.errMessage {
   color: #ff0000;
   font-size: 16px;
   margin-top: 0.5rem;
   padding-bottom: 5px;
}
.listItem {
   display: flex;
   overflow: hidden;
   align-items: center;
   flex-flow: row;
   gap: 0.5rem;
   min-height: 2rem;
}
/******************************************************************************
Login
 *******************************************************************************/
.lg-Full {
   background: var(--FullBackgroundColor);
   background-size: cover;
   background-position: center;
}
.lg-Full .groupTitle {
   display: none;
}
.logoSvg {
   margin-top: 70px;
   margin-bottom: 30px;
}
#logoLogin {
   display: flex;
   justify-content: center;
   width: calc(100% - 400px);
   height: 100%;
   align-items: center;  
}
#logoLogin>svg {
   fill: var(--LogoLoginColor);
}
.logoSvgSecundaryColor2 {
   fill: var(--LogoLoginColorSecond);
}
#logoUser {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-bottom: 50px;
}
.lg-Full #titleUser {
   text-align: center;
   color: var(--inputLoginLabelColor);
   font-size: 18pt;
}
.lg-Full input {
   box-shadow: 0 0 0 30px var(--inputLoginBackgroundColor) inset !important;
   color: var(--textLoginInputColor);
   background-color: var(--inputLoginBackgroundColor);   
   height: 45px;
   font-size: 12pt;
   margin: 10px 12px 0 17px;
   border: 2px solid var(--inputLoginBorderColor);
   width: 93%;
   -webkit-text-fill-color: var(--textLoginInputColor);
}
.lg-Full .inputLabel {
   top: 14px;
   left: 28px;
   color: var(--inputLoginLabelColor);
   background-color: var(--inputLoginLabelActiveColor);
}
.lg-Full .inputLabelActive {
   top: 0;
   left: 27px;
   font-size: 12pt;
   color: var(--inputLoginLabelColor);
   background-color: var(--inputLoginLabelActiveColor);
} 
.lg-Full .inputFocus {
   border: 2px solid var(--inputFocusColor);
}
.lg-Full .inputRequired {
   border: 2px solid var(--inputRequiredColor);
}
.lg-Full button {
   width: 93%;
   margin: 14px 14px 0 17px;
   height: 40px;
   border: none;
   background-color: var(--buttonLoginColor);
}
.lg-Full button:hover {
   background-color: var(--buttonLoginColorHover);
   border: none;
}
.lg-Full #EPwd_showpwd {
   position: absolute !important;
   top: 42% !important;
   right: 7% !important;
   height: 41% !important;
   margin: 0 !important;
   cursor: pointer !important;
}
u {
   color: var(--textPasswordColor);
   text-decoration: none;
}
u:hover {
   color: var(--textPasswordColorHover);
}
.lg-Full .dialogButton {
   height: 25px;
   width: 25px;
   border: 1px solid var(--buttonBorderColor);
   margin-left: 0;
}
.lg-Full .dialogButton:hover {
   background-color: var(--dialogButtonColorHover);
}
.lg-Full .elParent {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: right !important;
   position: relative;
   padding: 0;
}

.lg-Full .groupMain {
   border: 0;
   margin: 0;
   height: 100vh;
   border-radius: 0;
   background-color: var(--FullCenter);
}
.lg-Full .groupBody {
   border-radius: 0;
   background: var(--FullCenter);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
}
/******************************************************************************
 BUTTON
 *******************************************************************************/
button {
   border: 1px solid var(--buttonBorderColor);
   border-radius: 4px;
   cursor: pointer;
   min-height: 25px;
   height: 25px;
   padding: 0px 5px 0px 5px;
   color: var(--buttonTextColor);
   background-color: var(--buttonBackgroundColor);
}
button:disabled {
   color: var(--buttonDisabledColor);
   cursor: default;
   pointer-events: none;
}
button:hover {
   border: 1px solid var(--buttonBorderColorHover);
   color: var(--buttonTextColorHover);
   background-color: var(--buttonBackgroundColorHover);
}
button:focus {
   outline: 1px solid var(--buttonFocusColor);
}
.buttonCenter {
   left: 0px;
   right: 0px;
   margin: auto;
   position: absolute;
}
/******************************************************************************
 COMBOBOX
 *******************************************************************************/
.comboItemActive {
   background-color: var(--comboItemActiveBackgroundColor) !important;
   color: var(--comboItemActiveColor) !important;
}
.comboItemInactive {
   background-color: var(--comboItemInactiveBackgroundColor);
   color: var(--comboItemInactiveColor);
}
.comboItemSelect:hover {
   background-color: var(--comboItemSelectBackgroundColor) !important;
   color: var(--comboItemSelectColor) !important;
}
.comboArrow {
   position: absolute;
   margin: 0;
   padding: 0;
   top: 3px;
   right: 0;
   font-family: var(--fontFamily);
   font-size: 12pt;
   font-weight: bold;
   cursor: pointer;
}
.comboArrow>svg {
   transform: rotate(0deg);
   transition: all 128ms;
   fill: var(--comboArrow);
}
.comboArrow.comboArrowActive>svg {
   transform: rotate(180deg);
}
.comboEdit {
   cursor: pointer;
}
/******************************************************************************
 CHOICE
 *******************************************************************************/
.choice {
   position: fixed;
   z-index: 2;
   cursor:pointer
}

.choice>.choiceConfirmIcon>.ConfirmBG {
   fill: var(--choiceConfirmBackgroundColor);
}

.choice>.choiceConfirmIcon>.ConfirmBG2 {
   fill: var(--choiceConfirmBackgroundColor2);
}

.choice>.choiceCancelIcon>.CancelBG {
   fill: var(--choiceCancelBackgroundColor);
}

.choice>.choiceCancelIcon>.CancelBG2 {
   fill: var(--choiceCancelBackgroundColor2);
}

.choice>.choiceDeleteIcon>.DeleteBG {
   fill: var(--choiceDeleteBackgroundColor);
}

.choise>.choiceDeleteIcon>.DeleteBG2 {
   fill: var(--choiceDeleteBackgroundColor2);
}

.choice>.choiceVoltarIcon>.VoltarBG {
   fill: var(--choiceVoltarBackgrounColor);
}

.choice>.choiceVoltarIcon>.VoltarBG2 {
   fill: var(--choiceVoltarBackgrounColorInside);
   stroke: var(--choiceVoltarBackgroundColor2);
}

.choice>.choiceConfirmIcon:focus {
   outline: 1px solid var(--choiceFocus);
}

.choice>.choiceCancelIcon:focus {
   outline: 1px solid var(--choiceFocus);
}

.choice>.choiceVoltarIcon:focus {
   outline: 1px solid var(--choiceFocus);
}

.choice>.choiceDeleteIcon:focus {
   outline: 1px solid var(--choiceFocus);
}
/******************************************************************************
 DIALOG
 *******************************************************************************/
.dialog {
   background-color: var(--dialogBackgroundColor);
   color: var(--dialogFontColor);
   vertical-align: middle;
   font-family: var(--fontFamily);
   font-size: var(--fontSize);
   align-self: center;
   -webkit-user-select: text;
   user-select: text;
   box-shadow: 4px 4px 4px 1px var(--dialogBoxShadow);
}
.dialogButton {
   min-width: 50px;
   font-family: var(--fontFamily);
   font-size: var(--fontSize);
   align-self: center;
   text-align: center;
   align-items: center;
   margin: 0px 5px 0px 5px;
   background-color: var(--dialogButtonColor);
}
.dialogButton:hover {
   background-color: var(--dialogButtonColorHover);
}
.dialogTitle {
   color: var(--dialogTitleColor);
   background: var(--dialogTitleBackgroundColor);
   top: 0;
   left: 0;
   padding: 0;
   height: 23px;
   line-height: 23px;
   width: 100%;
   text-align: center;
   font-family: var(--fontFamily);
   font-size: var(--fontSize);
   vertical-align: center;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
}
/******************************************************************************
 ELEMENT
 *******************************************************************************/
.elParent {
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   position:relative;
   padding: 5px 0px 5px 0px;
}
.elFullCenter {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   height: 100%;
   width: 100%;
}
.elDisabled {
   color: var(--inputDisabledColor);
   cursor: default;
   border: 1px solid var(--inputDisabledBorder);
   background-color: var(--inputDisabledBackgroundColor);
}

.elSizeP            { width: 115px }
.elSizePM           { width: 235px }
.elSizeM            { width: 355px }
.elSizeMG           { width: 475px }
.elSizeG            { width: 100%; flex: 1 }
.elSizeH            { width: 49.52% }
.elHorizontalLeft   { left: 0 }
.elHorizontalCenter { justify-content: center }
.elHorizontalRight  { justify-content: right }
.elVerticalVTop     { align-items: flex-start }
.elVerticalCenter   { align-items: center }
.elVerticalBottom   { align-items: flex-end }
.elVisible          { display: block }
.elHidden           { display: none !important }
.elCursorPointer    { cursor: pointer }
.elFullHeight       { height: 100% }

/******************************************************************************
 GROUP
 *******************************************************************************/
.groupMain {
   border: 0;
   margin: 10px;
   height: 100%;
   border-radius: 8px;
   box-shadow: 4px 3px 6px 1px var(--groupMainBoxShadow);
   background-color: var(--groupBodyBackgroundColor);
}
.groupTitle {
   top: 0px;
   left: 0px;
   width: 100%;
   padding: 7px;
   height: 30px;
   border: 0;
   border-radius: 8px;
   color: var(--groupTitleFontColor);
   background: var(--groupTitleBackgroundColor);
}
.groupTitleOpened {
   border-radius: 8px 8px 0px 0px;
}
.groupTitleClosed {
   border-radius: 8px;
}
.groupTitleCenter {
   text-align: center;
}
.groupTitleRight {
   text-align: right;
}
.groupCenter {
   margin: 5px auto;
   position: absolute;
}
.groupArrowDown {
   border: solid var(--groupArrow);
   border-width: 0 2px 2px 0;
   display: inline-block;
   position: absolute;
   right: 15px;
   margin: 4px;
   padding: 4px;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}
.groupArrowUp {
   border: solid var(--groupArrow);
   border-width: 0 2px 2px 0;
   display: inline-block;
   position: absolute;
   right: 15px;
   margin-top: 8px;
   margin-right: 4px;
   padding: 4px;
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
}
.groupBody {
   position: relative;
   overflow: hidden;
   width: 100%;
   padding: 10px 10px 10px 10px;
   border-radius: 0 0 8px 8px;
   background-color: var(--groupBodyBackgroundColor);
}

/******************************************************************************
GRID
******************************************************************************/
.gridContainer{
   height: 97%;
}
.gridMemo {
   background-color: #FFF6C5;
   width:100%;
   color: #000000;
}
.gridMemoLabel {
   color: var(--inputTextColor);
}

/******************************************************************************
 INPUT and TEXTAREA
 *******************************************************************************/
input {
   display: flex;
   outline: none;
   position: relative;
   height: 25px;
   padding: 5px 5px 0px 5px;
   border-radius: 4px;
   color: var(--inputTextColor);
   border: 1px solid var(--inputBorderColor);
   background-color: var(--inputBackgroundColor);
   -webkit-user-select: initial;
   -khtml-user-select: initial;
   -moz-user-select: initial;
   -ms-user-select: initial;
   user-select: initial;
}
input::-ms-reveal,
input::-ms-clear { 
   display: none;
}
input[type=color] {
   padding: 2px 0 0 0;
}
input[type=file] {
   padding: 1px;
}
.inputLabel {
   position: absolute;
   display: block;
   text-align: left;
   z-index: 1;
   top: var(--labelTop);
   left: var(--labelLeft);
   color: var(--inputLabelColor);
   -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
   transition: top .2s ease-in-out, font-size .2s ease-in-out;
}
.inputLabelActive {
   top: var(--labelActiveTop);
   left: var(--labelActiveLeft);
   font-size: 9pt;
   background-color: var(--inputLabelActiveBackgroundColor);
   color: var(--inputLabelActiveColor);
}
.inputLabelActiveDisabled {
   color: var(--inputLabelActiveDisabledColor);
   cursor: default;
   pointer-events: none;
}
.inputFocus {
   border: 1px solid var(--inputFocusColor);
}
.inputRequired {
   border: 1px solid var(--inputRequiredColor);
}
.inputAlignRight {
   text-align: right;
}
.inputAlignCenter {
   text-align: center;
}
input[type=text]:disabled {
   color: var(--inputDisabledColor);
   cursor: default;
   pointer-events: none;
   border: 1px solid var(--inputDisabledBorder);
   background-color: var(--inputDisabledBackgroundColor);
}
input[type=password]:disabled {
   color: var(--inputDisabledColor);
   cursor: default;
   pointer-events: none;
   border: 1px solid var(--inputDisabledColor);
}
.cbox{
   cursor: pointer;
   appearance: none;
   width: 15px;
   height: 15px;
   border: 2px solid var(--cboxBorder);
   background-color: var(--cboxBackgroundColor);
   border-radius: 4px;
   position: relative;
   top: 7px;
}

.cbox,
.cbox:before,
.cbox:checked,
.cbox:checked::before {
   transition: all 250ms ease-in-out;
}
.cbox:before{
   content: '';
   position: absolute;
   height: 7px;
   width: 3px;
   border-right: 2px solid var(--cboxBfBorder);
   border-bottom: 2px solid var(--cboxBfBorder);
   transform: rotate(45deg);
   top: 0px;
   left: 3px;
}
.cbox:checked{
   background-color: var(--cboxCheckedBackgroundColor);
}
.cbox:checked::before{
   opacity: 1;
}
.cboxDisabled:checked{
   background-color: #9d9d9d;
}
input[type=checkbox]:disabled {
   color: var(--inputDisabledColor);
   cursor: default;
   pointer-events: none;
}
.labelCheckBox {
   color: var(--CheckBoxLabelColor);
}
.rbtn{
   cursor: pointer;
   appearance: none;
   width: 14px;
   height: 14px;
   border: 2px solid var(--rbtnBorder);
   background-color: var(--rbtnBackgroundColor);
   border-radius: 7px;
   position: relative;
   top: 7px;
}

.rbtn,
.rbtn:before,
.rbtn:checked,
.rbtn:checked::before {
   transition: all 250ms ease-in-out;
}
.rbtn:before{
   content: '';
   position: absolute;
   height: 6px;
   width: 6px;
   border: 2px solid var(--rbtnBfBorder);
   top: 0px;
   left: 0px;
   border-radius: 4.5px;
}
.rbtn:checked{
   background-color: var(--rbtnCheckedBackgroundColor);
   border: 2px solid var(--rbtnCheckedBorder);
}
.rbox:checked::before{
   opacity: 1;
}
.rbtnDisabled:checked{
   background-color: #9d9d9d;
   border: 2px solid #9d9d9d;
}
input[type=radio]:disabled {
   color: var(--inputDisabledColor);
   cursor: default;
   pointer-events: none;
}
.labelRadioButton {
   color: var(--RadioButtonLabelColor);
}
.textAttribute {
   color: var(--textAttribute);
}
textarea {
   display: flex;
   outline: none;
   position: relative;
   border: 1px solid var(--inputBorderColor);
   padding: 5px;
   padding-top: 6px;
   height: 90px;
   resize: none;
   border-radius: 4px;
   color: var(--inputTextColor);
   background-color: var(--inputBackgroundColor);
   -webkit-user-select: initial;
   -khtml-user-select: initial;
   -moz-user-select: initial;
   -ms-user-select: initial;
   user-select: initial;
}
.textareaLabelActive {
   top: var(--labelActiveTop);
   left: var(--labelActiveLeft);
   color: var(--inputLabelActiveColor);
   font-size: 9pt;
   background-color: var(--inputLabelActiveBackgroundColor);
}
textarea:disabled {
   color: var(--inputDisabledColor);
   border: 1px solid var(--inputDisabledColor);
   background-color: var(--inputDisabledBackgroundColor);
   user-select: none;
}
.textareaFocus {
   border: 1px solid var(--inputFocusColor);
}
.textareaRequired {
   border: 1px solid var(--inputRequiredColor);
}
.iconLupa>g {
   fill: var(--iconLupa);
}
.iconMap {
   stroke: var(--iconMap);
}
.iconMap>circle {
   fill: var(--iconMap);
}
/******************************************************************************
 ICON QUESTION
 *******************************************************************************/
.questionSvg>.quest1 {
   fill: var(--questionSvgBackgroundColor);
}
.questionSvg>.quest2 {
   fill: var(--questionSvgBackgroundColor2);
}
/******************************************************************************
 FRAME
 *******************************************************************************/
.frameMemory {
   margin: 0px;
   border: 0px;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0px;
   height: 0px;
}
.frameHeader {
   position: absolute;
   top: 0px;
   padding: 0px;
   margin: auto;
   width: 100%;
   height: var(--headerHeight);
   background: var(--headerBackgroundColor);
}
.frameWork {
   position: absolute;
   top: var(--headerHeight);
   left: var(--menuWidth);
   height: calc(100% - var(--headerHeight));
   width: calc(100% - var(--menuWidth));
   transition: .5s all;
}
.frameWorkExpanded {
   position: absolute;
   top: var(--headerHeight);
   left: 0px;
   height: calc(100% - var(--headerHeight));
   width: 100%;
   transition: .5s all;
}
.frameClose {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0px;
   height: 0px;
   border: none;
   visibility: hidden;
}
.frameOpen {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   border: none;
   visibility: visible;
   background: var(--FullMenuBackgroundColor);
}
.frameModal {
   position: absolute;
   top: 20px;
   left: 20px;
   bottom: 20px;
   right: 20px;
   margin: auto;
   border: none;
   visibility: visible;
}
.frameMenu {
   position: absolute;
   top: var(--headerHeight);
   height: calc(100% - var(--headerHeight));
   width: var(--menuWidth);
   background: var(--menuBackgroundColor);
   transition: .5s width;
}
.frameMenuInvisible {
   position: absolute;
   top: var(--headerHeight);
   height: calc(100% - var(--headerHeight));
   width: 0px;
   transition: .5s all linear;
}

/******************************************************************************
 HEADER
 *******************************************************************************/
.headerMenu {
   cursor: pointer;
   left: 5px;
   top: 10px;
   margin: 0;
}
.headerContainer {
   display: flex;
   height: var(--headerHeight);
}
.headerContainerLeft {
   margin: 0;
   padding: 0;
   display: flex;
   width: 34%;
   align-items: center;
   justify-content: flex-start;
}
.headerContainerMiddle {
   margin: 0;
   padding: 0;
   display: flex;
   width: 35%;
   align-items: center;
   justify-content: center;
}
.headerContainerRight {
   margin: 0;
   padding: 0;
   display: flex;
   width: 31%;
   align-items: center;
   justify-content: flex-end;
}
.headerElement {
   margin: 7px;
   padding: 0px;
}
.headerTool {
   margin: 7px;
   padding: 0px;
   cursor: pointer;
   border-bottom: 4px solid transparent;
}
.headerTool:hover { 
   border-bottom: 4px solid var(--headerToolBorder);
   padding: 11px 0 11px 0;
 }
.headerTitle {
   color: var(--headerTitle);
}
#menuBarIcon {
   cursor: pointer;
}
.headerMenuBarIcon {
   display: block;
   background-color: var(--headerHamburguerColor);
   width: 30px;
   height: 4px;
   left: 3px;
   position: relative;
   transition: .2s ease-in-out;
}
.headerMenuBarIcon:before,
.headerMenuBarIcon:after {
   content: '';
   display: block;
   background-color: var(--headerHamburguerColor);
   width: 30px;
   height: 4px;
   position: absolute;
   transition: .2s ease-in-out;
}
.headerMenuBarIcon:before {
   top: -10px;
}
.headerMenuBarIcon:after {
   bottom: -10px;
}
#checkMenuBar {
   display: none;
}
#checkMenuBar:not(:checked)~label .headerMenuBarIcon {
   transform: rotate(45deg);
}
#checkMenuBar:not(:checked)~label .headerMenuBarIcon:before {
   transform: rotate(90deg);
   top: 0;
}
#checkMenuBar:not(:checked)~label .headerMenuBarIcon:after {
   transform: rotate(90deg);
   bottom: 0;
}
.iconHPro>svg {
   fill: var(--iconColorHPro);
   width: 32px;
   height: 32px;
}
.iconHPro>svg:hover {
   fill: var(--iconColorHProHover);
}
.headerContainerRight>.headerTool>svg {
   fill: var(--iconColorRight);
   width: 32px;
   height: 32px;
}

/******************************************************************************
 MENU
 *******************************************************************************/
.menuContainer {
   display: flex;
   align-items: center;
   height: 35px;
   padding: 10px;
}
.menuContainer:hover {
   background-color: var(--menuHoverColor);
   cursor: pointer;
   border-left: 4px solid var(--menuHoverBorder);
}
.menuIcon {
   margin: 0;
   margin-right: 6px;
   width: 25px;
   height: 25px;
   fill: var(--menuIconColor);
}
.menuActivate {
   pointer-events: auto;
   transition: all 0.5s;
}
.menuDisabled {
   pointer-events: none !important;
   max-height: 0;
   transition: all 0.3s;
}
.menuOption {
   font-size: var(--menuFontSize); 
   margin-left: 0px;
   color: var(--menuTextColor);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
.menuItem {
   font-size: var(--menuFontSize);
   display: flex;
   flex-direction: row;
   padding: 8px 0 0 30px;
}
.menuItemEnabled:hover {
   background-color: var(--menuHoverColor);
   cursor: pointer;
}
.menuItemText {
   font-size: var(--menuFontSize);
   margin: 0;
   padding: 0;
   height: 25px;
   white-space: nowrap;
   color: var(--menuTextColor);
}
.menuItemText>span>svg {
   transform: rotate(0deg);
   transition: all 128ms;
}
.menuItemText.menuItemTextActive>span>svg {
   transform: rotate(90deg);
}
.menuItemDisabled {
   background-color: var(--menuBackgroundColor);
   color: var(--menuItemDisabled);
   cursor: not-allowed;
   white-space: nowrap;
}
.menuSubItem {
   display: flex;
}
.menuSubItem>.menuItemText {
   padding: 4px 0 0 45px;
}
.menuSubItem>.menuItemText:hover {
   background-color: var(--menuHoverColor);
   cursor: pointer;
}
.menuSubItem>.menuItemDisabled {
   padding-left: 55px;
}
.menuIndicator {
   margin: 0;
   padding: 0;
   max-width: 20px;
   font-family: var(--fontFamily);
   font-size: 10pt;
   font-weight: bold;
   cursor: pointer;
   margin-right: 0.4rem;
}
.menuSeparator {
   position: relative;
   padding: 0 10px 0 38px;
   border: 1px solid var(--menuSeparator);
}
.menuSubSeparator {
   position: relative;
   margin-left: 0px;
   margin-right: 10px;
   top: -2px;
   border: 1px solid var(--menuSeparator);
}

/******************************************************************************
 PAGECONTROL E PAGE
 *******************************************************************************/
.pagetitles {
   display: flex;
   flex-direction: column
   margin: 0;
   overflow: auto;
   height: 35px;
}
.pagetitle { 
   padding: 5px;
   margin: 5px;
   cursor: pointer;
}
.page {
   height: calc( 100% - 20px );
}
.page-active {
   display: visible
}
.page-inactive {
   display: none;
}
.pagesContainer {
   display: block;
}
.pages {
   display: block;
}                                        

/******************************************************************************
 POPUPMENU
 *******************************************************************************/
.popupMenu {
   background-color: var(--popupMenuBackgroundColor);
   padding: 5px;
   border-radius: 5px;
   appearance: none;
   -webkit-appearance: none;
}
.popupMenuOption {
   background-color: var(--popupOptionBackgroundColor);
   color: var(--popupOptionColor);
   border: 1px solid var(--popupOptionBorder);
   border-radius: 4px;
   padding: 5px;
}
.popupMenuOption:hover {
   background-color: var(--popupOptionBackgroundColorHover);
   color: var(--popupOptionColorHover);
   border: 1px solid var(--popupOptionBorderHover);
   border-radius: 4px;
}
select > option:checked { 
   box-shadow: 0 0 10px 100px var(--popupOptionChecked) inset;
}
/******************************************************************************
 ROW
 *******************************************************************************/
.row {
   display: flex;
   position: relative;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: normal;
   align-items: normal;
   align-content: normal; 
   width: 100%;
}
.rowGap {
   gap: 5px;
}
.rowCenter {
   justify-content: center; 
   align-items: center;
}
.rowRight {
   justify-content: right; 
   align-items: center;
}
.rowSeparator {
   position: relative;
   min-height: 4px;
   border-top: 1px solid gray;
   margin-top: 10px;
   margin-bottom: 10px;
}

/********************************************************************************
  CALENDÁRIO
  *********************************************************************************/
#hproCalend {
   display: flex;
   border-radius: 8px;
   box-shadow: var(--calendarBoxShadow) 4px 4px 9px 1px;
   position: absolute;
   overflow: auto;
   z-index: 1;
   box-sizing: border-box;
   border: 1px solid var(--calendarBorderColor);
   max-height: 26.1rem;
   overflow-y: hidden;
   transition: width 1s;
}
#hproCalend>div {
   position: relative;
   width: 26rem;
}
#hproCalend input,
#hproCalend textarea {
   color: var(--calendarTextColor);
   background-color: var(--calendarInputBackgroundColor);
   border: 1px solid var(--calendarInputBorderColor);
   padding: 0.25rem 0.25rem 0;
}
#hproCalend input[type=number] {
   padding: 0 0 0 0.25rem;
}
.calendar {
   position: relative;
}
.calendarArea>div {
   height: 240px;
}
.calendarLine {
   display: flex;
}
.calendarDate h3 {
   padding: 4px 0;
}
.calendarDate {
   border-bottom: none !important;
   background-color: var(--calendarHeaderBackgroundColor);
   width: 100%;
   text-align: center;
   justify-content: center;
}
h3>span  {
   color: var(--calendarTitleColor);
}
.calendarDateChange {
   color: var(--calendarSubtitleColor);
}
.calendarDateChange:hover {
   cursor: pointer;
   color: var(--calendarSubtitleColorHover);
}
.calendarWeek {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-left: 0.5rem;
}
.calendarDates {
   display: flex;
   flex-wrap: wrap;
}
.week:first-child {
   height: 28px !important;
}
.week {
   height: 30px;
}
.calendarCel {
   display: flex;
   text-align: center;
   width: 12.5%;
   justify-content: center;
   align-items: center;
}
.calendarCel.month {
   height: 28px;
}
.calendarCel.month {
   font-weight: bold;
}
.calendarCel.week p {
   color: var(--calendarWeekColor) !important;
}
.calendarCel.month p {
   color: var(--calendarMonthColor);
 }
.calendarSelectDay {
   border-radius: 50px;
   --size: 30px;
   width: var(--size);
   height: var(--size);
   text-align: center;
   line-height: var(--size);
   color: var(--calendarDayColor);
}
.calendarSelectDay:hover {
   cursor: pointer;
   color: var(--calendarDayColorHover);
   background-color: var(--calendarDayBackgroundColorHover);
}
.calendarOtherMonth:hover {
   background-color: var(--calendarDayBackgroundColorHover);
}
#calendarCalculator {
   padding: 0.25rem 0;
   background-color: var(--calendarBackgroundColor);
}
.calcArea:nth-of-type(1) {
   padding-top: 2px;
   padding-bottom: 0;
}
.calendarInputSiz {
   width: 90px;
}
.calendarSelection {
   padding: 0 10%;
}
.calendarSelection .calendarSelectionArea {
   display: flex;
   flex-wrap: wrap;
   height: 90%;
}
.calendarSelectionSubtitle {
   width: 100%;
   height: 10%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 10px 14px 0;
}
.calendarSelectionSubtitle>p {
   border-radius: 50px;
}
.calendarSelectionSubtitle>p:hover {
   background-color: var(--calendarArrowColorHover);
}
.calendarSelectionSubtitle>p>svg {
   fill: var(--calendarArrowColor);
}
.calendarSelectionSubtitle>p:hover>svg {
   fill: var(--calendarArrowColor);
   cursor: pointer;
}
#calendarSelectionYear > span {
   color: var(--calendarYearColor);
}
.calendarSelection .calendarSelectionArea .calendarSelections {
   flex: 25%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2rem;
}
.calendarSelections {
   font-weight: bold;
}
.calendarSelections p{
   color: var(--calendarMonthYearColor);
}
.calendarSelectionsYear {
   color: var(--calendarMonthYearColor);
}
.calendarSelectionsYear:hover {
   color: var(--calendarMonthYearColorHover);
}
.calendarSelections:hover {
   cursor: pointer;
   border-radius: 50px;
}
.calendarSelections:hover>p {
   color: var(--calendarMonthYearColorHover) !important;
}
.calendarSelectionIcons {
   width: 1rem;
   margin: 0 0.5rem;
}
.calendarAniversario {
   background-color: var(--calendarAniversarioColor);
}
.calendarFeriado {
   background-color: var(--calendarFeriadoColor);
}
.calendarAgenda {
   background-color: var(--calendarAgendaColor);
}
.calendarAgendaTitle {
   background-color: var(--calendarHeaderBackgroundColor);
}
.calendarNoWork {
   color: var(--calendarNoWorlColor);
}
.calendarOtherMonth {
   opacity: 0.45;
}
.calendarSeparator {
   width: 0.1rem;
   margin: -0.5rem 0;
   background-color: #000000;
}
.calendarDragArea {
   position: absolute !important;
   width: 100% !important;
   height: 2rem !important;
   z-index: 1000 !important;
   background-color: rgba(0, 0, 0, 0) !important;
}
.calendarSubtitle {
   position: relative;
   z-index: 10000;
   font-weight: bold;
}
.calendarClose{
   position: absolute !important;
   width: 0.8rem !important;
   height: 0.8rem;
   margin: 0.4rem 0.6rem 0 0;
   right: 0;
   top: 0;
}
.calendarClose:hover {
   cursor: pointer;
}
.calendarClose > svg {
   height: 18px;
   width: 18px;
   margin: -3px -4px;
 }

.calendarCalculatorRow {
   display: flex;
   justify-content: space-between;
   gap: 0;
}

.calendarCalculatorOperation {
   justify-content: center;
   align-items: center;
}
.calendarCalculatorOperation p {
   width: auto;
   height: auto;
   color: var(--calendarOperationColor);
}

.calendar,
#calendarCalculator>.groupBody {
   background-color: var(--calendarBackgroundColor);
} 

/********************************************************************************
  AGENDA
  *********************************************************************************/
.agenda {
   display: flex;
   flex-direction: column;
   width: 0 !important;
   overflow-x: hidden;
   z-index: -1;
   margin: 0;
   background-color: var(--agendaBackgroundColor);
}
.agenda.agendaActive {
   width: 24rem !important;
   z-index: 10;
}
.agenda>div>h3 {
   border-bottom: none !important;
   width: 100%;
   text-align: center;
   justify-content: center;
   height: 24px;
   line-height: 24px;
   color: var(--agendaTitle);
}
.agenda>div>h3 {
   text-align: center;
}
.agendaContent {
   height: 82%;
   overflow-y: auto;
   scrollbar-width: thin !important;
   padding: 0.25rem 0.5rem;
}
.agendaSpecialDate {
   padding: 0 1rem;
}
.agendaSpecialDate p {
   font-weight: bold;
   color: #1482e9;
   background-color: white;
   width: 303px;
   margin-left: -12px;
   border-radius: 4px;
   padding: 4px;
}
.agendaSeparator {
   height: 0.08rem;
   background: black;
   margin: 0.3rem 1.5rem;
}
.agendaParent {
   padding: 0.4rem 1rem;
   border-radius: 0.30rem;
   background-color: var(--agendaDescriptionBackgroundColor);
}

.agendaSubject p,
.agendaDescription p {
   color: var(--agendaDescriptionColor);
}
.agendaParent:hover{
   cursor: pointer;
   background-color: var(--agendaBackgroundColorHover);
   transition: 0.3s ease-out;
}
.agendaParent:hover p {
   color: var(--agendaDescriptionColorHover);
}
.agendaSubject {
   display: flex;
   justify-content: space-between;
   margin: 00.25rem 0 00.05rem;
   font-weight: bold;
}
.agendaFunctions {
   display: flex;
   align-items: center;
   justify-content: end;
   padding: 0;
   padding-right: 0.5rem;
}
.agendaItemActive {
   background-color: var(--agendaActiveBackgroundColor);
}
.agendaItemActive p {
   color: var(--agendaActiveTextColor);
}

/*************************
 Calculadora
 *************************/
#hproCalc {
   display: flex;
   width: 252px;
   height: 500px;
   z-index: 1;
   background-repeat: no-repeat;
   background-size: auto;
   background-color: var(--calculatorBackgroundColor);
   border-radius: 8px 8px 8px 8px;
   box-shadow:10px 10px 20px var(--calculatorBoxShadow);
}

#hproCalc input {
   display: initial;
   padding: 17px;
   width: 252px;
   height: 40px;
   border-radius: 0px;
   color: var(--calculatorTextColor);
}
.calculatorDragArea {
   position: absolute !important;
   width: 100% !important;
   height: 2rem !important;
   z-index: 10000 !important;
   top: 0;
   left: 0;
}
.calcMain {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.calcLine {
   background-color: var(--calculatorScreenColor);
   /* height: 19px;  */
   text-align: left;
   border: none;
   font-size: 13px;
}
.calcMain > #calcLine1 {
   border-radius: 8px 8px 0 0;
 }
.calcLine:focus-visible {
   border: none;
}
.line:nth-child(0) {
   border-radius: 5px 5px 0 0;
}
.line:nth-child(4) {
   border-radius: 0 0 5px 5px;
}
.calcDisplay {
   height: 40px;
   margin: 0;
   text-align: right;
   font-size: 32px;
   background-color: var(--calculatorScreenColor);
   border: none;
}
.calcKeyBoard {
   display: flex;
   flex-wrap: wrap;
}
.calcButton {
   color: white;
   width: 63px;
   height: 60px;
   font-size: 25px;
   background-color: var(--calculatorButtonColor);
   /* box-shadow: 2px 2px 1px #6e6e6e; */
   border-radius: 0px;
   border: 1px solid #6e6e6e;
}
.calcButton.calcButtonClear{
   background-color: var(--calculatorButtonSimbolColor);
}
.calcButton.calcButtonBack{
   background-color: var(--calculatorButtonSimbolColor);
}
.calcButton.calcButtonInsert{
   background-color: var(--calculatorButtonSimbolColor);
}
.calcButton.calcButtonAsterisk{
   background-color: var(--calculatorButtonSimbolColor);
}
.calcButton.calcButtonSubtraction{
   background-color: var(--calculatorButtonSimbolColor);
}
.calcButton.calcButtonSum{
   background-color: var(--calculatorButtonSimbolColor);
}
.calcButton.calcButton0 {
   width: 126px;
   border-radius: 0 0 0 8px;
}
.calcButton.calcButtonEqual {
   height: 120px;
   background-color: var(--calculatorButtonSimbolColor);
   border-radius: 0 0 8px 0;
}
.calcButton:hover {
   background: var(--calculatorButtonColorHover);
   color: var(--calculatorTextColorHover);
}
.calcClose{
   position: absolute !important;
   width: 0.8rem !important;
   height: 0.8rem;
   margin: 0.4rem 0.6rem 0 0;
   right: 0;
   top: 0;
   z-index: 10000;
}
.calcClose:hover {
   cursor: pointer;
}
.calcClose > svg {
   height: 18px;
   width: 18px;
   margin: -3px -4px;
}
/********************************************************************************
 TOAST
 *********************************************************************************/
 .toast-container {
   position: fixed;
   bottom: 5%;	
   right: 1.5rem;
   display: grid;
   justify-items: end;
   z-index: 19999;
   gap: 1.5rem;
 }

 .toast {
   font-size: var(--fontSize);
   line-height: 1;
   border-radius: 0.5rem;
   padding: 0.5em 1em;
   display: flex;
   justify-content: center;
   box-shadow: 0 0 0.5rem #000;
   align-items: center;
   animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) backwards;
 }

 .toast svg {
   width: 2rem;
   height: 2rem;
   margin-right: 0.5rem;
 }

 @keyframes toastIt {
   0%,
   100% {
     transform: translateY(-150%);
     opacity: 0;
   }
   10%,
   90% {
     transform: translateY(0);
     opacity: 1;
   }
 }
/********************************************************************************
 VIEW
 *********************************************************************************/
.viewItem {
   display: flex;
   overflow: hidden;
   align-items: center;
   flex-flow: row;
   gap: 0.5rem;
   min-height: 2rem;
   background-color: var(--viewItemBackgroundColor);
}
.viewItem:hover {
   background-color: var(--viewItemBackgroundColorHover);
}
.viewItem>div:nth-child(1) {
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: left;
   color: var(--viewItemColor);
}
.viewItem>div:nth-child(3)>div {
   text-overflow: ellipsis;
   overflow: hidden;
   color: var(--viewItemColor);
}
.viewItemActive {
   background-color: var(--viewItemActiveBackgroundColor);
}
.viewItemActive>div:nth-child(1) {
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: left;
   color: var(--viewItemActiveColor);
}
.viewItemActive>div:nth-child(3)>div {
   text-overflow: ellipsis;
   overflow: hidden;
   color: var(--viewItemActiveColor);
}
.viewItem:hover>div:nth-child(1) {
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: left;
   color: var(--viewItemColorHover);
}
.viewItem:hover>div:nth-child(3)>div {
   text-overflow: ellipsis;
   overflow: hidden;
   color: var(--viewItemColorHover);
}
.viewItem>hr {
   width: 1px;
   background-color: black;
}
.viewIcons {
   position: absolute;
   top: 0px;
   right: 0;
   width: 22px;
   height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 1.5px;
}
.viewIcons:hover {
   cursor: pointer;
   background-color: var(--viewColorHover);
   border-radius: 3px;
}
.viewX {
   right: 20px !important;
}
.viewIcons>svg {
   height: 1rem;
   fill: var(--viewColor);
}
.viewIcons>svg>circle {
   fill: var(--viewCircleColor);
}
.viewIcons:hover>svg>circle{
   fill: var(--viewColorHover);
}
.viewIcons>svg>rect {
   fill: var(--viewColor);
}
.viewInput {
   padding-right: 3.5rem;
}
.viewLoader {
   width: 20px;
   height: 20px;
   border-top-color: rgb(202, 202, 202);
   border-radius: 50%;
   animation: rotate linear 1s infinite;
}
/********************************************************************************
 Caixa
 *********************************************************************************/
.counterTitle-container {
   width: 100%;
   height: 30px;
   background-color: var(--counterTitleBackgroundColor);
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0px 5px 0px 5px;
}
.counterTitle-text {
   color: var(--counterTitleFontColor);
   font-size: var(--counterTitleFontSize);
   font-weight: bold;
}
.counterDescription-container {
   width: 100%;
   background-color: var(--counterDescriptionBackgroundColor);
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 5px 5px 5px 5px;
}
.counterDescription-text {
   color: var(--counterDescriptionFontColor);
   font-size: var(--counterDescriptionFontSize);
   font-weight: bold;
}
.counterResumeTitle-container {
   flex: 1;
   text-align: center;
}
/********************************************************************************
 Product Card
 *********************************************************************************/
 .productCard * {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.productCard body,
.productCard h1 {
   margin: 0;
   padding: 0;
   font-size: 16px;
}
.productCard p{
   margin: 0;
   padding: 0;
   font-size: 14px;
}
.impostoDiv .impValor {
   color: var(--textAttribute);
}

.productCard input,
.productCard label {
   display: block;
   margin: 0.4rem;
   font-weight: bold;
}
.productCard{
   width: 90%;
   padding: 1rem;
   padding-bottom: 0;
   border-radius: 8px;
   box-shadow: 1px 1px 10px 2px #b4b4b467;
   margin: auto;
   display: block;
}
.description{
   display: flex;
   text-align: left;
   justify-content: space-between;
}
.description p{
   font-weight: bold;
   font-size: 18px;
   margin-bottom: 0.5rem;
}
.impostosCards{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}
.itens { 
   display: flex;
   flex-wrap: wrap;
   width: 32%;
   height: 9rem;
   margin-bottom: 1rem;
   border-radius: 4px;
   border: 1px solid #000000;
}

.itens>div,
.itens>h1 {
   padding: 0 1%;
}
.itens:last-child{
   margin-left: 0px;
}
.productCard hr {
   margin-bottom: 33px;
   border-top: 3px solid #000000;
   border-radius: 5px;
}
hr.impostos {
   margin: 0px;
   border-top: 1px solid;
}
.impostoDiv{
   display: flex;
   justify-content: space-between;
   margin-right: 15px;
   width: 100%;
}
.impostoDiv>p:first-child{
   font-weight: bold;
}
.itens .impostos {
   text-align: right;
   border-color: transparent;
}
.description .total {
   text-align: left;
}
.impostoDiv p {
   color: var(--inputTextColor);
}
.description .total p {
   text-align: right;
   font-size: 12px;
   color: #000000;
   height: 2rem;
}
.itens>h1 {
   width: 100%;
   height: 2rem;
   text-align: left;
   border-bottom: 1px solid #000000;
   line-height: 2rem;
   background-color: var(--groupTitleBackgroundColor);
   color: var(--inputTextColor);
   padding: 0 0.5rem;
}
/********************************************************************************
 Media
 *********************************************************************************/
@media print {
    .breakPage { 
    page-break-after: always; 
    }
}
@media only screen and (max-width: 835px) {
   #logoLogin {
      display: none;
   }
   #logoUser {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 32vh;
   }
   #logoUser>svg {
      fill: var(--LogoUserColor);
      height: 250px;
   }
   .logoUserSvgSecundaryColor2 {
      fill: var(--LogoUserColorSecond);
   }
   .lg-Full .groupMain {
      width: 100% !important;
   }
   .lg-Full .elParent {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center !important;
      position: relative;
      padding: 0;
   }
   .lg-Full input {
      box-shadow: 0 0 0 30px var(--inputLoginBackgroundColor) inset !important;
      color: var(--textLoginInputColor);
      height: 51px;
      font-size: 12pt;
      margin: 18px 12px 0 17px;
      border: 2px solid var(--inputLoginBorderColor);
      width: 100%;
      -webkit-text-fill-color: var(--textLoginInputColor);
   }
   .lg-Full button {
      width: 100%;
      margin: 12px 14px 0 17px;
      height: 45px;
      border: none;
      font-size: 16px;
      background-color: var(--buttonLoginColor);
   }
   .lg-Full .inputLabel {
      top: 23px;
      left: 30px;
      font-size: 11pt;
   }
   .lg-Full .inputLabelActive {
      top: 8px;
      left: 30px;
      font-size: 14pt;
   } 
   u {
      color: var(--textPasswordColor);
      text-decoration: none;
      font-size: 13px;
   }
}
@media only screen and (max-height: 462px) {
   #logoUser {
      display: none;
   }
}
#loading {
   width: 100vw;
   height: 100vh;
   z-index: 150;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--FullMenuBackgroundColor);
}
#loading .loader {
   box-shadow: none !important;
   border: 8px solid #c5c4c4;
   border-top: 8px solid var(--LogoLoginColorSecond);
   border-radius: 50%;
   width: 60px;
   height: 60px;
   margin: 0 auto;
   margin-top: 10px;
   animation: spinLoading 0.8s linear infinite;
}
@keyframes spinLoading {
   0% {
       transform: rotate(0deg);
   }

   100% {
       transform: rotate(360deg);
   }
}

.searchBarContainer {
   justify-content: flex-end;
   float: right;
   width: 100%;
}

.searchBarInput {
   width: 100%;
   padding: 0.25rem;
   font-size: 1rem;
   background-color: var(--menuSearchBackgroundColor) !important;
   color: white;
   border-color: transparent !important;
}

.searchBarInput::placeholder {
   color: white;
}

.searchBarAnswer:hover {
   cursor: pointer;
   background-color: #575757;
   color: white;
}

.searchBarIcons {
   position: absolute;
   top: 0px;
   right: 0;
   width: 22px;
   height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 1.5px;
}

.searchBarIcons>svg {
   height: 1rem;
   fill: white;
}

.searchBarIcons>svg>circle {
   fill: white;
}

.searchBarIcons:hover>svg>circle {
   fill: white;
}

.searchBarIcons>svg>rect {
   fill: white;
}

.searchBarIconsX {
   right: 20px !important;
}

.searchBarIconsX:hover {
   cursor: pointer;
}

.ag-root-wrapper.ag-layout-normal{
   min-height: 100px !important;
}