@font-face {
  font-family: "MontserratBold";
  src: url("../../scripts/fonts/MontserratBold.ttf");
}
@font-face {
  font-family: "MontserratLight";
  src: url("../../scripts/fonts/MontserratLight.ttf");
}
@font-face {
  font-family: "MontserratMedium";
  src: url("../../scripts/fonts/MontserratMedium.ttf");
}
@font-face {
  font-family: "MontserratRegular";
  src: url("../../scripts/fonts/MontserratRegular.ttf");
}
@font-face {
  font-family: "MontserratSemiBold";
  src: url("../../scripts/fonts/MontserratSemiBold.ttf");
}
@font-face {
  font-family: "Humanst521BT";
  src: url("../../scripts/fonts/tt0290.ttf");
}
@font-face {
  font-family: "Humanst777BLKBT";
  src: url("../../scripts/fonts/tt0861.ttf");
}
body {
    font-family: MontserratLight;
    background-color: #ececec;
	margin: 0;
}
#main{
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background-color: #FFF;
	   padding-top: 20px;
      padding-bottom: 50px;
}
#line1 #title{
    font-size: 30px;
    color: #94A5A5;
}
#logo{
    float: right;
}
#logo img{
    height: 50px;
    max-width: 200px;
}
#inf{
    font-family: MontserratRegular;
    font-size: 16px;
    margin-top: 10px;
    line-height: 25px;
}
#itens{
    width: 90%;
    margin: auto;
    margin-top: 20px;

}
.item{
    padding: 10px 3px 10px 3px;
    font-size: 18px;
}
.itemsemjuros{
    color: #c0c0c0
}
.itemValor{
    float: right;
    font-family: MontserratMedium;
}

.last{
    font-family: MontserratRegular;
    font-weight: bold;
    color: #458A56;
    border-top: 1px solid #94A5A5;
}
#pagarComo{
    font-size: 30px;
    color: #94A5A5;
    margin: auto;
    margin-top: 40px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    width: 90%;
}
#meiosPagto{
    display: flex;
    width: 90%;
    margin: auto;
    height: auto;
}
#boleto, #deposito, #pix{
    width: 120px;
    color: #94A5A5;
    text-align: center;
	padding-bottom: 20px;
}
.titleMeioPagto {
    font-size: 18px;
    padding-bottom: 8px;
    margin-top: 7px;
}
.labelMeioPagto{
    margin-top: 5px;
    display: block;
}
#cartao{
    width: 170px;
    color: #94A5A5;
    text-align: center;
}
#cartoes{
    display: flex;
    margin: auto;
}
.cartaoOp{
    width: 120px;
    margin: auto;
}
.meioSelecionado{
    background-color: #F2F2F2;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.meioSelecionadoDetalhe{
    background-color: #F2F2F2;
    border-radius: 0px 5px 5px 5px;
    margin-top: -10px;
}
.labelMeioPagto img{
    width: 65px;
}

#pixDetalhe{
  display: none;
  padding-top: 10px;
  padding-bottom: 40px;
  height: auto;
  position: relative;
  width: 90%;
  margin: auto;
}
#pixDetalheIn{
  width: 90%;
  margin: auto;
}
#pixDetalheTitle{
    font-family: MontserratBold;
    font-size: 36px;
    display: block;
    color: #8d8d8d;
    width: 100%;
    text-align: center;
}
#logoPix{
    margin: auto;
    display: block;
    width: 180px;
}
#boxQRCODE{
    border: 1px dashed #000;
    width: 120px;
    height: 120px;
    margin: auto;
    font-size: 12px;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#btVisualizarQRCode{
    border: none;
    width: 100%;
    white-space: pre-wrap;
}

#pixDetalheIn a:visited{
    color: #000;
}

#lblMsgPix{
    font-size: 13px;
    color: #f97a1f;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 10px;
}

#pixDetalheTxts {
    margin-top: 20px;
    display: block;
    width: 100%;
    text-align: center;
}

#boletoDetalhe{
  padding-top: 40px;
  height: auto;
  padding-bottom: 150px;
  position: relative;
  width: 90%;
  margin: auto;
}
#boletoDetalheTitle{
    font-family: MontserratSemiBold;
    padding-bottom: 30px;
    display: flex;
}
#boletoDetalheLink{
    padding-bottom: 10px;
    display: flex;
	flex-wrap: wrap;
}
#lblLnkBoleto{
       color: #000;
    /* margin-left: 5px; */
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lblCodBarras{
    font-size: 14px;
}
.button{
  background-color: #FF0000;
  font-family: MontserratRegular;
  font-size: 16px;
  color: #FFF;
  padding: 20px 0px 20px 0px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  border: none;
  text-align: center;
  width: 95%;
  display: block;
  margin: auto;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
}
#lnkBoletoF{
    background-color: #21bd2d;
}
#btTrocarBanco{
  display: block;
  background-color: #FF0000;
  font-family: MontserratRegular;
  font-size: 16px;
  color: #FFF;
  margin-top: 10px;
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 180px;
  text-align: center;
}
.button:visited{
    color: #FFF;
}
.button:hover{
    text-decoration: none;
}
#depositoDetalhe{
    display: none;
    padding-top: 40px;
    height: auto;
    width: 90%;
    margin: auto;
    position: relative;
    padding-bottom: 150px;
}
#depositoDetalheTitle{
    margin-left: 10px;
    font-size: 14px;
    display: flex;
}
#lstBancosDepositos{
    font-family: MontserratSemiBold;
    padding: 9px 12px;
    width: 96%;
    background-color: transparent;
    margin-bottom: 15px;
}

#depositoDadosTxt{
    line-height: 25px;
    margin-left: 20px;
}
#depositoDados{
    margin-top: 10px;
    font-size: 18px;
}
#cartaoDetalhe{
    width: 90%;
    margin: auto;
    padding-top: 40px;
    height: auto;
    padding-bottom: 100px;
    position: relative;
}
.labelDetalheCartao{
    font-size: 14px;
    margin-left: 5px;
    display: block;
}
#txtNomeCartao{
    width: 95%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    margin-top: 5px;
    text-transform: uppercase;
}
#txtNumCartao{
    margin-top: 5px;
    width: 250px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
}
#txtCPFCartao{
    padding: 10px;
    border: none;
    margin-top: auto
}
.lblTxtDireira{

}
#lstMesCartao, #lstAnoCartao{
    padding: 10px 30px 10px 10px;
    margin-top: 5px;
    border: none;
}
#txtCodigoSegCartao{
    margin-top: 5px;
    width: 100px;
    padding: 10px;
    border: none;
}
#btaPagarCartao{
    display: none;
}
#lblMsgCartao{
    font-size: 13px;
    color: #f97a1f;
    font-weight: bold;
    display: block;
    margin-top: 6px;
}
.meioSelecionadoDetalheShow{
    background-color: #F2F2F2;
    border-radius: 5px 0px 5px 5px;
    margin-top: -10px;
    display: block !important;
}
.linkMeioPagamentoHide{
    display: none !important;
}
.linkMeioPagamentoShow{
    display: block !important;
}
.loading{
    background-image: url(../../images/loader_16x16.gif);
    background-repeat: no-repeat;
    background-position-x: 155px;
    background-position-y: 12px;
}
.loading2{
    background-image: url(../../images/loader_16x16.gif);
    background-repeat: no-repeat;
    background-position-x: 535px;
    background-position-y: 12px;
}
.loadingPix{
    background-image: url(../../images/loader_16x16.gif);
    background-repeat: no-repeat;
    background-position-x: 88px;
}
#line1{
	width: 90%;
    margin: auto;
}

.line1CartaoDetalhe{
  width: 95%;
  margin: auto;
  position: relative;
}
.row1CartaoDetalhe{
  width: 100%;
}

.line2CartaoDetalhe{
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
}
.row2CartaoDetalhe{
  max-width: 270px;
}
.row2CartaoDetalheCPF{
  max-width: 200px;
}
.line3CartaoDetalhe{
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
}
.row3CartaoDetalheValidade{
  max-width: 200px;
  margin-top: 10px;
}
.row3CartaoDetalheCod{
  margin-top: 10px;
}
.line4CartaoDetalhe{
  width: 95%;
  margin: auto;
  position: relative;
  margin-top: 20px;
}
.textBoletoDetalhe{
  width: 90%;
  margin: auto;
}
#panelParcelasIguais{
    margin: 10px auto;
    width: 96%;
}
#panelParcelasIguais label{
    font-size: 13px;
}

#divCAP {
    display: flex;
}
#txtCAP {
    margin: 5px 0px;
    background-color: transparent;
    border: 1px solid #555;
    color: #555;
    width: 180px;
    padding: 2px 5px;
    margin-left: auto;
}
#btnCopiarCAP {
    padding: 9px 5px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    margin-right: auto;
    width: 100px;
}

@media screen and (max-width: 768px) {
    .titleMeioPagto {
        font-size: 10px;
    }

    .item {
        font-size: 14px;
    }

    #boletoDetalhe, #pixDetalhe, #cartaoDetalhe {
        padding-top: 15px;
    }

    #pixDetalheTitle {
        font-size: 28px;
    }

    #logoPix {
        width: 160px;
    }

    #pixDetalheTxts {
        font-size: 13px;
        margin-top: 10px;
    }

    #boleto, #deposito, #pix {
        padding-bottom: 10px;
        width: 70px;
    }

    #cartao {
        width: 95px;
    }

    #cartoes {
        width: 70px;
    }

    .labelMeioPagto img {
        width: 45px;
    }
}

@media screen and (min-width: 374px) {
    .row3CartaoDetalheCod, #txtCodigoSegCartao {
        text-align: right !important;
    }
}

@media screen and (min-width:537px) {
    .row2CartaoDetalheCPF, #txtCPFCartao {
        text-align: right !important;
    }
}