body{
  background-color: #F5F5F5;
  padding: 0;
  margin: 0;
}

#mp-box-form{
  padding: 15px 10px;
  margin: 30px auto;
  width: 400px;
  background-color: #fff;
  overflow: auto;
  border-radius: 5px;
}

.mp-box-inputs{
  float: left;
}

.mp-col-10{
  width: 10%;
}

.mp-col-20{
  width: 20%;
}

.mp-col-25{
  width: 25%;
}

.mp-col-30{
  width: 30%;
}

.mp-col-35{
  width: 35%;
}

.mp-col-45{
  width: 45%;
}

.mp-col-50{
  width: 50%;
}

.mp-col-55{
  width: 55%;
}

.mp-col-65{
  width: 65%;
}

.mp-col-75{
  width: 75%;
}

.mp-col-100{
  width: 100%;
  margin: 5px 0;
}

.mp-line{
  width: 100%;
  margin: 5px 0;
}

.mp-box-inputs label{
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0 0 5px 0;
  display: block;
}

.mp-box-inputs label em{
  color: red;
}

.mp-box-inputs input, .mp-box-inputs select{
  width: 100%;
  background-color: #fff;
  border: 1px solid #cecece;
  padding: 5px;
  border-radius: 3px;
  color: #666;
  height: 40px;
  vertical-align: middle;
}

.mp-box-inputs input:focus, .mp-box-inputs select:focus{
  border: 1px solid #999;
  outline: 0;
}


.mp-box-inputs input.mp-error-input, .mp-box-inputs select.mp-error-input{
  border: 1px solid red;
}

#mp-box-loading{
  width: 30px;
  height: 30px;
  display: inline-block;
  margin: -10px 0px;
}

#mp-separete-date{
  vertical-align: middle;
  line-height: 65px;
  text-align: center;
  height: 48px;
  font-size: 24px;
  font-weight: 100;
}

#mercadopago-utilities{
  display: none;
}

.mp-btn, .ch-btn {
  background-color: #009ee3;
  border: 1px solid #009ee3;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-family: Arial,sans-serif;
  font-size: 18px;
  font-weight: normal;
  margin: 0;
  padding: 10px;
  text-align: center;
  width: 100%;
}

#submit{
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

#submit:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

.mp-discount{
  text-transform: uppercase;
  font-size: 12px;
  /*color: #009EE3;*/
  color: #333333;
  display: none;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  clear: both;
  float: left;
 }

#mpCouponApplyed{
  display: none;
  border-style: solid;
  border-width: thin;
  border-color: #009EE3;
  padding: 8px 8px 8px 8px;
}

#mpCouponApplyedTicket{
  display: none;
  border-style: solid;
  border-width: thin;
  border-color: #009EE3;
  padding: 8px 8px 8px 8px;
}

#mercadopago-form-coupon .mp-box-message{
  margin: -5px 0 5px;
}

[class^=form-col-]{
  position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

.form-col-1{
  width: 8.33333333%;
}
.form-col-2{
  width: 16.66666667%;
}
.form-col-3{
  width: 25%;
}
.form-col-4{
  width: 33.33333333%;
}
.form-col-5{
  width: 41.66666667%;
}
.form-col-6{
  width: 50%;
}
.form-col-7{
  width: 58.33333333%;
}
.form-col-8{
  width: 66.66666667%;
}
.form-col-9{
  width: 75%;
}
.form-col-10{
  width: 83.33333333%;
}
.form-col-11{
  width: 91.66666667%;
}
.form-col-12{
  width: 100%;
}

.form-control-mine {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 12px;
}

select#fixed {
  -webkit-appearance: none;
}

.mensagem-credit-card{
  font-size: 10px;
  margin-top: 8px;
  margin-bottom: 16px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.mensagem-febraban{
  text-transform: none;
  font-size: 12px;
  display: block;
  margin-top: 8px;
  margin-bottom: 16px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.mensagem-ticket{
  text-transform: none;
  font-size: 12px;
  display: block;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: center;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 280px;
    background-color: #333333;
    color: #fff;
    text-transform: none;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    margin-top: 4px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.twenty-seventeen-cc-header {
  width: 100%;
  height: 64px;
  margin-bottom: 2px;
  padding: 16px 32px 8px 32px;
  background: white;
}

.other-themes-cc-header {
  width: 100%;
  height: 48px;
  margin-bottom: 2px;
  padding: 16px 16px 8px 16px;
  background: white;
}

/*
 *
 *
 * Error
 *
 *
 */

.mp-error{
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 12px;
  color: red;
  font-weight: bold;
  display: none;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  clear: both;
  float: left;
}

.erro_febraban{
  text-transform: uppercase;
  font-size: 10px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 12px;
  color: red;
  font-weight: bold;
  display: none;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  clear: both;
}

#mp-box-input-tax-tea{
  font-weight: 300;
  text-align: center;
  color: #333;
  font-size: 12px;
  display: none;
}

#mp-box-input-tax-cft{
  font-weight: 300;
  text-align: center;
  color: #333;
  font-size: 20px;
  margin-top: 16px;
  display: none;
}