.dialogdemoBasicUsage #popupContainer {
  position: relative; }

.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px; }

.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px; }

.dialogdemoBasicUsage button {
  width: 200px; }

.dialogdemoBasicUsage div#status {
  color: #c60008; }

.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
  margin-bottom: 0; }
  
.frame_container {
  background-color: #07191d;
  margin: 20px;
  padding: 15px;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.monthsList {
  margin-left: 1.5%; 
  margin-right: 1.5%; 
  padding: 3px;
  cursor: pointer;
  
}

.monthsListSelected {
  margin-left: 1.5%; 
  margin-right: 1.5%; 
  padding: 3px;
  
  border: solid 1px #7BB957;
  background-color: #7BB957;
  border-radius: 7px;
  color: white;
}

.home_card {
  background-color: #07191d;
  padding: 15px;
  height: 100%;
  border-radius: 2px;
  margin: 20px;
}

.home_card .card_title_container {
  height: 30px;
  width: 100%;
}

.home_card .card_title {
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
}

.card_consult-left {
  width: 22%;
  padding-top: 5px;
  margin-right: 10px;
  color: #fff;
}

.card_consult-right {
  width: 60%;
  border-radius: 10px;
  background-color: #fff;
  padding: 5px 10px;
  color: #222;
  font-weight: bold;
  height: 15px;
}

.card_consult-select {
  background: #6ABC46;
  border: #6ABC46;
  border-radius: 10px;
  font-weight:bold;
  color: #222;
  text-transform: uppercase;
}

.card_consult-container {
  width: 30%;
  margin-left: 25px;
}

.period_fixed-actived {
  padding: 5px 10px;
  background: #ebebeb;
  color: #0b1e22;
  font-weight: bold;
  border-radius: 10px;
}

.period_fixed-desactived {
  color: #eaeaea;
  padding: 5px 10px;
  cursor: pointer;
}

/* -- BEGIN CIRCLE PERCENT ---  */
.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  padding-bottom: 15px;
}

.single-chart {
  width: 30%;
  justify-content: space-around;
  text-align: center;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 50%;
  max-height: 150px;
}

.circle-bg {
  fill: none;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #e67e22;
}
.color-orange {
  color: #e67e22 !important;
}
.bg-orange {
  background: #e67e22;
}

.circular-chart.green .circle {
  stroke: #27ae60;
}
.color-green {
  color: #27ae60 !important;
  
}
.bg-green {
  background: #27ae60;
}

.circular-chart.red .circle {
  stroke: #c0392b;
}
.color-red {
  color: #c0392b !important;
}
.bg-red {
  background: #c0392b;
}

.percentage {
  fill: #fff;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.circular-days {
  color: #434950;
  fill: #434950;
  font-family: sans-serif;
  font-size: 0.5em;
  font-weight: bold;
  text-anchor: middle;
}

.circle-chart-title {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
}

.progress-bar-text {
  color: rgba(255, 255, 255, 0.4);
  font-weight: bold;
}

.progrss-bar-container {
  width:100%;
  background: rgba(0, 0, 0, 0.2);
  height: 10px;
}
.progrss-bar-content {
  height: 10px;
}
/* --- END CIRCLE PERCENT ---  */



@media (max-width: 768px) {
  .single-chart {
    width: 100%;
  }  

  .flex-wrapper {
    display: flex;
    flex-flow: column wrap;
  }
  
}

.frame-sub-legend {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.alert_flag {
  border-radius: 10px;
  border: 2px solid #ED1968;
  background:  #ED1968;
  padding: 1px 3px;
}

.menu-top-fixa{
  margin-top: 50px;
  margin-left: 5%;
  display: inline-flex;
  width: 90%;
}

.button-top-fixa{
  padding-bottom: 13px !important;
  padding-top: 13px !important;
  padding: 20px;
  cursor:pointer;
  border-bottom: 2px solid #ffffff;
  color: #ededed;
  background-color: #181818;
}

.button-top-fixa-clicked{
  padding-bottom: 13px !important;
  padding-top: 13px !important;
  padding: 20px;
  color: white;
  cursor:pointer;  
  background-color: #66BC46;
  border-bottom: 2px solid #66BC46;
}

.button-top-fixa-clicked span{
  white-space: nowrap;
}

.button-top-fixa span{
  white-space: nowrap;
}

.linha-bottom{
  border-bottom: 2px solid #ffffff;
  width: 100%;
  opacity: 0.5;
}

.tabela{
  margin-bottom: 1rem;
  color: #ebebeb;
}

.tab{
  width: 100%;
  background-color: transparent;
  border-radius: 5px;
} 

th{
  border-bottom: 1.5px solid #282d36;
  height: 49px;
}

.th{
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.14;
  letter-spacing: normal;
  text-align: left;
  padding: 10px;
  display: inline-flex;
}

td{
  padding: 10px;
}

.div-empresa{
  display: flex;
  align-items: center;
  margin-left: 30%;
}

.div-img{
  display: flex;
  align-items: center;
  padding: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #00841d;
  border-radius: 5px;
  margin-right: 5px;
}

.font-empresa{
  color: #989898;
}

.font-empresa-strong{
  color: #ebebeb;
}

md-switch{
  margin: 0px !important;

}
.md-checked .md-bar{
  background-color: #599841 !important;
}

.md-checked .md-ink-ripple{
  background-color: #ffffff !important;
}

.button-export-fixacao{
  height:47px;
  border: 2px solid #525252;
  background: #181818;
  color: #818181;
  min-width: 130px;
  max-width: 140px;
  padding: 9px;
  display: flex;
  align-items: center;
  justify-items: center;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 5px;
}

.button-export-market{
  height:47px;
  border: 2px solid #525252;
  background: #181818;
  color: #818181;
  margin-right: 5px;
  min-width: 130px;
  max-width: 140px;
  padding: 9px;
  display: flex;
  align-items: center;
  justify-items: center;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

.button-selected-contract-fixacao{
  border: solid 1px #282d36;
  min-width: 130px;
  max-width: 200px;
  padding: 10px;
  background-color: #00841d;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
  float: left;
}

.material-icons{
  font-size: 17px !important;
}

.click{
  cursor: pointer;
}

.CBOT{
  background-color: #DE7D40;
  border-color: #DE7D40;

}
.CBOTFULL{
  background-color: #DE7D40;
  border-color: #DE7D40;

}

.BASIS{
  border-color: #0072bc;
  background-color: #0072bc;

}
.BASISFULL{
  background-color: #0072bc;
  border-color: #0072bc;
  color: white;
}

.DOLAR{
  border-color: #7BB957;
  background-color: #7BB957;

}
.DOLARFULL{
  background-color: #7BB957;
  border-color: #7BB957;
  color: white;
}

.SPOT{
  border-color: #e1db39;
  background-color: #e1db39;
  color: black;

}
.SPOTFULL{
  background-color: #e1db39;
  border-color: #e1db39;
  color: black;
}

.USERMANAGEMENT{
  border-color: white;
}
.USERMANAGEMENTFULL{
  background-color: white;
  border-color: white;
  color:black;
}

/* CONFIRM VIEW BUTTON CSS */

.btn-circle-download {
  position: relative;
  height: 48px;
  width: 48px;
  margin: auto;
  border-radius: 100%;
  background: #E8EAED;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
}
.btn-circle-download:after {
  content: "";
  position: relative;
  display: block;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform: translateX(-100%);
}
.btn-circle-download svg {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.btn-circle-download svg#border {
  position: absolute;
  top: 0;
  left: 0;
  stroke: none;
  stroke-dasharray: 144;
  stroke-dashoffset: 144;
  transition: all 0.9s linear;
}
.btn-circle-download svg#arrow {
  position: absolute;
  top: 12.5px;
  left: 12.35px;
  stroke: #9098A9;
  transition: all 0.2s ease;
}
.btn-circle-download svg#check {
  position: absolute;
  top: 17px;
  left: 13px;
  stroke: white;
  transform: scale(0);
}
.btn-circle-download:hover {
  background: rgba(0, 119, 255, 0.2);
}
.btn-circle-download:hover #arrow path,
.btn-circle-download:hover #arrow polyline {
  stroke: #0077FF;
}
.btn-circle-download.load {
  background: rgba(0, 119, 255, 0.2);
}
.btn-circle-download.load #arrow path,
.btn-circle-download.load #arrow polyline {
  stroke: #0077FF;
}
.btn-circle-download.load #border {
  stroke: #0077FF;
  stroke-dasharray: 144;
  stroke-dashoffset: 0;
}
.btn-circle-download.done {
  background: #0077FF;
  animation: rubberBand 0.8s;
}
.btn-circle-download.done:after {
  transform: translateX(50%);
  transition: transform 0.4s ease;
  transition-delay: 0.7s;
}
.btn-circle-download.done #border,
.btn-circle-download.done #arrow {
  display: none;
}
.btn-circle-download.done #check {
  transform: scale(1);
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}

@keyframes rubberBand {
  from {
    transform: scale(1, 1, 1);
  }
  30% {
    transform: scale3d(1.15, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.15, 1);
  }
  50% {
    transform: scale3d(1.1, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}


/* CONFIRM VIEW BUTTON CSS */

/*new order*/

.div_mail{
  display: flex;
  padding: 15px;
  background-color: #07191d;
  max-width: 100%;
  /*width: 1200px;*/
  height: 620px;
  /*max-height: 650px;*/
  align-items: center;

  flex-wrap: wrap;
}

/*linha toda*/
md-slider .md-track{
  background-color:rgba(255, 255, 255, 1);
  height: 3px;
}



#cbotSlider .md-thumb:after, #cbotSlider .md-track-fill{
  background-color: rgb(234, 111, 36)!important;
  border-color: rgb(234, 111, 36) !important;
}
#dolarSlider .md-thumb:after, #dolarSlider .md-track-fill{
  background-color: rgb(102, 188, 70)!important;
  border-color: rgb(102, 188, 70) !important;
}
#basisSlider .md-thumb:after, #basisSlider .md-track-fill{
  background-color: rgb(0, 114, 188)!important;
  border-color: rgb(0, 114, 188) !important;
}


#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  min-width: 220px;
  font-size: 16px;
}

#divInner{
  left: 0;
  position: sticky;
}

#divOuter{
  width: 190px; 
  overflow: hidden;
}

/*parte preenchida*/
/*.dolar md-slider .md-track.md-track-fill{
  background-color: rgb(95, 160, 71)
}