@font-face{
  font-family: 'Source Sans Pro';
  font-weight: 300;
  src: url("../fonts/Source_Sans_Pro/SourceSansPro-Light.ttf") format('truetype');
 }
 @font-face{
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
   src: url("../fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf") format('truetype');
  }
  @font-face{
    font-family: 'Source Sans Pro';
    font-weight: 700;
    src: url("../fonts/Source_Sans_Pro/SourceSansPro-Black.ttf") format('truetype');
   }
@font-face{
   font-family: 'Arial Narrow';
  src: url("../fonts/arial-narrow/arial-narrow.ttf") format('truetype');
}

BODY{
    /* bbackground: #F7F7F8; */
    background: #FFF;
    color: #444;
    /* font-family:'Open Sans', courier; */
    font-size: 11px;
}

.main-page table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

.main-page table td,.main-page  table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

#right-filter-box{ padding: 7px; }


/* NEW DROPDOWN FILTER */
.filter-container{


    width: 100%;
    padding-bottom: 4px;
}

.filter-container .filter-box .m-title,
.filter-container .filter-box .m-desc{
    display:table;
    font-size:13px;
    color:#000;
    vertical-align:top;
    font-weight:bold;
    padding-left:4px;
}

.filter-container .filter-box .m-title{
    font-size:11px;
    color:#999;
    padding-top: 8px;
}

.filter-container .filter-box .m-img{
    vertical-align:top;
    float:left;
    /* border:2px solid #999; */
    display:inline-table;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    width:51px;
    height:51px;
    text-align:center;
    -webkit-transition: border-color 400ms ease;
    -moz-transition: border-color 400ms ease;
    -ms-transition: border-color 400ms ease;
    -o-transition: border-color 400ms ease;
    transition: border-color 400ms ease;


}
.filter-container .filter-box .m-img .badge{
    position:absolute;
    right:7px;
    top:10px;
    background:transparent;
}
.filter-container .filter-box .m-img.m-cursor-pointer{
    cursor:pointer;
}

.filter-container .filter-box:hover .m-img{
    /* border-color:#f44336; */
}
.filter-container .filter-box:hover .m-img .m-img-container .font-icon{
    /* color:#f44336; */
    color: #444;
}

.filter-container .filter-box .m-img{
    /* border-color: #fbb5b4; */
}
.filter-container .filter-box .m-img.active{
    border-color:#444;
}
.filter-container .filter-box .m-img.active .m-img-container .font-icon{
    color: #444;
}
.filter-container .filter-box .m-img .m-img-container {
    vertical-align:middle;
    display:table-cell;
    margin:0;
    padding:0;
}
.filter-container .filter-box .m-img .m-img-container .font-icon{
    /* color: #fbb5b4; */
    color: #888;
    line-height: 47px;
    font-size:26px;
    -webkit-transition: color 400ms ease;
    -moz-transition: color 400ms ease;
    -ms-transition: color 400ms ease;
    -o-transition: color 400ms ease;
    transition: color 400ms ease;
}

.main-page .filter-container .filter-box .font-icon.m-download{
    color: #6ec571 !important;
}
.main-page .filter-container .filter-box:hover .font-icon.m-download{
    color: #4caf50 !important;
}
.filter-container .filter-box .font-icon.m-fullscreen{
    color: #555 !important;
}
.filter-container .filter-box:hover .font-icon.m-fullscreen{
    color: #222 !important;
}

.filter-container .filter-box .m-img .m-img-container IMG{
    max-width:40px;
    max-height:40px;
    margin:0;
    padding:0;
}

.filter-container .filter-box .dropdown-menu{
    max-height: 200px;
    coverflow-y: auto;
}
.filter-container .filter-box .dropdown{
    display:table;
    cursor: pointer;
}
.filter-container .filter-box .dropdown .selected-name{
    padding-left: 4px;
    font-weight:bold;
    font-size:12px;
}
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item{
    padding:0;
    margin:0;
    min-width:188px;
}
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item A{
    display:block;
    min-height: 24px;
    line-height:24px;
    padding-left:8px;
    padding-right:8px;
    background:#FFF;

}
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item A > SPAN{ float:left; }
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item A > .glyphicon { float: right; }

.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item.active A,
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item.check A{
    background:#E00E0E;
    color:#FFF;
    min-height:24px;
}
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item.active A SPAN,
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item.check A SPAN {
    color: #FFF;
}
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item.active A:hover,
.filter-container .filter-box .dropdown .dropdown-menu .dropdown-item.check A:hover{
    background:#BB1D1D;
}
.filter-container .filter-clean{
    font-style: italic;
    font-size: 12px;
    color: #444;
}


.filter-container .has-selected-value .selected-name{ color:#C4442F;}
.filter-container .has-selected-value .selected-name:after{ color: #444; }



.filter-container .dropdown .selected-name:after{
    content: "\f078"; font-family: "Font Awesome 5 Free"; padding-left:4px;
}
.filter-container .dropdown .dropdown-menu .dropdown-item{
    margin:0; min-width:188px; padding:0; font-size: 13px;
}
.filter-container .dropdown .dropdown-menu .dropdown-item A{
    display:block; color: #777; padding:0 4px; min-height:24px;
}
.filter-container .dropdown .dropdown-menu .dropdown-item A > SPAN{ float:left; white-space: nowrap; }
.filter-container .dropdown .dropdown-menu .dropdown-item A > .glyphicon,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .fas,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .far,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .fa {
    float: right; min-height:24px; display:inline-table;
}
.filter-container .dropdown .dropdown-menu .dropdown-item A > .glyphicon:before,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .fas:before,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .far:before,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .fa:before{
    display:table-cell; vertical-align: middle;
}
.filter-container .dropdown .dropdown-menu .dropdown-item A > .glyphicon:hover,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .fas:hover,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .far:hover,
.filter-container .dropdown .dropdown-menu .dropdown-item A > .fa:hover{
    background: #F4F4F4;
}
.filter-container .dropdown .dropdown-menu .dropdown-item.active A,
.filter-container .dropdown .dropdown-menu .dropdown-item.check A{
    background:#E00E0E;color:#FFF;
}
.filter-container .dropdown .dropdown-menu .dropdown-item.active A:hover,
.filter-container .dropdown .dropdown-menu .dropdown-item.check A:hover{
    background:#BB1D1D;
}

.filter-container .filter-box .dropdown-menu{
    max-height: 200px;
    overflow-y: auto;
}

/* estilos para o gráfico */

/** C3 **/
SVG *{font-family:'Source Sans Pro', sans-serif !important;letter-spacing:-0.4px}
.c3-grid .m-mark line{stroke:#00BCD4;stroke-width:3px}
.c3-grid .m-mark text{fill:black}
g.c3-chart-texts .c3-text{font-size:11px}
.c3-tooltip TR{border:1px solid #444 !important;white-space:nowrap}
.c3-tooltip TR.m-active TD{background:#FFFDE9}
.c3-tooltip TR>TD{padding:3px 6px;font-size:13px}
.c3-tooltip TR>TD:nth-child(2){border-left:1px dotted #CCC}
.c3-tooltip TR>TD SPAN{margin-right:6px;margin-bottom:-1px}

.c3-tooltip TR.m-active TH{background:#FFFDE9}
.c3-tooltip TR>TH{padding:3px 6px;font-size:13px}
.c3-tooltip TR>TH:nth-child(2){border-left:1px dotted #CCC}
.c3-tooltip TR>TH SPAN{margin-right:6px;margin-bottom:-1px}


/** MODAL **/
.modal-backdrop.youtube-video{opacity:.8}
.modal.youtube-video .modal-header{background:transparent !important;padding-bottom:0}
.modal.youtube-video .modal-dialog{max-width:76%;margin:0 auto}
.modal.youtube-video .modal-body{padding:1rem 0 0 0}
.modal .modal-header{border-top-left-radius:5px;border-top-right-radius:5px}
.modal .modal-content{border-radius:4px}
.modal .modal-content .modal-header{border:none;color:#FFF;border-top-left-radius:3px;border-top-right-radius:3px;text-align:center;font-weight:bold}
.modal .modal-content .modal-body{border:none}
.modal .modal-content .modal-footer{border:none}
.modal.m-loading .progress-bar{background-color:#4CAF50}
.modal.m-loading .modal-header{position:fixed;border-radius:3px;padding:8px 34px;margin-top:60px;left:50%;margin-left:-148px;color:#fff;background:#8bc34a;box-shadow:0 0 0 8px rgba(139,195,74,0.51)}
.modal.m-loading .modal-header h4{margin:0;font-size:25px}
.modal.m-loading .modal-content{background:transparent;border:0}
.modal.m-loading .modal-body{display:none}
.modal.m-download .modal-header{color:#FFF;border-bottom:0}
.modal.m-success .modal-content .modal-header{background:#4CAF50;color:#FFF;border-bottom:0}
.modal.m-info .modal-content .modal-header{background:#4CAF50;color:#FFF;border-bottom:0}
.modal.m-error .modal-content .modal-header{background:#F44336;color:#FFF;border-bottom:0}
.modal.m-confirm .modal-content .modal-header{background:#FFC107;color:#FFF;border-bottom:0}
.modal.m-graph .modal-content .modal-header{background:#DE0F00;color:#FFF;text-align:center;font-weight:bold}

/** BTN **/


/* estilos para o gráfico fim */

.main-page .table {
  width: auto;
  min-width:100%;
  table-layout: fixed;
}

.main-page table thead tr:first-child th{
    vertical-align: middle;
    font-size: 16px;
}
.main-page table thead tr:nth-child(2) th{
    vertical-align: bottom;
    font-size: 9px;
    font-weight: normal !important;
}
.main-page table thead tr:first-child th:nth-child(1){
    border-top-left-radius: 14px;
}
.main-page table thead tr:first-child th:nth-child(2){
    border-top-right-radius: 14px;
}
.main-page table thead tr:first-child th:not([rowspan]){
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    /* border-width:0; */
}

.main-page .table > :not(caption) > * > * {
    fpadding: .1rem .1rem;
}
.main-page .table TD,
.main-page .table TH {
  font-size: 11px;
  /* padding: 2px; */
  vertical-align: top;
}

.main-page .table TD{
    padding: 8px 4px;
}

.main-page .table thead td ,
.main-page .table thead th {
  background: #212529;
  color: #FFF;
  border: 0px;
  padding: 2px 5px;

  text-align: center;
  vertical-align: top;
  position: relative;
  /* border-left: 1px solid white !important; */
  border-left: 1px solid rgba(255,255,255,0.3) !important;

  /* bborder-bottom: 1px solid transparent !important; */

  /* box-shadow: inset 0 1px 0 #FFF; */
  /* box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); */
  /* b, inset 0 -1px 0 #FFF; */
}


/* table thead th I[data-type='sort-icon']{ */
.main-page table thead th > I{ /* sort icon */
    display: block;
    padding: 0 0 4px;
    font-size:13px;
}
.main-page table thead th div[onclick]{ /* botão (+) */
    font-size: 11px;
    padding: 6px;
    margin: 0px -5px -2px;
    background: rgba(0,0,0,0.1);
}
.main-page table thead th div[onclick]:hover{ /* botão (+):hover */
    background: rgba(0,0,0,0.2);
}

.main-page table TBODY{
  border-right: 1px solid #dcdcdc !important;
  
}
.main-page table TBODY td {
  /* border-bottom: 1px solid #dcdcdc !important; */
  border-left: 1px solid #dcdcdc !important;
  border-bottom:1px solid transparent;
  border-top: 1px solid transparent;
  text-align: center;
  width: 100px;
}
.main-page table tbody td:nth-child(1){
     width: 55px;
     min-width: 55px;
}
.main-page table tbody td:nth-child(2){
     /* wwidth: 200px; */
     min-width: 200px;
     width: auto;
}
.main-page table tbody td:nth-child(2){
   text-align: left;
}


.main-page .table td span,
.main-page .table th span {
  position: absolute;
  top: 0px;
  right: 0px;
  /* font-size: 12px; */
  font-size: 11px;
}
.main-page .table tbody TD {
  min-width: 100px;
  width: 100px;
}
.main-page .table thead td.divhide,
.main-page .table thead th.divhide {
  border: 0px;
}
.main-page .table .divhide {
  font-size: 0px;
  border-left: 0px !important;
  padding-left: 0px;
  padding-right: 0px;

  transition: font-size 100ms, width 100ms;
  overflow: hidden;

  width: 0px;
  min-width: 0px;
  max-width: 0px;
}
.main-page table thead {
  font-weight: bolder;
}
.main-page table thead tr:nth-child(2) TD,
.main-page table thead tr:nth-child(2) TH{
     /* font-size: 12px; */
     font-size: 11px;
     font-weight: bolder;
}

.main-page .table thead .divhide.show {
  /* border-left: 1px solid white !important; */

  border-left: 1px solid rgba(255,255,255,0.3) !important;

  /* bborder-bottom: 1px solid #FFF !important; */
}
.main-page table thead tr:nth-child(2) .divhide.show{
     /* font-size: 12px; */
     font-size: 11px;
     font-weight: bolder;
}

.main-page .table .divhide.show {
  /* font-size: 13px; */
  font-size: 11px;
  padding-left: 2px;
  padding-right: 2px;

  width: 100px;
  min-width: 100px;
  max-width: 100px;
}
.main-page .table tbody .divhide.show {
  border-left: 1px solid rgb(220,220,220) !important;
}

.main-page THEAD TD SPAN,
.main-page THEAD TH SPAN {
  display: none;
}
.hideshow {
  cursor: pointer;
  color: #FFF;
}
.hideshow:hover,
.hideshow:active,
.hideshow:hover:active,
.hideshow:hover{
  color: #CCC;
}

.color1{
  background: red !important;
}

.main-page .table-responsive {
  overflow: none;
}

.hideobj {
  width: 100%;
  text-align: center;
  bottom: 3px;
  position: absolute;
  left: 0px;
  cursor:pointer;
}

.inforeportada {
  background: #ffe699 !important;
}
.inforeportada2 {
  background: #f4b183 !important;
}


.main-page .table TBODY .trover TD {
    /* background: rgba(255, 253, 230, 0.07); */
    border-bottom: 1px dashed blue;
    border-top: 1px dashed blue;
}
.main-page .table TBODY .trover .inforeportada{
  background: #e0bd52 !important;
}
.main-page .table TBODY .trover .inforeportada2 {
  background: #ce895a !important;
}

.filter-container {
  float: left;
  width: 150px;
}
.fa-sort-up {
  cursor: pointer;
  vertical-align: text-bottom;
}
.fa-sort-down {
  cursor: pointer;
  vertical-align: text-top;
}

.fa-sort-up:hover,
.fa-sort-up:active,
.fa-sort-up:hover:active,
.fa-sort-down:active,
.fa-sort-down:hover:active,
.fa-sort-down:hover{
  color: #CCC;
}

.sheetbox {
  width:100%;
  display:flex;
  justify-content: center;
}
.sheetbox DIV {
  cursor: pointer;
}

@media screen and (max-width: 880px) {
  .sheetbox {
    display: table;
  }
  .sheetbox DIV{
    float: left;
  }
}

.menubox .imgon {
  display: none;
}
.menubox .imgoff {
  display: block;
}
.menubox.selected .imgon {
  display: block;
}
.menubox.selected .imgoff {
  display: none;
}

.main-page .table THEAD,
.main-page .table THEAD TD,
.main-page .table THEAD TH,
.filter-container,
.filter-container TD,
.filter-container TH,
.sheetbox
 {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #DDD;
  border-radius: 3px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 3px;
}

.modal-header {
  padding-bottom: 0px;
  border-bottom: 0px;
}
.modal-footer {
  padding-top: 0px;
  border-top: 0px;
}
.modal-content{
  background: #343434;
}
.modal-body {
  color: #f6c93c;
  font-size: 16px;
  font-weight: bolder;
}
.modal .btn {
  background: #cc8a40;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: bolder;
  border-color: #d2a267;
  color: #FFF;
}
.modal .btn-primary {
  background: #cc8a40;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: bolder;
  border-color: #d2a267;
  color: #FFF;
}
.modal .btn-check:active+.btn-primary:focus,
.modal  .btn-check:checked+.btn-primary:focus,
.modal  .btn-primary.active:focus,
.modal  .btn-primary:active:focus,
.modal .show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgb(210 162 103 / 50%);
}
.modal .close {
  display: none;
}

.main-page .table td.colorred,
.main-page .table th.colorred  {
  background: #f25038;
}
.main-page .table td.colorblack,
.main-page .table th.colorblack {
  background: purple;
}

.main-page .table td.overview1,
.main-page .table td.overview1 {
  background: #303030;
}
.main-page .table td.growth1,
.main-page .table td.growth1 {
  background: #535352;
}
.main-page .table td.execution1,
.main-page .table td.execution1 {
  background: #b6328a;
}
.main-page .table td.performance1,
.main-page .table td.performance1 {
  background: #4f75bb;
}
.main-page .table td.makeadifference1,
.main-page .table td.makeadifference1 {
  background: #385723;
}
.main-page .table td.bonus1 {
  background: #ffd825;
  color: #000;
}
.main-page .table td.bonus1 .fas{
  color: #000;
}

.main-page .table td.overview2 {
  background: #303030;
}
.main-page .table td.growth2 {
  background: #7F7F7F;
}
.main-page .table td.execution2 {
  background: #F062DF;
}
.main-page .table td.performance2 {
  background: #88ABCB;
}
.main-page .table td.makeadifference2 {
  background: #80A964;
}
.main-page .table td.bonus2 {
  background: #BDB34F;
  color: #000;
}
.main-page .table td.bonus2 .fas{
  color: #000;
}

.graph.row {
  width: 100%;
}
.filtergraph {
  mmin-width: 200px;
  display: none;
}
.c3-tooltip .name {
  text-align: left;
}

.modal-header {
  font-size: 20px;
}



.main-page .overview tbody tr.trrankempty td {
  /* background: #ededed; */
  /* color: #999999; */
  color:#999;
  font-weight:normal;
}

.main-page .overview tbody tr:not(.trrankempty) td{
    font-weight: bold;
}

.main-page .table THEAD {
  /* font-family: 'Arial Narrow'; */
  /* letter-spacing: 1px; */
}
/*
.overview_overview_1 {
  background-color: #303030 !important;
} */



.upload LABEL {
  font-size: 18px;
  margin-top: 10px;
}
.loadingbar {
  width: 100%;
  height: 30px;
  border: 1px solid #666;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666;
  border-radius: 10px;
  position: relative;
}
.loadingbar .bar{
  width: 0%;
  background: #e09696;
  height: 100%;
  border-radius: 10px;
  transition: width 2s;
}
.loadingbar .perc {
  position:absolute;
  left: 48%;
  top: 0px;
  font-size: 16px;
}
.devenv {
  background: red;
  text-align: center;
  color: #FFF;
  font-weight: bolder;
}
#right-filter-box {
  /* justify-content: center; */
}


.postit {
  position: absolute;
  top: 10%;
  left: 7px;
  background: #f4b183;
  width: 10%;
  height: 80%;
  cursor: pointer;
}
.postit SPAN {
  position: absolute;
  top: -1px;
  right: 4px;
  cursor: pointer;
}
.postit SPAN:HOVER{
  font-weight: bolder;
}
.postit .txtpostit {
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postit2 {
  border: 3px solid #887432;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 7px;
  flex: 1;
}

.main-page table {
  border-collapse: separate;
  border-spacing: 0;
}
.main-page table thead td {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 10; // any positive value, layer order is global
    background: #fff;
}

/* 17092021 */
.main-page .table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


.main-page .table THEAD TH U.abreviate {
  display: block;
  text-decoration: none;
  /* max-height: 54px; */
  /* min-height: 34px; */
  /* text-overflow:ellipsis; */
  /* overflow:hidden; */
  /* display: -webkit-box !important; */
  /* -webkit-line-clamp: 3; */
  /* -webkit-box-orient: vertical; */
  white-space: normal;
  font-size: 1em;
}

.main-page .table THEAD:hover TH U.abreviate  {
  /* display: block; */
  /* -webkit-line-clamp: 30; */
  /* -webkit-box-orient: vertical; */
  /* max-height: 500px; */
  /* font-size: 1em; */
}

.main-page .table TD {
  vertical-align: middle;
}

.col-rankgrupos-4 {
  text-align: left;
}

.img-RANK_GRUPOS {
  margin-top: -2px;
  margin-right: -3px;
}

.img-RANK_GRUPOSING {
  margin-right: -3px;
}


.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* padding: 48px 0 0; */
    box-shadow: inset -1px 0 0 rgb(0 0 0 / 10%);
    overflow-y: hidden;
}
.sidebar:hover{
    overflow-y:auto;
}