/*  Configurações gerais para identidade visual do site  */

/*
  Histórico de mudanças: ;
  .2021/10/27; controle do tamanho da imagem; pjb
*/
/* CORES Trustee
    cor      R     G     B    Hex
    cor1    43    18   102    #2B1266 
    cor2   120    99   183    #878787
    cor3   217    217  217    #d9d9d9
    cor6   157    157  157    #9d9d9d
    cor7                      #35319d
    cor8                      #6560ea
*/

/* Barra superior, principal do site */
.m-header {
    background-color:   #878787 !important;
}

/* Barra secundária. Normalmente aparece nos formulários */
.m-portlet--metal {
    background-color:   #636363 !important;
    color: white !important;
}


/* Menu lateral. Background color */
.m-aside-left--skin-light {
    /*
    background-color:   #e3e3e3 !important;
    color: white !important;
    */
}

/* Sub Menu lateral. Background color */
.m-aside-menu--submenu-skin-light {
    /*
    background-color:   #e3e3e3 !important;
    */
}

/* Cor do Texto do Menu */
.m-menu__link-text {
    color:   #636363 !important;
}

/* Cor do Icon do menu lateral */
.m-menu__link-icon {
    /*
    color:   #ececec !important;
    */
}

.m-aside-left--skin-light:hover {
    /*
    background-color: #a4a4a4 !important;
    color: #636363 !important;
    */
}

/* Backgrounds */

.bg-brand  {
    background-color:   #636363 !important;
}

.bg-secondary  {
    background-color:   #878787 !important;
}


/* Botões dos fomulários shadow-none */
.btn-success {
    background-color: #878787 !important;
    border-color: #878787;
}
.btn-success:hover {
    background-color: #615094 !important;
    border-color: #5a4a8a !important;
}
.btn-success:disabled {
    border-color: #5a4a9a !important;
}

.btn.m-btn--hover-success:active {
    background-color: #878787 !important;
    border-color: #878787 !important;
}
.btn.m-btn--hover-success:focus {
    background-color: #878787 !important;
    border-color: #878787 !important;
}

/* botões das listas, documentos e comprovantes em 
   compliance, por exemplo  */
.m-btn--hover-success:not(.btn-secondary):hover {
    background-color: #615094 !important;
    border: none;
}

.btn-success.m-btn--air {
    box-shadow: 0px 5px 10px 2px rgba(57,26,168,0.19) !important
}
.btn-success.m-btn--air:hover {
    box-shadow: 0px 5px 10px 2px rgba(57,26,168,0.38) !important
}
.btn-success.m-btn--air:disabled {
    box-shadow: 0px 5px 10px 2px rgba(57,26,168,0.25) !important
}

.btn-outline-brand {
    border-color: #878787 !important;
}
.btn-outline-brand:hover {
    background-color: #878787 !important;
}

.xm-badge.m-badge--success {
    background-color: #878787;
}

/* Titulo dos portlets criativos */
.m-portlet__head-label--info {
    background-color: #2B1266 !important;    
}


/* botão para apresentar os indicadores de onboarding nas 
   telas dos clientes */
.btn-indicador {
  background-color: #F4F3F9;
  border: none;
  font-color: #3F4047 !important;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}
.btn-indicador:hover {
    background-color: #d9d9d9;
}

.m-table.m-table--head-separator-brand thead th {
    border-top: 0;
    border-bottom: 1px solid #878787 !important;
}


.text-indicador {
    color: #3F4047;
}

.text-indicador:hover {
    color: #878787;
}


/* Botões do Wizard quando posicionado */

.m-wizard__step--current {
    /*background-color: #878787 !important; */
}

/* Cor dos Títulos das Seções dos Formulários */

.m-form__heading-title {
    color: #878787 !important;
}

/* Cor do texto dos disclaimers ( alertas ) nos formulaários */

.alert-success {
    color: #979797 !important;
    border-color: #e5e5e5 !important; 
}


.mc-brand-text {
  color: #6c6c6c !important;
}

.mc-prod-asset-text {
  color: #2B1266 !important;
}


.mc-form-title-text {
    /*
    color: #2B1266 !important;
    */
    color: white;
}


.mc-table--head-bg-brand {
    background-color:   #6c6c6c !important;
    color: white !important;
}

.mc-div-section {
    background-color: #FFFFFF;
    width: 100%;
    color: #333333;
    height: 30px;
    margin: 0 auto;
    ov-m-portlet--head-solid-bgerflow: hidden;
    padding: 10px 0;
    align-items: center;
    justify-content: space-around;
    display: flex;
    float: none;
}

.m-styc-menu {
    border-left-width: medium;
    border-left-style:   solid;
    border-top-width: thin;
    border-top-style:   solid;
    border-color:   #878787;
}

.mc-aside-menu--skin-dark {
    background-color:   #445f78;
}

.mc-aside-left--skin-dark {
    background-color:   #445f78;
}

.mc-aside-menu--submenu-skin-dark {
    background-color:   #445f78;
}


.mc-custom-scrollbar {
position: relative ;
height: 180px ;
overflow: auto ;
}
.mc-table-wrapper-scroll-y {
display: block ;
}

.mc-custom-scrollbar-400 {
position: relative ;
height: 400px ;
overflow: auto ;
}



.space-50 {
    display: inline-block;
    width: 50px;
}
.space-100 {
    display: inline-block;
    width: 100px;
}
.signature {
    display: inline-block;
    width: 100px;
    border-bottom: 1px #000 dotted;
}

.mc-shadow {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.mc-border-shadow {
  border-bottom: 1px solid #E3E3E3;
  border-top: 1px solid #E3E3E3;
  border-left: 3px solid #E3E3E3;
  border-right: 1px solid #E3E3E3;
}



.mc-progress-title{
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px;
}
.mc-progress{
    height: 20px;
    background: #f0f0f0;
    border-width: 8px 0;
    border-style: solid none;
    border-color: #000;
    border-radius: 30px;
    margin-bottom: 30px;
    box-shadow: none;
    overflow: visible;
    position: relative;
}
.mc-progress .mc-progress-bar{
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    position: relative;
    animation: animate-positive 1s;
}
.mc-progress .mc-progress-bar:before{
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #000;
    background: #f0f0f0;
    position: absolute;
    top: -14px;
    right: 0;
}
@-webkit-keyframes animate-positive{
    0%{ width: 0; }
}
@keyframes animate-positive{
    0%{ width: 0; }
}

.m-widget28 .m-widget28__pic {
    background-color: #6c6c6c !important;
}
.m-widget28 .m-widget28__container .m-widget28__nav-items .m-widget28__nav-item > a.active {
    background-color: #6c6c6c !important;
}

.m-badge--brand {
    background-color: #6c6c6c !important;
    color: white !important;
}

.comprovante-div {
    width: 500px;
    height: 400px;
    overflow: hidden; /* Faz o div não aumentar a altura por causa da imagem */
}

.comprovante-img {
    border: 1px solid red;
    width: 100%;
}

.img-thumb {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}