/* VARIAVEIS */
:root {
  --corAzulPadraoSite: #2687E4;
  --corAzul: #3583B4;
  --corLaranja: #EA943C;
}

/* CESTA DE CURSOS */
#cesta-cursos {
  margin-top: 30px;
}

@media (min-width: 768px) {
  #cesta-cursos {
    border-right: 5px solid var(--corLaranja);
  }
}

#cesta-cursos #cesta-cursos-head {
  background-color: var(--corAzul);
  color: #fff;
  border-radius: 10px;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

#cesta-cursos #cesta-cursos-titulo {
  font-weight: bold;
}

#cesta-cursos #cesta-cursos-head i {
  background-color: var(--corLaranja);
  padding: 15px;
  border-radius: 50%;
  border: 5px solid #fff;
  position: relative;
  right: 35px;
  height: 100%;
}

#cesta-cursos .badge {
  background-color: #fff;
  color: var(--corLaranja);
  margin-right: 5px;
}

#cesta-cursos .list-group li {
  border: 0px;
}

#cesta-cursos .list-group .list-group-cursos {
  border-bottom: 1px solid #000;  
}

#cesta-cursos .list-group li img {
  max-width: 150px;
  width: 100%;
  height: auto;
}

h1 {
  text-align: center
}

#dadosPessoaisTab input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
  border-radius: 10px;
  -webkit-appearance: none;
}



.tab input:focus {

  border: 1px solid var(--corLaranja) !important;
  outline: none;
}

input.invalid {

  border: 1px solid #e03a0666;
}

.tab {
  display: none
}

button {
  background-color: var(--corLaranja);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer
}

button:hover {
  opacity: 0.8
}

button:focus {

  outline: none !important;
}

#prevBtn {
  background-color: #bbbbbb
}


.all-steps {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.step {
  margin: 0 2px;
  padding: 5px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #000;
  opacity: 0.5;
}

.step.active {
  opacity: 1
}


.step.finish {
  color: #fff;
  background: var(--corLaranja);
  opacity: 1;

}

.all-steps {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px
}

/* Forma de pagamento - CARTAO DE CREDITO */
.form-container .field-container:first-of-type {
    grid-area: name;
  }

  .form-container .field-container:nth-of-type(2) {
    grid-area: number;
  }

  .form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
  }

  .form-container .field-container:nth-of-type(4) {
    grid-area: security;
  }

  .field-container input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .field-container {
    position: relative;
  }

  .form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 90px;
    grid-template-areas: "name name" "number number" "expiration security";
    max-width: 400px;
    padding: 20px;
    color: #707070;
  }

  .preload label {
    padding-bottom: 5px;
    font-size: 13px;
  }

  .preload input {
    margin-top: 3px;
    padding: 15px;
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
  }

  .ccicon {
    height: 38px;
    position: absolute;
    right: 6px;
    top: calc(50% - 17px);
    width: 60px;
  }

  /* CREDIT CARD IMAGE STYLING */
  .preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
  }

  .preload .container {
    width: 100%;
    max-width: 400px;
    max-height: 251px;
    height: 54vw;
    padding: 20px;
  }

  #ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
  }

  #ccsingle svg {
    width: 100px;
    max-height: 60px;
  }

  .creditcard svg#cardfront,
  .creditcard svg#cardback {
    width: 100%;
    -webkit-box-shadow: 1px 5px 6px 0px black;
    box-shadow: 1px 5px 6px 0px black;
    border-radius: 22px;
  }

  #generatecard {
    cursor: pointer;
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }

  /* CHANGEABLE CARD ELEMENTS */
  .creditcard .lightcolor,
  .creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
  }

  .creditcard .lightblue {
    fill: #03A9F4;
  }

  .creditcard .lightbluedark {
    fill: #0288D1;
  }

  .creditcard .red {
    fill: #ef5350;
  }

  .creditcard .reddark {
    fill: #d32f2f;
  }

  .creditcard .purple {
    fill: #ab47bc;
  }

  .creditcard .purpledark {
    fill: #7b1fa2;
  }

  .creditcard .cyan {
    fill: #26c6da;
  }

  .creditcard .cyandark {
    fill: #0097a7;
  }

  .creditcard .green {
    fill: #66bb6a;
  }

  .creditcard .greendark {
    fill: #388e3c;
  }

  .creditcard .lime {
    fill: #d4e157;
  }

  .creditcard .limedark {
    fill: #afb42b;
  }

  .creditcard .yellow {
    fill: #ffeb3b;
  }

  .creditcard .yellowdark {
    fill: #f9a825;
  }

  .creditcard .orange {
    fill: #ff9800;
  }

  .creditcard .orangedark {
    fill: #ef6c00;
  }

  .creditcard .grey {
    fill: #bdbdbd;
  }

  .creditcard .greydark {
    fill: #616161;
  }

  /* FRONT OF CARD */
  #svgname {
    text-transform: uppercase;
  }

  #cardfront .st2 {
    fill: #FFFFFF;
  }

  #cardfront .st3 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
  }

  #cardfront .st4 {
    font-size: 54.7817px;
  }

  #cardfront .st5 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
  }

  #cardfront .st6 {
    font-size: 33.1112px;
  }

  #cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
  }

  #cardfront .st8 {
    font-size: 24px;
  }

  #cardfront .st9 {
    font-size: 36.5498px;
  }

  #cardfront .st10 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
  }

  #cardfront .st11 {
    font-size: 16.1716px;
  }

  #cardfront .st12 {
    fill: #4C4C4C;
  }

  /* BACK OF CARD */
  #cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
  }

  #cardback .st2 {
    fill: #111111;
  }

  #cardback .st3 {
    fill: #F2F2F2;
  }

  #cardback .st4 {
    fill: #D8D2DB;
  }

  #cardback .st5 {
    fill: #C4C4C4;
  }

  #cardback .st6 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
  }

  #cardback .st7 {
    font-size: 27px;
  }

  #cardback .st8 {
    opacity: 0.6;
  }

  #cardback .st9 {
    fill: #FFFFFF;
  }

  #cardback .st10 {
    font-size: 24px;
  }

  #cardback .st11 {
    fill: #EAEAEA;
  }

  #cardback .st12 {
    font-family: 'Rock Salt', cursive;
  }

  #cardback .st13 {
    font-size: 37.769px;
  }

  /* FLIP ANIMATION */
  .container {
    perspective: 1000px;
  }

  .creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
  }

  .creditcard .front,
  .creditcard .back {
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
  }

  #cartao_credito_nome {
    text-transform: uppercase;
  }

/* Feedback - PIX */
#informacoes-pagamento-pix {
  width: 100%;
}

#informacoes-pagamento-pix #pix-qrcode {
  max-width: 150px;
}

#informacoes-pagamento-pix .copy-input {
  width: 90%;
  cursor: pointer;
  background-color: #cfe2ff;
  border: none;
  font-size: 14px;
  border-radius: 5px;
  padding: 15px 45px 15px 15px;
}