@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

.bar.bar-crop {
    position: relative !important;
    margin-top: 5vh!important;
}

:root {
    --tc-green: #BFDB38;
    --tc-blue: #055CF5;
    --tc-universe: #004259;
    --tc-orange: #FFA800;
    --tc-grey: #DCDDDE;
    --tc-pink: #CE66FF;
}

html {
    overflow-y: hidden;
}

.pointer{
    cursor: pointer;
}

.pointer:hover{
    opacity: 0.8;
}

body {
    font-family: 'Titillium Web', sans-serif;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 130% 100%;
    overflow-y: scroll;
}

main {
    width: 100%;
    height: 100%;
}

.containerSwipe {
    position: relative !important;
    height: 100vh;
    width: 100% !important;
    cursor: default;
    /*margin-top: -2vh;*/
}

::deep .select.selectpicker {
    display: block !important;
}

.click {
    cursor: pointer;
}

.bg-light {
    background-color: #EDEDED !important;
}

.bg-green {
    background-color: var(--tc-green)
}

.bg-pink {
    background-color: var(--tc-pink)
}

.form-control {
    background-color: #F6F6F6;
    border-radius: 1rem;
}

.password {
    position: absolute;
    margin-right: 1rem;
    left: auto;
    right: 0;
    font-size: 0.8rem;
    top: 1.2rem;
}

.space {
    padding-left: 3.2rem!important;
    text-indent: 0.5rem!important;
}

/*.form-floating > .form-control.space:focus, .form-floating > .form-control.space:not(:placeholder-shown) {
    padding: 10px !important;
}*/

.card-body .form-floating {
    text-indent: 2.5rem;
}


/* Cores TurboClick */

.tc-text-green {
    color: var(--tc-green)
}

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

.tc-text-blue {
    color: var(--tc-blue);
}

.tc-bg-blue {
    background-color: var(--tc-blue);
}

.tc-text-universe {
    color: var(--tc-universe);
}

.bg-universe {
    background-color: var(--tc-universe) !important;
}

.bg-orange {
    background-color: var(--tc-orange) !important;
}

.tc-text-orange {
    color: var(--tc-orange)
}

.tc-text-form {
    color: #9B9B9B;
}

::placeholder {
    color: #b8b8b8 !important;
}


/* Texto */

.tc-ls {
    letter-spacing: 0.1rem;
}

.tc-bold {
    font-weight: 900 !important;
}

.tc-bolder {
    font-weight: 800;
    letter-spacing: 0.05rem;
}

.tc-border {
    border-radius: 1rem;
}

.text-decoration-none {
    font-size: 0.5rem
}

.text-none {
    text-transform: unset;
}

.text-transform-initial {
    text-transform: initial;
}


/* Botões */

.tc-btn-orange {
    background-color: var(--tc-orange);
    color: white;
}

    .tc-btn-orange.disabled {
        background-color: #cfcfcf;
    }

.tc-btn-out-orange{
    border: 1px solid var(--tc-orange);
    background-color: white;
    color: var(--tc-orange);
}

.tc-btn-out-orange.disabled{
    opacity: 0.75;
}

.tc-btn-out-orange:hover {
    background-color: var(--tc-orange);
    color: white;
}

.btn-circle {
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    padding: 6px 0;
    font-size: 1rem;
    line-height: 1.428571429;
    border-radius: 2rem;
}

.ico-edit {
    height: 1.75rem;
}

.size7 {
    font-size: 0.7rem;
}

.size9 {
    font-size: 0.9rem;
}

.form-floating input {
    text-indent: 2.5rem;
}

.question .form-floating textarea,
.form-floating textarea {
    text-indent: 2rem !important;
}

.question .form-floating .form-control {
    text-indent: 0;
}

.form-floating > label {
    left: 2.5rem;
}

.form-floating .fa {
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    font-size: 1.5rem;
    height: 1.3rem;
}

    .form-floating .fa.verify {
        left: auto;
        /* margin-right: -1.5rem; */
        right: 0;
    }

    .form-floating .fa.top1 {
        top: 1.1rem;
        left: 1.2rem;
        width: 1.3rem;
        height: auto;
    }

        .form-floating .fa.top1.check {
            top: 1.3rem;
        }

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 0;
    padding-bottom: 0;
}

.facebook {
    background-color: #3b5998;
}

.google {
    background-color: #db4a39;
}


/* Perguntas */

.form-floating.quiz input {
    padding: 0 1rem 0 0.25rem;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #d3d3d3;
    border-radius: 0px;
    margin-left: 2rem;
    width: 85%;
}

    .form-floating.quiz input:hover {
        background-color: transparent;
    }

    .form-floating.quiz input:focus {
        background-color: transparent;
        box-shadow: 0 0 0 0 !important;
    }

.question .fa {
    position: absolute;
    left: 0rem;
    top: 1.2rem;
    font-size: 1.5rem;
}

.validation {
    margin-right: 1rem !important;
    left: auto !important;
    right: 0 !important;
    top: 1rem !important;
}


/* Fim das perguntas */


/* Formulário com check (radio) */

.form-check-input:checked {
    background-color: var(--tc-green);
    border-color: var(--tc-green);
}

.form-check-input {
    width: 1.5em;
    height: 1.5em;
    margin-top: 0;
}


/* Fim do formulário com check*/


/* Formulário com select */

.form-floating.quiz > .form-select {
    padding: 0 !important;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #d3d3d3;
    border-radius: 0px;
    margin-left: 2rem;
}

.form-floating.quiz > .form-select {
    background-color: transparent !important;
}

    .form-floating.quiz > .form-select:focus {
        background-color: transparent !important;
        box-shadow: 0 0 0 0 !important;
    }


/* Fim do formulário com select */


/* Página com o logo - Pergunta4 */

.box {
    position: relative;
}

.logo {
    cursor: pointer;
}

    .logo .check {
        position: absolute;
        top: 5rem;
        left: 7.5rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: var(--tc-green);
        color: #fff;
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
    }

        .logo .check.error {
            background: red;
        }

.imglogo {
    border-radius: 15%!important;
    object-fit: cover;
    width: 7.5rem !important;
    height: 7.5rem !important;
}


/* Fim da página com logo*/


/* Página de revisão dos dados */

.logo.list .check {
    position: absolute;
    top: 0.5rem;
    left: 4rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--tc-green);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.5rem;
    text-align: center;
}

.imglist {
    border-radius: 15% !important;
    object-fit: cover;
    width: 5rem !important;
    height: 5rem !important;
}

.cardy {
    background-color: #F6F6F6;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.icon {
    position: absolute;
    left: 0.5rem;
    width: 1rem;
    top: 0.5rem;
}

.edit {
    position: absolute;
    right: 0.5rem;
    width: 1rem;
    top: 0.5rem;
}

.card.cardy a {
    text-decoration: none;
}

.info {
    font-size: 0.9rem;
    min-height: 0.9rem;
    text-align: left; /*justify*/
    padding-right: 0.5rem; /*3rem*/
    padding-left: 2.5rem;
}


/* Fim da página de revisão*/


/* Usado para o botão e a barra de progresso nas perguntas */

@media (min-height: 767.98px) {
    body {
        /*height: 85vh !important;*/
        overflow-y: auto;
    }

    .bar {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 2rem !important;
    }
}

.bar {
    margin-top: 25vh;
    position: relative;
    bottom: 5vh;
}

    .bar.bar2 {
        bottom: 0.1vh;
    }

    .bar.bar4 {
        bottom: 18vh;
    }

    .bar.bar8,
    .bar.bar-segundo2 {
        bottom: 15vh;
    }

    .bar.bar5,
    .bar.bar6 {
        bottom: 13vh;
    }

    .bar.bar9 {
        margin-top: 0vh;
        bottom: 3vh;
    }

    .bar.bar-destino {
        margin-top: 5vh;
        bottom: 2vh;
    }

    .bar.bar-segundo {
        bottom: 7vh;
    }

    .bar.bar-segundo3,
    .bar.bar-segundo4,
    .bar.bar-segundo5,
    .bar.bar-segundo6 {
        margin-top: 10vh;
    }

    .bar.bar-segundo7 {
        margin-top: 5vh;
    }

    .bar.bar-pix {
        position: relative !important;
        margin-top: 3rem;
        width: 100%;
    }

.progress {
    height: 0.4rem;
}


/* Fim da barra de progresso */


/* Página destino */

.logo-dst {
    border-radius: 100% !important;
    object-fit: cover;
    width: 3.5rem !important;
    height: 3.5rem !important;
}

.page {
    height: 5rem;
    position: relative;
    top: -360px;
    left: 0;
    bottom: 0;
}


/* Fim da página destino*/


/* Segunda sessão de perguntas */

.form-floating textarea {
    padding: 0 !important;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #d3d3d3;
    border-radius: 0px;
    text-indent: 2rem;
    /*margin-left: 2rem;*/
}

    .form-floating textarea:hover {
        background-color: transparent;
    }

    .form-floating textarea:focus {
        background-color: transparent;
        box-shadow: 0 0 0 0 !important;
    }

.question.two .fa {
    top: 0.2rem;
    font-size: 1.2rem;
}

.card.questions {
    background-color: #F6F6F6;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.edit.area {
    right: 0.75rem;
    color: var(--tc-orange)
}

.card-sub {
    border-radius: 0.75rem !important;
}

.card-block {
    word-wrap: break-word;
}

.tc-gradient {
    background: #0a00c9;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(145deg, #0a00c9, #553CCA, #ff00ee);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(145deg, #0a00c9, #553CCA, #ff00ee);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #fff !important;
}


/* Fim da segunda sessão de perguntas */


/* Backgrounds */

.bg {
    background-image: url(../images/background.png) !important;
}

.bg-1 {
    background-image: url('../images/background1.png') !important;
    background-size: 100% 80%;
}

.bg-2 {
    background-image: url('../images/background2.png') !important;
}

.bg-3 {
    background-image: url('../images/background3.png') !important;
}

.bg-4 {
    background-image: url('../images/background4.png') !important;
    background-size: 150%;
}

.bg-dash {
    background-image: url(../images/bg-dash.png) !important;
}

.bg-sucesso {
    background-image: url('../images/background-sucesso.png') !important;
}

.bg-green {
    background-color: #BEDA38;
}


/* Fim dos backgrounds */

.smartphone {
    background-image: url('../images/celular.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.dev-highlight {
    color: red !important;
    /*display: block !important;*/
    border: dashed 1px red !important;
    font-size: 10pt;
}

.pageinfo {
    text-align: center;
    padding: 2px;
    background-color: lightgrey;
    position: absolute;
    border-radius: 4px;
    margin: 4px;
    font-size: 9pt;
    z-index: 99;
}

.indicator {
    margin: 0 0.15rem;
    font-size: 0.5rem;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span {
    text-transform: lowercase;
}

.fs-05 {
    font-size: 0.5rem;
}

.fs-06 {
    font-size: 0.6rem;
}

.fs-07 {
    font-size: 0.7rem;
}

.fs-08 {
    font-size: 0.8rem;
}

.fs-09 {
    font-size: 0.9rem;
}

.mt-n0 {
    margin-top: -0.5rem;
}

.mb-n0 {
    margin-bottom: -0.3rem;
}

.radius-05 {
    border-radius: 0.5rem !important;
}

.w-40 {
    width: 40%;
}

.sizeLogo {
    width: 150px;
}

/* Dashboard */
.dashboard-grid {
    width: 100% !important;
}

.dashboard-active {
    background-color: var(--tc-grey);
    padding: 0.5rem 0;
    border-radius: 1rem;
}

.dashboard-logo {
    border-radius: 15% !important;
    object-fit: cover;
    width: 4rem !important;
    height: 4rem !important;
}

.dashboard-grid img {
    width: 25px;
}

.dashboard-grid:hover,
.dashboard-link:hover {
    opacity: 0.5;
    cursor: pointer
}

.dashboard input[type=radio] {
    width: 1.2rem;
    height: 1.2rem;
}

    .dashboard input[type=radio]:checked {
        accent-color: forestgreen;
    }


/* Credit Card */

.opacity {
    opacity: 1;
}

label.radio {
    cursor: pointer;
}

    label.radio input {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        pointer-events: none;
    }

    label.radio span {
        padding: 1px 12px;
        filter: grayscale(100%);
        opacity: 0.50;
    }

    label.radio input:checked + span {
        filter: grayscale(0%);
        opacity: 1;
    }


/* Notificação */

.notificacaoData {
    border-top: 1px solid rgba(0, 0, 0, 0.30);
    padding-top: 0.5rem;
    padding-bottom: 0.2rem;
    text-transform: unset;
}

.suporte {
    text-align: center;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    padding: 0.2rem;
    /*margin: 0 0.1rem;*/
}

    .suporte a {
        text-decoration: auto !important;
    }

    .suporte p {
        text-transform: uppercase !important;
        color: grey;
    }

    .suporte.suporteAtivo {
        background-color: #BEDA38;
        font-weight: bold;
    }

.suporteAtivo p {
    color: var(--tc-universe);
}

.suporteClick {
    font-size: 0.7rem;
    top: 0.55rem;
    right: 1rem;
    cursor: pointer;
    background-color: var(--tc-orange);
    min-width: 17px;
    min-height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.questionActive {
    background-color: var(--tc-universe) !important;
    color: white;
}

::-webkit-scrollbar {
    width: 0 !important;
}

.separator {
    border-bottom: 1px solid var(--tc-universe);
    margin-bottom: 0.5rem;
}

.separator-white {
    border-bottom: 1px solid white;
    margin-bottom: 0.5rem;
}

.glideBack {
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
}

/*.loadingpaneloverlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9999;
}

.loadingpanelinner {
    position: relative;
}

.loadingpanel {
    position: fixed;
    width: calc(100% - 60px);
    min-height: 40px;
    left: 0px;
    z-index: 99999;
    margin-left: 20px;
    overflow: hidden;
    text-align: center;
    border: dashed 5px blue;
    background-color: #ffc107;
    padding: 5px;
    top: 300px;
}

    .loadingpanel img {
        position: relative;
        top: -10px;
        left: 0px;
        height: 20px;
        width: 50%;
        max-width: 100px;
        display: inline-block;
        margin-top: 20px;
    }

    .loadingpanel .msg {
        margin-bottom: 2px;
    }*/

/*inicio sLoadingTurbo*/
.containerLoading {
    position: absolute;
    width: 100vw;
    min-height: 100vh;
    z-index: 1111;
    background-color: #ffffff90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loadingTurbo {
    display: grid;
}

.msgLoading {
    font-weight: bold;
    width: 80%;
    text-align: center;
    margin: auto;
    padding-top: 2rem;
}

.item {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #065DF4;
    margin: auto;
    position: relative;
    box-sizing: border-box;
}

    .item.item4 {
        background-color: transparent;
        //border: 5px solid #ccc;
        animation: circle2 1s linear infinite;
    }

.item4 .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    border-radius: 50%;
}

    .item4 .circle:before {
        content: '';
        width: 30%;
        height: 30%;
        border-radius: 50%;
        background-color: #065DF4;
        position: absolute;
        top: -15%;
        left: 35%;
    }

    .item4 .circle.circle1 {
        transform: rotate(0);
        opacity: 0.2;
    }

    .item4 .circle.circle2 {
        transform: rotate(40deg);
        opacity: 0.4;
    }

    .item4 .circle.circle3 {
        transform: rotate(80deg);
        opacity: 0.6;
    }

    .item4 .circle.circle4 {
        transform: rotate(120deg);
        opacity: 0.8;
    }

    .item4 .circle.circle5 {
        transform: rotate(160deg);
        opacity: 1;
    }

@keyframes circle1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes circle2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*fim LoadingTurbo*/

.initial,
.initial p,
.initial h5,
.initial h6 {
    text-transform: initial !important;
}


.error-msg {
    color: red;
}

#arrowAnim {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2rem;
}

.arrow {
    width: 5rem;
    height: 5rem;
    border: 0.5rem solid;
    border-color: #9e9e9e transparent transparent #9e9e9e;
    transform: rotate(-45deg);
}


.arrowSliding {
    position: absolute;
    -webkit-animation: slide 4s linear infinite;
    animation: slide 4s linear infinite;
}

.delay1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.delay2 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.delay3 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes slide {
    0% {
        opacity: 0;
        transform: translateX(15vw);
    }

    20% {
        opacity: 1;
        transform: translateX(9vw);
    }

    80% {
        opacity: 1;
        transform: translateX(-9vw);
    }

    100% {
        opacity: 0;
        transform: translateX(-15vw);
    }
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateX(15vw);
    }

    20% {
        opacity: 1;
        transform: translateX(9vw);
    }

    80% {
        opacity: 1;
        transform: translateX(-9vw);
    }

    100% {
        opacity: 0;
        transform: translateX(-15vw);
    }
}

.fadeSwipe {
    opacity: 0;
    -webkit-animation: fading ease-in 1s;
    animation: fading ease-in 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}


    .fadeSwipe.arrowSwipe {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }


@-webkit-keyframes fading {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fading {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fading {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}