*{
    font-family: Arial; /*, 'Exo', Helvetica Neue,Helvetica,Arial,sans-serif; v.   */
    outline: 0;
    box-sizing: border-box;
}

.customGrid .x-grid-cell-inner {
    white-space: normal;
}

hr {
  heigth: 1px !important;
  border-color:transparent;
  background-color: #eae9e9 !important;
}
/*  */
.rc-font-light {
    font-size: 18px !important;
    font-weight: 200 !important;
}
.h5, h5 {
    font-size: 1.05rem;
    font-weight: 500;
}
/* label light hover v. 3.0.0.0 */
/* selected link */
/* visited link */
.rc-label-hover a:visited {
  color: silver ;
}
/* mouse over link */
.rc-label-hover a:hover {
  color: white ;
}
/* selected link */
.rc-label-hover a:active {
  color: silver ;
}

/* avatar list v. 3.0.0.0 */
.rc-circle-avatar {
    font-size: 1rem;
    display: inline-flex;
    width: 48px;
    height: 48px;
    color: #fff;
    border-radius: .375rem;
    background-color: #adb5bd;
    align-items: center;
    justify-content: center;
}
.rc-circle-avatar{
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  display: inline-block;
}
/* Gradients v. 3.0.0.0 */
.rc-bg-gradient-orange {
    background: linear-gradient( 87deg , #fb6340 0 , #fbb140 100% ) !important;
}
.rc-bg-gradient-red {
    background: linear-gradient( 87deg , #f5365c 0 , #f56036 100% ) !important;
}
.rc-bg-gradient-info {
    background: linear-gradient( 87deg , #11cdef 0 , #1171ef 100% ) !important;
}
.rc-bg-gradient-green {
    background: linear-gradient( 87deg , #2dce89 0 , #2dcecc 100% ) !important;
}
.rc-bg-gradient-purple {
    background: linear-gradient( 87deg , #8965e0 0 , #bc65e0 100% ) !important;
}
.rc-bg-gradient-yellow {
    background: linear-gradient( 87deg , #ffd600 0 , #beff00 100% ) !important;
}
/* ScrollBars v. 3.0.0.0 */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: gray silver;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
*::-webkit-scrollbar-track {
  background: silver;
}
*::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 7px;
  /*border: 3px solid orange;*/
}
/* button loading*/
.rc-btn-loading .x-btn-inner {
  visibility: hidden;
  opacity: 0;
}
.rc-btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #000000;
  border-radius: 50%;
  animation: rc-btn-loading-spinner 1s ease infinite;
}
@keyframes rc-btn-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
/* qrcode */
.rc-qrcode{
  text-align:center;
}
/* hover zoom*/
.rc-hover-zoom-1 {
  transition: transform .2s;
}
.rc-hover-zoom-1:hover {
  -ms-transform: scale(1.0); /* IE 9 */
  -webkit-transform: scale(1.0); /* Safari 3-8 */
  transform: scale(1.0);
  z-index:9999;
}
.rc-hover-zoom-1-1 {
  transition: transform .2s;
}
.rc-hover-zoom-1-1:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  z-index:9999;
}
.rc-hover-zoom-1-2 {
  transition: transform .2s;
}
.rc-hover-zoom-1-2:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  z-index:9999;
}
.rc-hover-zoom-1-5 {
  transition: transform .2s;
}
.rc-hover-zoom-1-5:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
}
/* resize block */
.rc-anim-block-resize{
  transition: 300ms ease ;
}
.rc-anim-block-resize:active{

}
/* hover shadow*/
.rc-shadow-hover{
  transition: box-shadow 500ms ease;
}
.rc-shadow-hover:hover{
   box-shadow: 0 4px 12px 2px rgba(0, 0, 0, .4)
}
/* fade in / out effect */
.rc-fade-in {
  animation: rc-fade-in 1s;
}
@keyframes rc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.rc-fade-out {
  animation: rc-fade-out 500ms;
}
@keyframes rc-fade-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* radio group 
.x-form-radio-default {
   font: 18px/1 'Font Awesome 5 Free';
    color: #fff;
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px; 
}

.x-form-cb-checked .x-form-radio-default:before {
    content: '\f192';
    color: $00363636;
}
*/
/* button disable ( remover o azul padrão ) */
.x-btn.x-btn-disabled.x-btn-default-small {
    background-image: none;
    background-color: $00363636;
}
/* v. 3.0.0.0 bsChk disabled( remover azul padrão )*/
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: $00363636;
    opacity: 0.5;
}
/* v. 3.0.0.0 bsSwt disabled( remover azul padrão )*/
.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: $00363636;
    opacity: 0.5;
}
/* v. 3.0.0.0 bsRgp disabled( remover azul padrão )*/
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: $00363636;
    opacity: 0.5;
}
/* img responsive*/
.img-responsive {
  max-width: 100%;
  height: auto;
}
/* video comum*/
.video-file-responsive {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}
/* youtube video responsivo */

.video-tube-responsive {
/*  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  */
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-tube-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* animations */
.rc-pulse {

/*  margin-top:20px;
  padding: 20px 40px;
  background-color: #4E4DED;
  font-size: 1rem;
  font-weight: 500;
  */
  border: 0;
  border-radius: 10px;
  color: white;
  cursor:pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.10), 0 3px 3px rgba(0,0,0,0.05);
  animation: shadow-pulse 1s infinite;
}
@keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);
     }
     100% {
          box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
     }
}
/* v.  */
.rc-obj-float{
  animation:
    float-obj 3s linear infinite alternate;
}
@keyframes float-obj {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 20px);
  }
  80% {
    transform: translate(0, -20px);
  }
}


/*label-link attribute

/* visited link */
a:visited {
  color: $0051B5F7 ;
}
/* mouse over link */
a:hover {
  color: $0051B5F7 ;
}
/* selected link */
a:active {
  color: $0051B5F7 ;
}

/* validade  */
.rc-valid .x-form-trigger-wrap-default{
    border-color : green !important;
}
.rc-invalid .x-form-trigger-wrap-default{
    border-color : red !important;
}

/*.x-scroller  remover barra horizontal indesejada  ( ajuda  do EDUARDO BELO ) */
.sbox-scroller {
  /*           h      v        overflow: auto;  */
   overflow: hidden visible !important;
    scrollbar-width: thin;  /*estilo do scrool para o mozilla  */
    scrollbar-color: #adb3b8 #516579;  /*estilo do scrool para o mozilla  */
}    /*
.sbox-scroller::-webkit-scrollbar {
    width: 7px;
    height:7px;
    background: #516579;
}
.sbox-scroller::-webkit-scrollbar-track {
    background: rgba( 0, 0, 0, 0.1);
}
.sbox-scroller::-webkit-scrollbar-thumb {
    border-radius: 7px;
    height:7px;
    background:#adb3b8;
}  */


/*
Border HTMLFrame
*/
canvas {
    border: 0px !important;
}

/* sombra */
.shadow-obj-tour {
    /*box-shadow: 10px 7px 7px -1px rgba(0,0,0,0.26);*/
    box-shadow: 0.1em 0.1em 0.2em;
}

.shadow-text {
    text-shadow: black 0.1em 0.1em 0.2em;
}
/* v.  */
.shadow-text-2 {
    text-shadow: 2px 2px black;
}

.x-field.x-disabled>.x-label-el {
    opacity: 0.7 !important;
    color: black !important;
}

.x-field.x-disabled>.x-body-wrap-el {
    opacity: 0.7 !important;
    color: black !important;
}

.x-textfield-faded .x-input-wrap-el {
    border-width: 0;
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: rgba(0, 0, 0, 0.9)  !important;
}



.gradientCOLOR {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(gray, white);
    max-height: 100%;
    top: 100px;
    position: static;
    font-family:  "helvetica";
}

/* para uso do TOUR
--------------------
*/

.trans-panel {
  background-color:transparent !important;
}
.trans-obj-0 {
  opacity: 0.0;
}
.trans-obj {
  opacity: 0.7;
}
.notrans-obj {
  opacity: 1;
}
.bringtofront{
  z-index: 10000;
}


/* Alinhamento VERTICAL/HORIZONTAL
-------------------------------------
*/
/* ideal para label com imagens */
.align-center {
    top: 50% !important;
    left: 50% !important;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* Alinhamento de LABEL VERTICAL

uso: UniLabel.JSInterface.JSCall('addCls', ['align-label-center']);

*/
/* v.  */
.align-btn-caption{
    margin-left: 5px !important;
}

.align-label-right-top{
    vertical-align: top;
    text-align: right;
    display: table-cell;
    position: relative !important;
}

.align-label-left-center{
    vertical-align: middle;
    text-align: left;
    display: table-cell;
    position: relative !important;
}
.align-label-right-center{
    vertical-align: middle;
    text-align: right;
    display: table-cell;
    position: relative !important;
}
.align-label-center-center{
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    position: relative !important;
}


/*
itens combobox
---------------
*/
.x-boundlist-item-over {
    color: $00000000 ;
    background: $00FFFFE0;
    border-color: $00FFFFE0;
}
.x-boundlist-selected {
    color: $00000000 ;
    background: $00FFFFE0;
    border-color: $00FFFFE0;
}


/*
buttom BORDER
-------------------------------
*/
.x-button{
 border-width: 0px !important;
}

.customClsBorder {
    border-radius: 0;
    border-left: 0;
}

.customClsSearch {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('files/images/tel.png');
    position: relative;
    right: 10%;
}

/*
cor dos icones no MOBILE( normalmente azul - acho q é o TEMA )
--------------------------------------------------------------
.x-button .x-body-el {
  margin: 0px !important;
}
.x-button .x-button-el{
  color : white !important;
}

*/


/*
collapse panel
------------------------
*/
.x-panel-header-default-horizontal.x-header-noborder {
    height: 32px !important;
    padding: 6px 5px 4px 8px;
}

.x-panel-header-default {
    background-image: none;
    background-color: gray !important;
    border: 0 ;   /* padrão AZUL do TRITON */
}

.x-panel-default {
     border: 0 ;   /* padrão AZUL do TRITON */
}

/* remove bordas laterais padrao do objeto */
.x-panel-default-outer-border-trbl {
   /*background: none !important;*/
   border: 0px !important;

}

/*
----------------------------
cores / ajsutes TRITON.MODIFIED

Flavio Motta

*/
/* v. 3.0.0.0 */
.rc-border-color-red {
    /*background-color: #dadce0;*/
    border: 1px solid $004545D6 rgba(255,255,255,.5);
    border-radius: 8px;
}

/* Panel ROUNDED */
.clsRoundPanelForm {
    -webkit-border-radius: 4px 4px 4px 4px !important;
    -moz-border-radius: 4px 4px 4px 4px !important;
    -ms-border-radius: 4px 4px 4px 4px !important;
    -o-border-radius: 4px 4px 4px 4px !important;
    border-radius: 4px 4px 4px 4px !important;
}

.clsRoundPanel {
    -webkit-border-radius: 4px 4px 4px 4px !important;
    -moz-border-radius: 4px 4px 4px 4px !important;
    -ms-border-radius: 4px 4px 4px 4px !important;
    -o-border-radius: 4px 4px 4px 4px !important;
    border-radius: 4px 4px 4px 4px !important;
}

.clsRoundPaneltopleft {
    -webkit-border-radius: 4px 0px 0px 0px !important;
    -moz-border-radius: 4px 0px 0px 0px !important;
    -ms-border-radius: 4px 0px 0px 0px !important;
    -o-border-radius: 4px 0px 0px 0px !important;
    border-radius: 4px 0px 0px 0px !important;
}

.clsRoundPaneltopright {
    -webkit-border-radius: 0px 4px 0px 0px !important;
    -moz-border-radius: 0px 4px 0px 0px !important;
    -ms-border-radius: 0px 4px 0px 0px !important;
    -o-border-radius: 0px 4px 0px 0px !important;
    border-radius: 0px 4px 0px 0px !important;
}

.clsRoundPaneltopleftright {
    -webkit-border-radius: 4px 4px 0px 0px !important;
    -moz-border-radius: 4px 4px 0px 0px !important;
    -ms-border-radius: 4px 4px 0px 0px !important;
    -o-border-radius: 4px 4px 0px 0px !important;
    border-radius: 4px 4px 0px 0px !important;
}


.clsRoundPanelbottomleft {
    -webkit-border-radius: 0px 0px 0px 4px !important;
    -moz-border-radius: 0px 0px 0px 4px !important;
    -ms-border-radius: 0px 0px 0px 4px !important;
    -o-border-radius: 0px 0px 0px 4px !important;
    border-radius: 0px 0px 0px 4px !important;
}

.clsRoundPanelbottomright {
    -webkit-border-radius: 0px 0px 4px 0px !important;
    -moz-border-radius: 0px 0px 4px 0px !important;
    -ms-border-radius: 0px 0px 4px 0px !important;
    -o-border-radius: 0px 0px 4px 0px !important;
    border-radius: 0px 0px 4px 0px !important;
}

.clsRoundPanelbottomleftright {
    -webkit-border-radius: 0px 0px 4px 4px !important;
    -moz-border-radius: 0px 0px 4px 4px !important;
    -ms-border-radius: 0px 0px 4px 4px !important;
    -o-border-radius: 0px 0px 4px 4px !important;
    border-radius: 0px 0px 4px 4px !important;
}

.clsRoundPaneltopbottomleft {
    -webkit-border-radius: 4px 0px 0px 4px !important;
    -moz-border-radius: 4px 0px 0px 4px !important;
    -ms-border-radius: 4px 0px 0px 4px !important;
    -o-border-radius: 4px 0px 0px 4px !important;
    border-radius: 4px 0px 0px 4px !important;
}
.clsRoundPaneltopbottomright {
    -webkit-border-radius: 0px 4px 4px 0px !important;
    -moz-border-radius: 0px 4px 4px 0px !important;
    -ms-border-radius: 0px 4px 4px 0px !important;
    -o-border-radius: 0px 4px 4px 0px !important;
    border-radius: 0px 4px 4px 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.card-info-box-white-noshadow {
    border-style: solid;
    border-width: 1px;
    border-color: #f0f0f0;
    border-radius: .25rem;
    min-height: 80px;
    position: relative;

}

.card-info-box-white {
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: .25rem;
    background: #fff !important;
    min-height: 20px;
    position: relative;
    color: #000;
}

.card-info-box-themecrud{
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, .1);
    border-radius: .25rem;
    background:$00363636 !important;
    min-height: 20px;
    /*padding: .5rem;*/
    position: relative;
}
.card-themecrud{
     background: $00363636 ;
     color:#fff  !important;
     border-color: 1px solid $00363636 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-red{
     background:$004545D6 !important;
     color:#fff !important;
     border-color:$004545D6 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-green{
     background:$00808040 !important;
     color:#fff !important;
     border-color:$00808040 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-blue{
     background: $00C78E18 !important;
     color:#fff !important;
     border-color:$00C78E18 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-bluedark{
     background: $008B2F14 !important;
     color:#fff !important;
     border-color:$008B2F14 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-white{
     background:#FFFFFF !important;
     color:#000 !important;
     border-color:#FFFFFF !important;
     border: 0px ;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-orange{
     background:$00378DE3 !important;
     color:#fff !important;
     border-color:$00378DE3 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-gray{
     background: $00837074 !important;
     color:#fff !important;
     border-color:$00837074 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}
.card-light{
     background: #fff !important;
     color:#fff !important;
     border-color:$00837074 !important;
     border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
      background-color: rgba(0, 0, 0, 0.03) !important;
}
.card-silver{
     background: #eaeaea !important;
     color:#000 !important;
     border-color:#ffc107 !important;
      -moz-border-radius: 4px 4px 0px 0px;
      -webkit-border-radius: 4px 4px 0px 0px;
      -ms-border-radius: 4px 4px 0px 0px;
      -o-border-radius: 4px 4px 0px 0px;
      border-radius: 4px 4px 0px 0px;
}

.color-themecrud{
     color:$00363636  !important;
}

.color-red{
     color:$004545D6 !important;
}

.color-green{
     color:$00808040 !important;
}

.color-blue{
     color:$00C78E18; /*!important;*/
}

.color-bluedark{
     color:$008B2F14 !important;
}

.card-white{
     color:#ffffff !important;
}

.color-orange{
     color:$00378DE3 !important;
}
.color-silver{
     color: silver !important;
}

.color-gray{
     color: $00837074 !important;
}

.color-black{
     color: black !important;
}

.color-dark{
     color: $00292929 !important;
}


/*
dar um espaco a direita nos campos de valores

*/
    /*
.bg {

   background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

} */


/* Transparencia no FORM - nao consegui rodar - fica p depois */
.frmLoginTransp .x-window-body {
  background-color: transparent !important;
}

.x-form-text-default {
    padding: 0px 5px 0px 5px !important;
}



/* pagecontrol */
.x-uni-tabsheet{
    /*padding: 0px 0px 0px 0px !important;
    margin: 0 !important;*/
}

/* cor do texto da aba que não está selecionada */
.x-tab-inner-default {
    color: gray;
    /*background-color: #ddd;*/
    /*padding: 8px 8px ;/*padding: 4px 4px 6px 4px !important;*/
    margin-top: -1px;
    margin-bottom: -1px;
    /*height: 40px;*/
}

.x-tab-bar-default-top > .x-tab-bar-body-default{
    /*padding: 0px 0px 0px 0px !important;
    margin: 0 !important;*/
}

.x-tab-bar-default {
    /*background-color: $00373737 !important;*/
    /* borda do pagecontrol
    margin: -4px 4px 0px 4px !important;*/

    /*height: 44px !important;*/
    /*padding: 0px 0px 0px 0px !important;*/

    /*background-image: -webkit-linear-gradient( top , #ffffff , $00373737 );*/
    background-color: #fff; /* fundo das ABAS nao é DA ABA em si... */
    border-bottom: 1px solid #ddd !important;

}

/* pg control LOGIN - em desenvolvimento */
.pglogin-x-tab-bar-default {
    background-color: $00373737 !important;

    /*height: 39px !important;*/
    /* borda do pagecontrol
    margin: 4px 4px 0px 4px !important; */

    padding: 0px 0px 0px 0px !important;
}


.x-tab-default-top {
    color: gray;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-color: transparent;*/

    font-weight: 200;

    -webkit-border-radius: 5px 5px 0px 0px !important;
    -moz-border-radius: 5px 5px 0px 0px !important;
    -ms-border-radius: 5px 5px 0px 0px !important;
    -o-border-radius: 5px 5px 0px 0px !important;
    border-radius: 5px 5px 0px 0px !important;
}

.x-tab-default-top .allRounded {

    padding: 0px 6px 0px 6px !important;/*padding: 8px 8px ;/**/

    color: gray;
    font-weight: 200;

    -webkit-border-radius: 5px 5px 5px 5px !important;
    -moz-border-radius: 5px 5px 5px 5px !important;
    -ms-border-radius: 5px 5px 5px 5px !important;
    -o-border-radius: 5px 5px 5px 5px !important;
    border-radius: 5px 5px 5px 5px !important;
}


.x-tab.x-tab-active.x-tab-default .x-tab-inner-default{
    padding: 6px 6px 5px 6px !important;/*padding: 8px 8px ;/**/

    height: 14px !important;

    color: black !important;/* #fff ;/*black;*/
    font-weight: bold;

    background-color: $00FFFFFF;/*#fff; /*$00363636 ;/*#fff;*/

    border: 1px solid #ddd; /* $00373737 caso queira usar o padrao do TEMA ATUAL de cor;*/
    /*border-bottom-color: rgb(221, 221, 221);*/
    border-bottom-color: white transparent;

    border-radius: 5px 5px 5px 5px !important;
    /*
    -webkit-border-radius: 5px 5px 0px 0px !important;
    -moz-border-radius: 5px 5px 0px 0px !important;
    -ms-border-radius: 5px 5px 0px 0px !important;
    -o-border-radius: 5px 5px 0px 0px !important;
    border-radius: 5px 5px 0px 0px !important;*/

}

.x-keyboard-mode .x-tab-focus.x-tab-default {
 border-color:transparent;
 background-color:transparent;
 /*background-color: $00FFFFFF !important*/;
 outline:0px solid #5fa2dd;
 outline-offset:-3px;

}
/* fim pagecontrole */


/* TABs - fim */

/*
----------------------------
Mensagem na frente( fonte: fórum )

Flavio Motta
*/

.swal2-container{
  z-index: 20000 !important;
}


/*
uniDBGrid
------------------------
*/
/* v. 3.0.0.0 */
.rc-btn-action-padding{
    padding: .25rem .5rem !important;
}

/* v.  - center content on cell grid*/
.x-grid-td {
  vertical-align: middle;
}
.rc-grid-action-border-off .x-grid-with-col-lines .x-grid-item-selected .x-grid-cell {
  border-left: 0px;
  width: 44px;
}
.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell {
    border-color: #f6f6f6;
    border-style: solid;
}
.rc-grid-cell-badge {
    font-size: 8px !important;
    text-align: center;
}

/* remove o check box que marca todos os registros*/
.rc-grid-title-check .x-column-header-checkbox {
  display:none;
}
/* reduz o tam. dos icones da tool bar de paginação */
.x-btn-icon-el.x-tbar-page-next {
    font: 11px/13px ExtJS;
}
.x-btn-icon-el.x-tbar-page-last {
    font: 11px/13px ExtJS;
}
.x-btn-icon-el.x-tbar-page-prev {
    font: 11px/13px ExtJS;
}
.x-btn-icon-el.x-tbar-page-first {
    font: 11px/13px ExtJS;
}
.x-btn-icon-el.x-tbar-loading {
    font: 11px/13px 'Font Awesome 5 Free';
    /*color: #919191;*/
}
.x-toolbar-text-default {
    padding: 0px 0px 0px -8px;
    /*color: #4b4c4c;*/
    font: 300 11px/13px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}
/* v.  */
.rc-mirror-h{
   transform: rotate(180deg);
}
/* v. 3.0.0.0 */
/* remove 'pipes' entre os botoes do paginador do grid */
.x-toolbar-default .x-toolbar-separator-horizontal{
    border-width: 0px;
}
.x-toolbar-default {
    padding: 6px 0 0px 0px;
    border-width: 0px;
   /*padding: 0px 0px 0px 0px;
   height: 0;*/

}

.x-column-header {
    background: #f2f2f2 !important;
    text-transform: uppercase;   /* deixa as colunas com maiusculas */
}
/*  */
.tolower{
    text-transform: lowercase;
}
.toupper{
    text-transform: uppercase;
}

/* v. 3.0.0.0 remove 'pipes' entre os botoes do paginador do grid */
/*.x-toolbar-default .x-toolbar-separator-horizontal{
    border-width: 0;
} */


/*----------------------------
/*
----------------------------
dica do grupo

Flavio Motta

*/

/* selecao serrilhada no dbgrid */
.x-grid-item-focused .x-grid-cell-inner:before{
	display: none;
}

/* caso queira mudar a cor do item selecionado no uniDBGrid */
.x-grid-item-selected {
    color: #404040;
    background-color: $00FFFFE0; /*#ffefbb;*/
}

/*  */
.x-grid .x-grid-column {
    border-style: solid;
    /*border-width: 1px 1px 0;*/
    height: 30px;                 /* HEIGTH da linha */
    line-height: 30px;            /* HEIGTH da linha */
    padding: 0 8px;
    vertical-align: middle;
}
/*  */
.x-grid .x-grid-cell {
    height: 30px !important;      /* HEIGTH da linha */
    line-height: 30px !important; /* HEIGTH da linha */
}
/* fim dbgrid
----------------------------*/

/* forms
--------------------------------
*/

/* titulo do form sem icone fica com espacos a esquerda */

.x-window-header-title-default{
    /*left: -20px !important;*/
}

.x-window-default2 {
    border-color: transparent !important;
    background-color: transparent !important;
}

/* forms arredondados  */
.x-window-default {
    background-color: transparent !important;
    border-color: transparent !important;
    border-width: 0px;
    /*-webkit-border-radius: 8px 8px 8px 8px !important;
    -moz-border-radius: 8px 8px 8px 8px !important;
    -ms-border-radius: 8px 8px 8px 8px !important;
    -o-border-radius: 8px 8px 8px 8px !important;
    border-radius: 8px 8px 8px 8px !important;*/
}
/* forms arredondados  */
.form-rounded {
    background-color: transparent !important;
    border-color: transparent !important;
    border-width: 0px;
    -webkit-border-radius: 8px 8px 8px 8px !important;
    -moz-border-radius: 8px 8px 8px 8px !important;
    -ms-border-radius: 8px 8px 8px 8px !important;
    -o-border-radius: 8px 8px 8px 8px !important;
    border-radius: 8px 8px 8px 8px !important;
}


.form-noborder {
    background-color: transparent !important;
    border-color: 0 0 0 0 solid black !important;
    -webkit-border-radius: 0px 0px 0px 0px !important;
    -moz-border-radius: 0px 0px 0px 0px !important;
    -ms-border-radius: 0px 0px 0px 0px !important;
    -o-border-radius: 0px 0px 0px 0px !important;
    border-radius: 0px 0px 0px 0px !important;
}
.x-noborder-trbl {
    border: 0;
    padding: 0;
}

.panelbg {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url( 'files/images/login_bg.png' );
    background-position: 0px 50% !important;
    padding: 0 0 0 0;
}

.x-window-header-title-default > .x-title-text-default{
    /*padding: 0px 0px 0px 12px;*/
}

.x-window-header {
    background-color: $00363636;
    border-color: $00363636;
}

.x-tool-close {
    background: none !important;
}
.x-tool-maximize {
    background: none !important;
}
.x-tool-minimize {
    background: none !important;
}

.clsRoundForm {
    background-color: transparent !important;
    border-color: transparent !important; /*#5fa2dd;*/
    -webkit-border-radius: 8px 8px 8px 8px !important;
    -moz-border-radius: 8px 8px 8px 8px !important;
    -ms-border-radius: 8px 8px 8px 8px !important;
    -o-border-radius: 8px 8px 8px 8px !important;
    border-radius: 8px 8px 8px 8px !important;
}

/* diversos */

.clsBS-Edit-teste {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-shadow: inset 0 0 0 transparent;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.clsBS-Edit .x-form-text-wrap {

    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-shadow: inset 0 0 0 transparent;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}





/* Labels

  - evita a quebra do texto do label quando reduz a área do browser ( white-space: nowrap; )
  - deixa o tom CINZA com padrão( color: gray )
    e o 'peso' da letra: ( font-weight )
  - comentando toda a classe fica padrão

  - avoids breaking the label text when reducing the browser area (white-space: nowrap;)
  - leaves the GRAY tone with pattern (color: gray)
    and the 'weight' of the letter: (font-weight)
  - commenting the whole class becomes standard

*/

/* v.  */
.rc-text-height-150{
    line-height: 1.50;
}
.rc-text-height-175{
    line-height: 1.75;
}


.rc-label-wrap{
    white-space: normal !important;
}

.rc-label-link label:hover, label:active, input:hover+label, input:active+label {
   /*background-color: yellow;*/
   color: yellow;
}

/* TABs Bs RENDER */
/* Tabs*/

/*
// v. 3.0.0.0
Loading Mask  // v.
-----------------------
dica [#loading .loading-indicator] do grupo( uniGUI na VEIA - ADEN )

.x-mask-msg e .x-mask-msg-text  adicionada por mim

Flavio Motta : deixei o texto transparente pra exibir apenas a imagem de processamento

dependendo da imagem escolhida vc terá que ajustar o "padding" das classes abaixo

Sempre lembrando que a ordem dos valores indica: T R B L

T op
R ight
B ottom
L eft

*/

/* first loading app   */
/*
#loading .loading-indicator {
  background: url( 'files/images/loaders/1.gif' ) center bottom no-repeat;
  font: bold 10px Exo, 'Exo', sans-serif;
  padding: 20px 40px 70px 20px ;
  margin: 0;
  text-align: center;
  height: auto;
}
.x-mask-msg  {
    padding: 30px;
    background: white;
    border:none;
}
.x-mask-msg-text {
    padding: 20px 40px 70px 20px ;
    font: bold white 8px Exo, 'Exo', sans-serif !important;
    background: url( 'files/images/loaders/1.gif' ) center bottom no-repeat;
    height: auto;
    margin: 0;
}
*/
#loading .loading-indicator {
   border-width:0px;
   color:white;
   padding:50px;
   background: rgba(0, 0, 0, 0);
   background-image:url( 'files/images/loaders/transparents/dash-circle-2.svg' );
   background-repeat:no-repeat;
   background-size: contain;
}
.x-mask-msg{
   background:none;
   border-width:0px;
}
.x-mask-msg-inner{
   border-width:0px;
   color:none;
   padding:50px;
   background: rgba(0, 0, 0, 0);
   background-image:url( 'files/images/loaders/transparents/dash-circle-2.svg' );
   background-repeat:no-repeat;
   background-size: contain;
}
.x-mask-msg-text{
   display:none;
   background-image:none;
}
/*
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
    background-size:10%;
}
----------------------------
cores foco dos EDITs

Flavio Motta

*/
/* para usar nos campos desabilitados */
.rc-x-item-disabled .x-form-field {
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    color: blue;
    background: #F0F0F0;
}
.rc-mydisabledCheckBox .x-form-cb-label-default {
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    color: blue;
    background: #F0F0F0;
}


/* to activate borders in FOCUS */
/*.rc-edit-icon-borders.x-form-text {
    border-width: 1px;
    border-style: solid;
    border-color: #d0d0d0;
    border: 1px solid rgba(81, 203, 238, 1);
} */


/* trigger buttons ( search do tree menu por exemplo )
------------------------------------------------------
*/
.x-form-trigger-default {
    font: 16px FontAwesome !important;
    padding-top: 0.3em ;
    padding-right: 0.4em ;
}

.x-form-trigger {
    text-align: right;

    /*padding-right: 5px !important;*/
}

/* edits arredondados ou não*/

/* Edit Borders*/
.x-form-text {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
    /*border-color: #d0d0d0;*/
    /*box-shadow: 0px 0px 0px 0px #fff; *//*  */
}
.x-form-trigger-wrap-default{
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -ms-border-radius: 3px;
 -o-border-radius: 3px;
 border-radius: 3px;
}

.x-form-trigger-wrap-focus{
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -ms-border-radius: 3px;
 -o-border-radius: 3px;
 border-radius: 3px;
 border-color: $00363636 !important;
}

.x-form-trigger-default{
    width: 24px; /*  */
    background: none;
    /*background-color: #fff;*/ /* v. 3.0.0.0 Thanks to Felipe( Gus )*/
    color: gray;
}
/* fim edits arredondados */

/* bsRENDER - themed v.  */
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: $00363636;/* #007bff;*/
    background-color: $00363636;/* #007bff;*/
}

.x-form-text:focus,
.x-form-text:hover,
.x-form-text:active
{
    /*border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/

    color: black ;
    border-color: $00FFFFE0;

    /*border:1px solid $00FFFFE0 ;*/

    /*background:$00FFFFE0 ;/*!important;*/

    /*box-shadow: 2px 2px 5px #E0E0E0 !important;*/
}

.x-myfield-focus {
    border-color: #7eadd9;
   /*background-color: #FFFFE1*/;
   color: #FF0000;
   background-image: none;
}

.edit-foco {
   border-color: $00FFFFE0; /*#7eadd9;*/
   background-color: none; /*$00FFFFE0 ;*/
   color: #FF0000;
   background-image: none;
}

.rc-wrapper {
  display: flex;
  background: $00363636 ;
  color:#fff ;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.rc-badge {
    display: inline-block;
    min-width: 1em; /* em unit */
    padding: .3em; /* em unit */
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
    background: #1779ba;
    color: #fefefe;
}

/* IMG CIRCLE - W3 SCHOOLS */
.avatar {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  top: 50% !important;
  left: 50% !important;
}

.localeflag {
  width: 18px;
  height: 14px;
  top: 50% !important;
  left: 50% !important;
}

/* sombra global nos forms
-------------------------
*/
.rc-form-shadow {
  box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 20px !important;
}
.x-css-shadow[style] {
  box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px !important;
}


/* GRADIENTES
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.gradient_whitetocolor
{
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top,  #ffffff 0%, red 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,red)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #ffffff 0%,red 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #ffffff 0%,red 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #ffffff 0%,red 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #ffffff 0%,red 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='red',GradientType=0 ); /* IE6-9 */
}

.gradient_colortoblack
{
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top,  red 0%, black 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,red), color-stop(100%,black)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  red 0%,black 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  red 0%,black 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  red 0%,black 100%); /* IE10+ */
 background: linear-gradient(to bottom,  red 0%,black 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='black',GradientType=0 ); /* IE6-9 */
}

.rc-gradient-color-green-to-bottom{
    background-image: linear-gradient(to bottom, $00808040, $00B7B717);
}
.rc-gradient-color-red-to-bottom{
    background-image: linear-gradient(to bottom, $004545D6, $006464DD);
}
.rc-gradient-color-orange-to-bottom{
    background-image: linear-gradient(to bottom, $00378DE3, $0066A8EA);
}
.rc-gradient-color-blue-to-bottom{
    background-image: linear-gradient(to bottom, $00C78E18, $00C78E18);
}
.rc-gradient-color-crud-to-bottom{
    background-image: linear-gradient(to bottom, $00373737, $00292929);
}
/* v. 3.0.0.0 - login form */
.rc-gradient-dark-to-color-crud{
    background-image: linear-gradient(to bottom, $00292929, $00373737);
}

/* BUTTONS / BOTÕES
---------------------------------------------------------------------------------------------------------------------------------------
*/

/* v.  */
.x-btn-inner-default-small{
    color: white;
}
.x-window-header-title-default > .x-title-text-default{
    color: white;
}

/* css da BORDA dos botoes: vc pode alterar pra ficar com a cor do FOCO se quiser....    */

.x-btn-default-small{
    border-color:$00363636;
    background-color:$00363636;
    background:$00363636;
   -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
}


.x-btn-default-medium{
    border-color:$00363636;
    background-color:$00363636;
    background:$00363636;
    -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
}


.x-btn-over {
    border-color:$00303030;
    background-color:$00303030;
    background:$00303030;
    text-decoration:none;
}

.x-btn-over:active,
.x-btn-over:hover,
.x-btn-over:focus {
    border-color:$00303030;
    background-color:$00303030;
    background:$00303030;
    text-decoration:none;
}

/* FOCUS COLOR    */

.x-keyboard-mode .x-btn-focus.x-btn-default-small {
    border-color:$00303030;
    background: $00303030;
}

.ButtonTheme{
padding: 0; /* v. 3.0.0.0 */  /*padding: 0;*/  /* v.  */
     background: $00363636 ;
     color:#fff ;
     border-color: $00363636; /* v. 3.0.0.0 */
     -moz-border-radius:4px;
     -webkit-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
      border-radius: 4px;    
     -webkit-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
}

.ButtonTheme:hover {
     background: $00303030; /* #6c757d !important;*/
     font-weight: bold;
     /*box-shadow: 2px 2px 5px #E0E0E0;
     border:2px none gray !important;  */
     color: #000 ;
     text-decoration:none;
}

.ButtonTheme:focus,
.ButtonTheme:active{
     border-color: $00363636; /* v. 3.0.0.0 */
     text-decoration:none;
     /*background: white;  #6c757d !important;
     font-weight: bold;
     box-shadow: 2px 2px 5px #E0E0E0;
     border:2px none gray !important;
     color: black;  !important;*/
}

.disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

.ButtonThemeInactive {
     background: gray ;
     color:#fff ;
     border-color: gray; /* // v. 3.0.0.0 */
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      
     -webkit-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
     text-decoration:none; /* v. 3.0.0.0 */
}

.ButtonThemeTab {
     background: $00363636 ;
     color:#fff ;
     border-color: $00363636; /* // v. 3.0.0.0 */
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;*
     -webkit-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
     text-decoration:none; /* v. 3.0.0.0 */
}


.ButtonThemeTab:hover {
     background: $00303030; /* #6c757d !important;*/
     font-weight: bold;
     /*box-shadow: 2px 2px 5px #E0E0E0;
     border:2px none gray !important;  */
     color: #000 ;
     text-decoration:none; /* v. 3.0.0.0 */
}

.ButtonThemeTab:focus,
.ButtonThemeTab:active{
     border-color: $00363636; /* // v. 3.0.0.0 */
     /*background: white;  #6c757d !important;
     font-weight: bold;
     box-shadow: 2px 2px 5px #E0E0E0;
     border:2px none gray !important;
     color: black;  !important;*/
     text-decoration:none; /* v. 3.0.0.0 */
}


.ButtonThemeCrud{
padding: 0; /* v. 3.0.0.0 */  /*padding: 0;*/  /* v.  */
     background: $00363636 ;
     color:#fff  !important;
     border-color: $00363636; /* // v. 3.0.0.0 */
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;*
     -webkit-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
}

.ButtonThemeCrud:hover {
     background: $00303030; /* #6c757d !important;*/
     font-weight: bold;
     /*box-shadow: 2px 2px 5px #E0E0E0;
     border:2px none gray !important;  */
     color: #fff  !important;
     text-decoration:none;
}

.ButtonThemeCrud:focus,
.ButtonThemeCrud:active{
     border-color: $00363636 ; /* // v. 3.0.0.0 */
     /*background: white;  #6c757d !important;
     font-weight: bold;
     box-shadow: 2px 2px 5px #E0E0E0;
     border:2px none gray !important;
     color: black;  !important;*/
     color: #fff  !important;
     text-decoration:none;
}

.ButtonLogin{
     padding: 0; /* v. 3.0.0.0 */
     background:$00663300 ;
     color:#fff !important;
     border-color:$00663300;
           -moz-border-radius: 5px;
     -webkit-transition: background 0.1s ease-in-out;
     transition: background 0.1s ease-in-out;
}


.ButtonLogin:focus,
.ButtonLogin:hover,
.ButtonLogin:active
{
    background:#6c757d !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}

/* cinza escuro */
.ButtonDark{
  padding: 0; /* v. 3.0.0.0 */
  background:$00292929 !important;
  background-color:#000 !important;
  color:#fff !important;
  border-color:$00292929;
        -moz-border-radius: 5px;
  -webkit-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
}

.ButtonDark:focus,
.ButtonDark:hover,
.ButtonDark:active{
    background:$00484848 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}

/* vermelho */
.ButtonRed{
  padding: 0; /* v. 3.0.0.0 */  /*padding: 0;*/  /* v.  */
  background:$004545D6 !important;
  background-color:#d56666c9; !important;
  color:#fff !important;
  border-color:$004545D6;
        -moz-border-radius: 5px;
  -webkit-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
}

.ButtonRed:focus,
.ButtonRed:hover,
.ButtonRed:active{
  background:$006464DD !important;
  font-weight: bold;
  box-shadow: 2px 2px 5px #E0E0E0;
  border:2px none gray !important;
  color: #000 !important;
  text-decoration:none;
}

/* verde */
.ButtonGreen{
  padding: 0; /* v. 3.0.0.0 */  /*padding: 0;*/  /* v.  */
  background:$00808040 !important;
  background-color:#3a600cc9; !important;
  color:#fff !important;
  border-color:$00808040;
        -moz-border-radius: 5px;
  -webkit-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
}
.ButtonGreen:focus,
.ButtonGreen:hover,
.ButtonGreen:active{
  background:$00808040 !important;
  font-weight: bold;
  box-shadow: 2px 2px 5px #E0E0E0;
  border:2px none gray !important;
  color: #000 !important;
  text-decoration:none;
}

/* azul */
.ButtonBlue {
  padding: 0; /* v. 3.0.0.0 */
  background: $00C78E18 !important; 
  background-color:#334ba6c9; !important; 
  color:#fff; /*!important;*/
  border-color:$00C78E18;
        -moz-border-radius: 5px;
  -webkit-transition: background 0.1s ease-in-out;
  transition: background 0.1s ease-in-out;
}
.ButtonBlue:focus,
.ButtonBlue:hover,
.ButtonBlue:active
{
    background:$00E7AE3A !important;
    font-weight: bold;
    /*box-shadow: 2px 2px 5px #E0E0E0;*/
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}


/* azul escuro */
.ButtonBlueDark
{
padding: 0; /* v. 3.0.0.0 */
 background: $008B2F14 !important;
 background-color:#041040c9; !important; 
 color:#fff !important;
 border-color:$008B2F14;
       -moz-border-radius: 5px;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.ButtonBlueDark:focus,
.ButtonBlueDark:hover,
.ButtonBlueDark:active
{
    background:$008B2F14 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}


.x-btn-inner-default-medium{
    padding: 0px;
}

/* branco */
.ButtonWhite
{
 background:#4a3f3f  !important;
 border-color:#FFFFFF;
 background-color:#FFFFFF; !important; 
 border: 0px ;
-moz-border-radius: 3px;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.ButtonWhite:focus,
.ButtonWhite:hover,
.ButtonWhite:active
{
    background:black  !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px gray;
    border:2px none gray ;
    color: black  !important;
    text-decoration:none;
}


/* laranja */
.ButtonOrange
{
padding: 0; /* v. 3.0.0.0 */
 background:$00378DE3 !important;
 color:#fff !important;
 border-color:$00378DE3;
-moz-border-radius: 5px;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.ButtonOrange:focus,
.ButtonOrange:hover,
.ButtonOrange:active
{
    background:$00378DE3 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}

/* cinza */
.ButtonGray
{
padding: 0; /* v. 3.0.0.0 */
 background:$00837074 !important;
 color:#fff !important;
 border-color:$00837074;
 -moz-border-radius: 5px;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.ButtonGray:focus,
.ButtonGray:hover,
.ButtonGray:active
{
    background:$0098878A !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}

/* silver  */
.ButtonSilver
{
 background:$00BBBBBB !important;
 color:#fff !important;
 border-color:$00BBBBBB;
 -moz-border-radius: 5px;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.ButtonSilver:focus,
.ButtonSilver:hover,
.ButtonSilver:active
{
    background:$00D4D4D4 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px none gray !important;
    color: #000 !important;
    text-decoration:none;
}


/* OutLine Buttons
---------------------------------------------------------------------------------------------------------------------------------------
*/

.ButtonOutline {
    padding: 0; /* v. 3.0.0.0 */
    border: none;
    /*color: white !important ;*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /* transition-duration: 0.2s; */
    -webkit-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 0;
}

/* outline blue buttons */
.ButtonOutlineBlue {
    background-color: white;
    color: black;
    border: 2px solid $00C78E18;
}

.ButtonOutlineBlue:focus,
.ButtonOutlineBlue:hover
{
    background:$00E7AE3A !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00C78E18; /* v. 3.0.0.0 */
}

.ButtonOutlineBlue:active
{
    background:$00E7AE3A !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* outline blue dark buttons */
.ButtonOutlineBluedark {
    background-color: white;
    color: black;
    border: 2px solid $008B2F14;
}

.ButtonOutlineBluedark:focus,
.ButtonOutlineBluedark:hover
{
    background:$008B2F14 !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $008B2F14; /* v. 3.0.0.0 */
}

.ButtonOutlineBluedark:active
{
    background:$008B2F14 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* green buttons */
.ButtonOutlineGreen{
    background-color: white;
    color: black;
    border: 2px solid $00808040;
}

.ButtonOutlineGreen:focus,
.ButtonOutlineGreen:hover
{
    background:$00808040 !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00808040; /* v. 3.0.0.0 */
}


.ButtonOutlineGreen:active
{
    background:$00808040 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* red buttons */
.ButtonOutlineRed{
    background-color: white;
    color: black;
    border: 2px solid $004545D6;
}

.ButtonOutlineRed:focus,
.ButtonOutlineRed:hover
{
    background:$006464DD !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $004545D6; /* v. 3.0.0.0 */
}

.ButtonOutlineRed:active
{
    background:$006464DD !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* orange buttons */
.ButtonOutlineOrange{
    background-color: white;
    color: black;
    border: 2px solid $00378DE3;
}

.ButtonOutlineOrange:focus,
.ButtonOutlineOrange:hover
{
    background:$00378DE3 !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00378DE3; /* v. 3.0.0.0 */
}

.ButtonOutlineOrange:active
{
    background:$00378DE3 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* gray buttons */
.ButtonOutlineGray{
    background-color: white;
    color: black;
    border: 2px solid $00837074;
}

.ButtonOutlineGray:focus,
.ButtonOutlineGray:hover
{
    background:$0098878A !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00837074; /* v. 3.0.0.0 */
}

.ButtonOutlineGray:active
{
    background:$0098878A !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* silver buttons */
.ButtonOutlineSilver {
    background-color: white;
    color: black;
    border: 2px solid $00BBBBBB;
}

.ButtonOutlineSilver:focus,
.ButtonOutlineSilver:hover
{
    background:$00D4D4D4 !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00BBBBBB; /* v. 3.0.0.0 */
}

.ButtonOutlineSilver:active
{
    background:$00D4D4D4 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* outline dark buttons */
.ButtonOutlineDark {
    background-color: white;
    color: black;
    border: 2px solid $00292929;
}

.ButtonOutlineDark:focus,
.ButtonOutlineDark:hover
{
    background:$00484848 !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00292929; /* v. 3.0.0.0 */
}

.ButtonOutlineDark:active
{
    background:$00484848 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/* outline THEME CRUD buttons */
.ButtonOutlineThemeCrud {
    background-color: white;
    color: black;
    border: 2px solid $00363636;
}

.ButtonOutlineThemeCrud:focus,
.ButtonOutlineThemeCrud:hover
{
    background:$00363636 !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    color: #fff !important;
    text-decoration:none;
    border: 2px solid $00363636; /* v. 3.0.0.0 */
}

.ButtonOutlineThemeCrud:active
{
    background:$00303030 !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
    color: #fff !important;
}

/*
// sweet alert
*/
.swal2-modal .swal2-spacer {
    height: 0px !important;
}

/*
// Field Set / Html / Grid Borders
*/
.x-panel-default-outer-border-rl{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.x-panel-default-outer-border-rbl{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.x-panel-default-outer-border-trl {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.x-html-editor-container {
    border: none;
}
.x-fieldset {
    border-top: none !important;
}
.x-fieldset-default {
    border: none;
    background: none;
}
/*
// Lista de Produtos
*/
.img-size-32{
      height: auto;
      width: 32px;
}
.img-circle{
    border-radius: 50%;
}


/* ICONES FONTAWESOME NOS EDITs ( nao implementei pro mobile - outro tema )
---------------------------------------------------------------------------------------------------------------------------------------
fonte: fórum
adaptação: Flavio Motta
*/

.inputWithIcon input[type="text"] {
  padding-left: 40px ;
}
.inputWithIcon {
  position: relative ;
}
.inputWithIcon i {
  position: absolute ;
  left: 0px ;
  top: 0px ;
  padding: 6px 8px ;*
  vertical-align: middle;
  width: 27px;
  height: 40px;
  color: #aaa ;
}
.inputWithIcon.inputIconBg i {
  background-color: #fff; /*#aaa ;*/
  color: silver ;
  padding: 12px 8px ;
  width: 30px;
  height: 40px;

  border-radius: 4px 0 0 4px;  

  border-left: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-right: 0px solid #d0d0d0;
  z-index: 1000;
}
/*.inputWithIconFocus {
    border-color: $00363636 !important;
}
.inputWithIconBlur {
    border-color: #d0d0d0 !important;
} */

/* v.  */
.inputWithIconFocus input[type="text"] {
  padding-left: 40px ;
}
.inputWithIconFocus {
  position: relative ;
}
.inputWithIconFocus i {
  position: absolute ;
  left: 0px ;
  top: 0px ;
  padding: 6px 8px ;*
  vertical-align: middle;
  width: 27px;
  height: 40px;
  color: #aaa ;
}
.inputWithIconFocus.inputIconBg i {
  background-color: #fff; /*#aaa ;*/
  color: silver ;
  padding: 12px 8px ;
  width: 30px;
  height: 40px;

  border-radius: 4px 0 0 4px;

  border-left: 1px solid $00363636;/*rgba(81, 203, 238, 1);*/
  border-top: 1px solid $00363636;/*rgba(81, 203, 238, 1);*/
  border-bottom: 1px solid $00363636;/*rgba(81, 203, 238, 1);*/
  border-right: 0px solid #d0d0d0;

  z-index: 1000;
}


/* center */
.center-div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Button Floating
 ---------------------------------------------------------------------------------------------------------------------------------- */

     .fab{
        position: fixed;
        bottom:10px;
        right:10px;
        }

     .fab button{
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 30px;
        background-color: $00303030; /*#cb60b3;*/
        border: none;
        box-shadow: 0 1px 5px rgba(0,0,0,.4);
        font-size: 24px;
        color: white;

        -webkit-transition: .2s ease-out;
        -moz-transition: .2s ease-out;
        transition: .2s ease-out;
        }

     .fab button:focus{
        outline: none;
        }

     .fab button.main{
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background-color: $00363636; /*#5b19b7;*/
        right: 0;
        bottom: 0;
        z-index: 20;
        }

     .fab button.main:before{
        content: '⋀';
        }

     .fab ul{
        position:absolute;
        bottom: 0;
        right: 0;
        padding:0;
        padding-right:5px;
        margin:0;
        list-style:none;
        z-index:10;

        -webkit-transition: .2s ease-out;
        -moz-transition: .2s ease-out;
        transition: .2s ease-out;
        }

     .fab ul li{
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-bottom: -10%;
        opacity: 0;

        -webkit-transition: .3s ease-out;
        -moz-transition: .3s ease-out;
        transition: .3s ease-out;
        }

     .fab ul li label{
        margin-right:10px;
        white-space: nowrap;
        display: block;
        margin-top: 10px;
        padding: 5px 8px;
        background-color: rgba(0,0,0,0);
        /*box-shadow: 0 1px 3px rgba(0,0,0,.2);*/
        border-radius:0px;
        border:0px;
        border-color:transparent;
        height: 18px;
        font-size: 16px;
        pointer-events: none;
        opacity:0;

        -webkit-transition: .2s ease-out;
        -moz-transition: .2s ease-out;
        transition: .2s ease-out;
        }

     .fab.show button.main,
     .fab.show button.main{
        outline: none;
        background-color: $00363636; /*#7716ff; */
        box-shadow: 0 3px 8px rgba(0,0,0,.5);
       }

     .fab.show button.main:before,
     .fab.show button.main:before{
        content: '⋁';
        }

     .fab.show button.main + ul,
     .fab.show button.main + ul{
        bottom: 70px;
        }

     .fab.show button.main + ul li,
     .fab.show button.main + ul li{
        margin-bottom: 10px;
        opacity: 1;
        }

     .fab.show button.main + ul li:hover label,
     .fab.show button.main + ul li:hover label{
        opacity: 1;
     }

/* // v. 3.0.0.0 */
/* ------------- direct chat ---------------- */
.direct-chat .card-body {
  overflow-x: hidden;
  padding: 0;
  position: relative;
}

.direct-chat.chat-pane-open .direct-chat-contacts {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.direct-chat.timestamp-light .direct-chat-timestamp {
  color: #30465f;
}

.direct-chat.timestamp-dark .direct-chat-timestamp {
  color: #cccccc;
}

.direct-chat-messages {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  height: 250px;
  overflow: auto;
  padding: 10px;
}

.direct-chat-msg,
.direct-chat-text {
  display: block;
}

.direct-chat-msg {
  margin-bottom: 10px;
}

.direct-chat-msg::after {
  display: block;
  clear: both;
  content: "";
}

.direct-chat-messages,
.direct-chat-contacts {
  transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.direct-chat-text {
  border-radius: 0.3rem;
  background-color: #d2d6de;
  border: 1px solid #d2d6de;
  color: #444;
  margin: 5px 0 0 50px;
  padding: 5px 10px;
  position: relative;
}

.direct-chat-text::after, .direct-chat-text::before {
  border: solid transparent;
  border-right-color: #d2d6de;
  content: " ";
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 100%;
  top: 15px;
  width: 0;
}

.direct-chat-text::after {
  border-width: 5px;
  margin-top: -5px;
}

.direct-chat-text::before {
  border-width: 6px;
  margin-top: -6px;
}

.right .direct-chat-text {
  margin-left: 0;
  margin-right: 50px;
}

.right .direct-chat-text::after, .right .direct-chat-text::before {
  border-left-color: #d2d6de;
  border-right-color: transparent;
  left: 100%;
  right: auto;
}

.direct-chat-img {
  border-radius: 50%;
  float: left;
  height: 40px;
  width: 40px;
}

.right .direct-chat-img {
  float: right;
}

.direct-chat-infos {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.direct-chat-name {
  font-weight: 600;
}

.direct-chat-timestamp {
  color: #697582;
}

.direct-chat-contacts-open .direct-chat-contacts {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.direct-chat-contacts {
  -webkit-transform: translate(101%, 0);
  transform: translate(101%, 0);
  background-color: #343a40;
  bottom: 0;
  color: #fff;
  height: 250px;
  overflow: auto;
  position: absolute;
  top: 0;
  width: 100%;
}

.direct-chat-contacts-light {
  background-color: #f8f9fa;
}

.direct-chat-contacts-light .contacts-list-name {
  color: #495057;
}

.direct-chat-contacts-light .contacts-list-date {
  color: #6c757d;
}

.direct-chat-contacts-light .contacts-list-msg {
  color: #545b62;
}
/* ------------- direct chat ---------------- */
.radio .x-form-cb-wrap-inner {
	background: #4a3f3f;
	background-color:#4a3f3f; 
	padding: 4px;
	position: relative;
}

.radio .x-form-cb-label {
  color : white;	
}

.radio .x-form-field .x-form-radio .x-form-radio-default .x-form-cb .x-form-cb-default {
margin-left: 3px;
}	

.radio .x-form-cb-checked .x-form-radio-default:after {
 background-color:blue;
}


.radio .element{
 background-color:#4a3f3f;
}


.radio input {
	width: auto;
	height: 100%;
	appearance: none;
	outline: none;
	cursor: pointer;
	border-radius: 2px;
	padding: 4px 8px;
	background: #4a3f3f;
	color: #bdbdbdbd;
	font-size: 14px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	transition: all 100ms linear;
}

.radio input:checked {
	background-color:blue;
	color: #fff;
	box-shadow: 0 1px 1px #0000002e;
	text-shadow: 0 1px 0px #79485f7a;
}

.radio input:before {
	content: attr(label);
	display: inline-block;
	text-align: center;
	width: 100%;
}

.box {
    color: #EEE;
    border-radius: 6px;
    margin: 10px 3px;
    padding: 8px 5px 5px 12px;
    height: 120px;   
    overflow: hidden;         
    box-shadow: 0 10px 20px -10px rgb(102, 102, 102);
}

.box p {
    float: left;
    font-size: 18px;
    padding: 8px 0 0 8px;
    margin: 9px 0 0 0;
    width: 100%;
    display: inline;
}

.box h1 {
    clear: both;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    font-size: 24px;
    padding: 0 0 0 7px;
    margin: 0;
    z-index: 3;
}

.box i {
    position: relative;
    top: 17px;
    right: 10px !important;
    font-size: 70px;
    opacity: .3;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    color: #EEE;
 /*   z-index: 2;*/
}

.box:hover i {
    position: relative;  
    opacity: .7;    
}
 /*
@media screen and (max-width: 1024px) {
    .box {
        height: 100px;
    }

    .box p   {
        font-size: 13px;
    }

    .box h1   {
        font-size: 20px;
    } 

    .box i, .box:hover i   {
        font-size: 52px;
        top: 16px;
        right: 6px;
    }
}

@media screen and (max-width: 360px) {
    .box {
        height: 100px;
    }

    .box p   {
        font-size: 15px;
    }

    .box h1   {
        font-size: 18px;
    }

    .box i, .box:hover i   {
        font-size: 60px;
        top: 12px;
    }
}
*/