/**
 * Fonts
 */
 @font-face {
    font-family: "tim";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/tim-sans/TIMSansWeb-Regular.eot");
    src: url("../fonts/tim-sans/TIMSansWeb-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/tim-sans/TIMSansWeb-Regular.woff2") format("woff2"),
        url("../fonts/tim-sans/TIMSansWeb-Regular.woff") format("woff"),
        url("../fonts/tim-sans/TIMSansWeb-Regular.ttf") format("truetype"),
        url("../fonts/tim-sans/TIMSansWeb-Regular.svg#Tim Sans") format("svg");
}

@font-face {
    font-family: "tim";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/tim-sans/TIMSansWeb-Medium.eot");
    src: url("../fonts/tim-sans/TIMSansWeb-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/tim-sans/TIMSansWeb-Medium.woff2") format("woff2"),
        url("../fonts/tim-sans/TIMSansWeb-Medium.woff") format("woff"),
        url("../fonts/tim-sans/TIMSansWeb-Medium.ttf") format("truetype"),
        url("../fonts/tim-sans/TIMSansWeb-Medium.svg#Tim Sans") format("svg");
}

@font-face {
    font-family: "tim";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/tim-sans/TIMSansWeb-Bold.eot");
    src: url("../fonts/tim-sans/TIMSansWeb-Bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/tim-sans/TIMSansWeb-Bold.woff2") format("woff2"),
        url("../fonts/tim-sans/TIMSansWeb-Bold.woff") format("woff"),
        url("../fonts/tim-sans/TIMSansWeb-Bold.ttf") format("truetype"),
        url("../fonts/tim-sans/TIMSansWeb-Bold.svg#Tim Sans") format("svg");
}

@font-face {
    font-family: "opensans";
    font-weight: 400;
    src: url("../fonts/open-sans/opensans-regular-webfont.eot");
    src: url("../fonts/open-sans/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"),
        url("../fonts/open-sans/opensans-regular-webfont.woff") format("woff"),
        url("../fonts/open-sans/opensans-regular-webfont.ttf") format("truetype"),
        url("../fonts/open-sans/opensans-regular-webfont.svg#Open sans") format("svg");
}

@font-face {
    font-family: "opensans";
    font-weight: 400;
    font-style: italic;
    src: url("../fonts/open-sans/opensans-light-italic-webfont.ttf");
}

@font-face {
    font-family: "opensans";
    font-weight: 600;
    src: url("../fonts/open-sans/opensans-semibold-webfont.eot");
    src: url("../fonts/open-sans/opensans-semibold-webfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/open-sans/opensans-semibold-webfont.woff2") format("woff2"),
        url("../fonts/open-sans/opensans-semibold-webfont.woff") format("woff"),
        url("../fonts/open-sans/opensans-semibold-webfont.ttf") format("truetype"),
        url("../fonts/open-sans/opensans-semibold-webfont.svg#Open sans") format("svg");
}

@font-face {
    font-family: "opensans";
    font-weight: 700;
    src: url("../fonts/open-sans/opensans-bold-webfont.eot");
    src: url("../fonts/open-sans/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"),
        url("../fonts/open-sans/opensans-bold-webfont.woff") format("woff"),
        url("../fonts/open-sans/opensans-bold-webfont.ttf") format("truetype"),
        url("../fonts/open-sans/opensans-bold-webfont.svg#Open sans") format("svg");
}

/**
 * Reset
 */
* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    width: 320px;
    margin: 50px auto 0;
    font-family: "opensans";
    border: 1px solid #666;
    /* position: relative; */
    /* overflow: auto; */
    height: initial !important;
    width: 100% !important;
    border: 0 !important;
    margin: 0 auto !important;
}

body.noScroll {
    overflow: hidden !important;
}

h1,
h2 {
    font-family: "tim";
    font-weight: 700;
    letter-spacing: -0.02em;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

h3,
h4,
h5,
h6 {
    font-family: "opensans";
    letter-spacing: 0;
    font-weight: 600;
}

p {
    font-family: "opensans";
    letter-spacing: 0.01em;
    font-weight: 400;
}

strong {
    font-family: "opensans";
    font-weight: 700;
}

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

@media (max-width: 767px) {
    body {
        width: 100%;
        border: none;
        margin: 0 auto;
    }
}

a {
    cursor: pointer;
}


/** Text */
.text {
    font-size: 0.8rem;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 135%;
    letter-spacing: -0.1px;
    color: #666666;
}

.acessibilidade .text {
    color: #fff;
}

.text.\+white {
    color: #fff;
}

.text.\+blue {
    color:#136fe0;
}

.acessibilidade .text.\+blue {
    color:#FFF000;
}

.text-modal {
    font-style: italic;
    font-size: 0.8571rem;
    line-height: 1.7;
    color: #666666;
}
.acessibilidade .text-modal {
    color: #fff;
}

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.text-tiny { font-size: 0.7143rem !important; }
.text-small { font-size: 0.8571rem !important; }
.text-regular { font-size: 1rem !important; }
.text-big { font-size: 1.143rem !important; }
.text-huge { font-size: 1.429rem !important; }
.text-giant { font-size: 1.857rem !important; }
.text-immense { font-size: 2.286rem !important; }
.text-colossal { font-size: 2.571rem !important; }

.text-muted {
    letter-spacing: 0.01em;
    line-height: 110%;
    color: #666666;
    font-style: italic;
}

.acessibilidade .text-muted {
    color: #fff;
}

.text-bold {
    font-family: "opensans";
    font-weight: 700;
}

.text-italic {
    font-style: italic;
}


/** Text List */
.textlist {
    padding-left: 1rem;
    margin-top: 0.4rem;

    font-size: 0.8rem;
    font-style: normal;
    font-stretch: normal;
    line-height: 150%;
    letter-spacing: -0.1px;
    color: #666666;
}


/** Timnumber */

.timnumber {
    position: relative;
    padding: 0.2rem 2rem;
    font-size: 25px;
    color: #666666;
    background: #eeeeee;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    display: inline-block;
}

.acessibilidade .timnumber {
    background: #000;
}

.timnumber-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/** Title */
.title {
    font-family: "tim";
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-left: auto;
    margin-right: auto;
    color: #00508c;
    line-height: 0.96;
}

.acessibilidade .title {
    color: #fff000;
}

.title.\+white {
    color: #ffffff;
}

.acessibilidade .title.\+white {
    color: #fff000; /* ¯\_(ツ)_/¯ */
}

.title.\+h1 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

.title.\+h2 {
    font-family: "opensans";
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.28;
}

.title.\+h3 {
    font-family: "opensans";
    font-size: 1.143rem;
    letter-spacing: 0;
    font-weight: 700;
}

.subtitle {
    line-height: 1.4rem;
    margin: 0 auto;
}

.subtitle.\+h1 {
    font-family: "opensans";
    color: #666666;

    font-size: 0.75rem;
    text-align: center;
    color: #666666;
    padding: 30px 40px 0 40px;
    box-sizing: border-box;
}

.acessibilidade .subtitle.\+h1 {
    color: #ffffff;
}

.subtitle.\+h2 {
    font-family: "opensans";
    font-weight: 700;
    color: #666666;
    font-size: 0.8571rem;
}

.subtitle.\+h2 a {
    font-family: "opensans";
    font-weight: 700;
    color: #666666;
    font-size: 0.8571rem;
    text-decoration: underline;
}

/** Box */
.box {
    width: 100%;
    margin: 0 auto;
    padding: 2.143rem 1rem;
    text-align: center;
}

.box.\+gray {
    background: #f4f5f3;
    padding: 2.8rem 1rem;
}

.acessibilidade .box.\+gray {
    background: #494949;
}

.box.\+blue {
    border-radius: 6px;
    background-color: #4a90e2;
}

.acessibilidade .box.\+blue {
    background-color: #333333;
}


.box.\+border-bottom {
    border-bottom: solid 1px #e5e5e5;
}

.box.\+shadow {
    box-shadow: 0 0 5px 0 rgba(6, 31, 56, 0.12), 0 1px 1px 0 rgba(6, 31, 56, 0.08);
    width: 85%;
    max-width: 360px;
    display: block;
    margin: 30px auto 0 auto;
    border-radius: 3px;
}

.acessibilidade .box.\+shadow {
    background-color: #494949;
}

/** Spacer */
.spacer {
    display: block;
    padding-top: 1rem;
    clear: both;
}

.spacer.\+tiny { padding-top: 0.25rem; }
.spacer.\+spacer { padding-top: 0.5rem; }
.spacer.\+big { padding-top: 2rem; }
.spacer.\+huge { padding-top: 4rem; }

/** Separator */
.separator {
    border-top: solid 1px #ccc;
    margin: 25px auto;
    width: 80%;
}

.separator.\+no-margin {
    margin-top: 0;
    margin-bottom: 0;
}

.separator-gradient {
    height: 1rem;
    opacity: 0.1;
    background-image: linear-gradient(to top, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
    width: 100%;
    clear: both;
}

/** Button */
.btn {
    border: none;
    /* border-radius: 3px; */
    background-color: #136fe0;
    padding: 0.7143rem 2.143rem;
    font-size: 0.8571rem;
    font-weight: 700;
    font-family: 'opensans';
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}

.acessibilidade .btn {
    background-color: #fff;
    color: #000000;
}

.btn:disabled {
	background: #ccc;
    color: #ffffff;
    pointer-events: auto;
    cursor: not-allowed;
}

.acessibilidade .btn,
.acessibilidade .btn:disabled {
    color: #000;
    background-color: #fff000;
}

.btn img {
    vertical-align: sub;
}

.btn.\+msg {
    background-color: #fff;
    color: #000000;
}

.btn.\+block {
    display: block;
    width: 100%;
}


/** Link */
.link {
    font-size: 0.75rem;
    font-family: 'opensans';
    color: #136fe0;
    text-decoration: underline;
    cursor: pointer;
}

.acessibilidade .link {
    color: #fff000;
}

.link.\+bold {
    font-weight: bold;
}

.link.\+muted {
    text-decoration: underline;
    color: #959da6;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0.8rem;
}

.link.\+small {
    font-size: 0.75rem;
}

.acessibilidade .link.\+muted {
    color: #ffffff;
    font-weight: normal;
}

.link.\+muted:hover {
    opacity: 1;
}

.link.\+muted2 {
    text-decoration: underline;
    color: #666;
    font-size: 0.7857rem;
    font-style: italic;
}

.link.\+muted2.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.acessibilidade .link.\+muted2 {
    color: #ffffff;
}

.link.\+bold {
    color: #136fe0;
    font-weight: 700;
    text-decoration: underline;
}

.link.\+text {
    color: #666666;
}


/** Media */
.media {
    clear: both;
}

.media-left {
    float: left;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
}

.media-right {
    float: right;
    margin-left: 0.4rem;
    margin-bottom: 0.4rem;
}

.media-body {
    overflow: hidden;
}


/** Form */

.vf-label {
    position: relative;
    display: block;
}

.form-label {
    font-size: 1.143rem;
    text-align: center;
    margin-bottom: 0.7143rem;
    font-family: "opensans";
    color: #666666;
    margin-bottom: 0.3571rem;
    font-weight: 600;
    display: block;
}

.form-label.\+small {
    text-align: left;
    font-size: 0.8571rem;
}

.acessibilidade .form-label {
    color: #fff;
}

.form-field {
    text-align: center;
    padding: 0.7143rem;
    border: solid 1px #a6a6a6;
    background-color: #fff;
}

.form-field::placeholder,
select.form-field[disabled] > option {
    color: #cccccc;
}

select.form-field[disabled] {
    color: #cccccc;
}

select.form-field[disabled].\+as-selected {
    color: rgb(84, 84, 84);
}

.acessibilidade .form-field {
    color: #ffffff;
    background-color: transparent;
    caret-color: #ffffff;
}

.form-field[disabled] {
    background-color: #f1f0f0;
}

.acessibilidade .form-field[disabled] {
    color: #000;
}

.form-field.has-error,
.vf-form-submitted .form-field.vf-invalid {
    border-color: #cf0a2c;
}

.form-error {
    color: #ca0404;
    margin-top: 0.2rem;
    font-size: 0.725rem;
    /* font-style: italic; */
}

.form-error.\+at-center {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    transform: translateY(-50%);
}

.acessibilidade .form-error {
    font-weight: 700;
}

.form-error a {
    text-decoration: underline;
    font-style: italic;
}

/** User Media */
.usermedia {
    margin: 2rem auto;
    text-align: center;
}

.usermedia-left {
    display: inline-block;
}

.usermedia-body {
    display: inline-block;
    text-align: left;
    font-family: "opensans";
    font-size: 0.75rem;
    color: #666666;
    padding: 0.5rem 0 0.25rem 0.5rem;
    vertical-align: bottom;
}

.usermedia-image {
    height: 70px;
}

/** Ofertas box */

.oferta-box {
    /*background-color: #ccc;*/
    width: 90%;
    margin: 30px auto 20px auto;
    text-align: center;
    font-size: 9pt;
    padding: 0;
    box-sizing: border-box;
}

.oferta-lista-recarga {
    display: block;
}

.oferta-lista-recarga li {
    display: inline-block;
    width: 75px;
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0 0 5px 0 rgba(6, 31, 56, 0.22), 0 1px 1px 0 rgba(6, 31, 56, 0.18);
    border-radius: 3px;
    margin: 0 5px 0 5px;
    color: #00508c;
    cursor: pointer;
    border: 1px solid #FFF;
}

.acessibilidade .oferta-lista-recarga li {
    background-color: transparent;
    color: #FFF000;
    border: 1px solid #FFF000;
}

.oferta-lista-recarga li.oferta-ativa {
    background-color: #00508c;
    color: #FFF;
    border: 1px solid #00508c;
}

.acessibilidade .oferta-lista-recarga li.oferta-ativa {
    background-color: #FFF000;
    color: #000;
    border: 1px solid #FFF000;
}

.oferta-lista-recarga li .oferta-lista-recarga-moeda {
    width: 100%;
    display: block;
    font-family: "opensans";
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

.oferta-lista-recarga li .oferta-lista-recarga-valor {
    width: 100%;
    display: block;
    font-family: "tim";
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center;
    box-sizing: border-box;
}





/** Helpers */
.\!width-80 { width: 80% !important; }
.\!width-90 { width: 90% !important; }
.\!width-100 { width: 100% !important; }
.\!center { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.\!relative { position: relative; }
.\!block { display: block; }
.\!inline-block { display: inline-block; }
.\!clear { clear: both; }

.\!no-margin { margin: 0 !important; }
.\!no-margin-top { margin-top: 0 !important; }
.\!no-margin-bottom { margin-bottom: 0 !important; }

.\!no-padding-top { padding-top: 0 !important; }
.\!no-padding-bottom { padding-bottom: 0 !important; }

.\!no-border { border: 0 !important; }
.\!no-wrap { white-space: nowrap !important; }
/* ----------------------------------------------------------------------- */
/* NOVIDADES NAKED PRÉ NATAL */
/* ----------------------------------------------------------------------- */

.content-ativacao .box-gray h1 {
    width: 290px !important;
}

.content-ativacao .box-gray p {
    margin-bottom: 0 !important;
}

.content-ativacao .box-gray.facilidade {
    height: auto !important;
    padding-bottom: 30px;
}

.content-ativacao .numero-protocolo {
    margin-top: 30px !important;
    padding-bottom: 35px !important;
    width: 90%;
    margin: 0 auto;
    border-bottom: solid 1px #e5e5e5;
}

.content-ativacao .content-botao {
    margin-top: 45px !important;
    text-align: center;
}

.content-ativacao .content-app {
    width: 100% !important;
    border-top: 0px !important;
    background: #f4f5f3 !important;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin: 28px auto 0;
    padding-top: 28px;
    padding-bottom: 28px;
    text-align: center;
}

.content-ativacao .content-app img {
    margin-bottom: 10px 0 10px 0;
}

.content-ativacao .content-app p {
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42;
    text-align: center;
    color: #666666;
    width: 80% !important;
    margin: 10px auto 20px !important;
}

.content-ativacao .content-app h3 {
    letter-spacing: -0.02em;
    color: #00508c;
    font-size: 16px;
    font-family: 'opensans' !important;
}

.content-seu-numero-tim {
    padding: 20px 0 20px 0;
    border-bottom: solid 1px #e5e5e5;
    width: 90%;
    margin: 0 auto 25px auto;
}

.content-ativacao .content-seu-numero-tim p {
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42;
    text-align: center;
    color: #666666;
    width: 80%;
    margin: 10px auto 0;
}

.numero-tim-texto {
    color: #999 !important;
}

.content-seu-numero-tim p.numero-tim-title {
    font-size: 14px;
}

.content-seu-numero-tim p.numero-tim {
    font-size: 25px !important;
    font-family: 'opensans' !important;
    font-weight: 700;
}

.content-ativacao .content-recarga-nova {
    width: 100%;
    border-top: 0px;
    background: #f4f5f3;
    margin: 28px auto 0;
    padding-top: 42px;
    padding-bottom: 42px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

.content-ativacao .content-recarga-nova p {
    font-size: 13px;
    font-weight: 700;
    line-height: 135%;
    letter-spacing: -0.1px;
    text-align: center;
    color: #666666;
    width: 263px;
    margin: 0 auto 20px;
}

.ativada-nova-video {
    border: 1px solid #ccc;
    width: 90%;
    display: block;
    margin: 0 auto 30px;
    text-align: center;
}

.content-ativacao .content-portabilidade {
    border-top: 0px !important;
    padding-top: 0 !important;
    margin: 35px auto 45px !important;
}

.btn-naked {
    font-family: 'opensans';
    font-weight: 700;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 3px;
    font-size: 0.8571rem;
    color: #fff;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    border: none;
    background-color: #136fe0;
    font-size: 0.75rem;
}

.btn-verde {
    background: #69c140;
    color: #ffffff;
    pointer-events: auto;
}

.ativada-nova-titulo {
    background-color: #f4f5f3;
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #00508c;
    font-family: 'opensans' !important;
    border-radius: 15px;
}

.ativada-nova-detalhe-nome {
    width: 90%;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #00508c;
    font-family: 'opensans' !important;
    display: block;
}

.ativada-nova-detalhe-periodo {
    width: 90%;
    margin: 0 auto 30px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #00508c;
    display: block;
}

.ativada-nova-feature {
    width: 90%;
    display: block;
    /*background: #ccc;*/
    box-sizing: border-box;
    margin: 0 auto 35px auto;
}

.separador-sem-recarga {
    border-top: solid 1px #e5e5e5;
    width: 90%;
    margin: 0 auto;
    height: 5px;
    /*display: none;*/
}

.ativada-nova-feature-imagem {
    font-size: 9px;
    text-align: center;
    width: 80%;
    margin: 0 auto 10px;
    display: block;
}

.ativada-nova-feature-imagem img {
    height: 40px;
    margin: 0 2px 0 2px;
}

.ativada-nova-feature-titulo {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.42;
    text-align: center;
    color: #00508c;
    width: 80%;
    margin: 0 auto 5px auto;
    display: block;
}

.ativada-nova-feature-texto {
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42;
    text-align: center;
    color: #999;
    width: 80%;
    margin: 0 auto 0;
    display: block;
}

.numero-portabilidade-cancelar {
    position: absolute;
    top: 1.6rem;
    right: 0.6rem;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
}

.numero-portabilidade-cancelar img {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 5px;
    left: 5px;
}

/* Checkbox - FirstForm */
.form-checkbox {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 26px calc(100% - 26px);
}

.form-checkbox.second-form_check {
    margin-top: 62px;
}

.form-checkbox_input {
    width: 25px;
    height: 25px;
    -webkit-appearance: none;
    border: 1px solid #959595;
    background: #ffffff;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    top: 3px;
}

.form-checkbox_input#confirm_data {
    margin-top: 3px;
}

.form-checkbox_input:focus {
    outline: none;
}

.form-checkbox_input:hover {
    outline: none;
}

.form-checkbox_input:checked {
    width: 25px;
    height: 25px;
    background-image: url("../images/checkbox-on.svg");
    -webkit-appearance: none;
    display: block;
    border: none;
}

.form-checkbox_span {
    width: 100%;
    height: auto;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 12px;
    text-align: left;
    color: #959595;
}

.form-checkbox_span.second-form_check_span {
    color: #999999;
    line-height: 18px;
    letter-spacing: -0.3px;
}

.veracity-term {
    color: #999999;
    text-decoration: underline;
}

.card-detail {
    background: #ffffff url("../images/card-detail.svg") no-repeat !important;
    background-position: calc(100% - 10px) !important;
    background-size: 30px !important;
}