@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@400;500;700&family=Montserrat:wght@400;500;700&family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

body {
    background-color: #e7e8e9;
}

.central-content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.box-prod {
    width: 100%;
    /* box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.141); */
    margin-top: 20px;
    padding: 20px;
    position: relative;
    margin-bottom: 10px;
}

title .btn-back {
    width: 30px;
    position: absolute;
    left: 20px;
    top: 20px;
    cursor: pointer;
}


.box-steps {
    width: 100%;
    padding: 10px;
}

.porcent {
    font-size: 4em;
    text-align: center;
    color: rgb(122, 122, 122);
    font-family: roboto;
}

.btn-go-platform {
    width: 90%;
    margin: auto;
    padding: 10px;
    color: white;
    background-color: #66cc00;
    font-family: roboto;
    text-align: center;
}

.new-prod {
    text-align: center;
    color: #5a9ffe;
    font-size: 1em;
    font-family: roboto;
    margin-top: 10px;
    cursor: pointer;
}

.step {
    display: none;
}

.step-0 {
    display: block;
}

.alldone-title {
    font-family: Roboto;
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
}


h1 {
    font-size: 1.1em;
    color: #171717;
    text-align: center;
    font-family: roboto;
    font-weight: normal;
}

.desc-text {
    color: #828282;
    width: 90%;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    font-family: roboto;
    font-size: 0.9em;
}

.desc-text-lower {
    color: #8282829c;
    margin-top: 10px;
}

select option {
    background-color: #232734;
}

.label {
    font-family: roboto;
    font-size: 0.9em;
    color: #ddd;
    margin: 7px 0px;
}

.prod-price {
    width: 70%;
    display: flex;
}

.min-price,
.max-price {
    width: 50%;
}

.min-price {
    margin-right: 20px;
}

.default-full-btn {
    width: 100%;
    background-color: rgb(138, 180, 248);
    color: black;
    font-family: roboto;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9em;
    border-radius: 2px;
}

.indicators {
    margin-top: 30px;
    width: 100%;
    padding: 10px 0px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -20px;
}

.error-title,
.sucess-title {
    color: red;
    font-family: roboto;
    font-size: 1.2em;
    font-weight: normal;
    background-color: white;
    border-radius: 4px;
    padding: 10px;
}

.sucess-title {
    color: green;
}

.step1,
.step2,
.finalstep {
    width: 15%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step1 img,
.step2 img,
.finalstep img {
    width: 100%;
}

.close-style {
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
}

.ajax-fixed,
.view-js-error-fixed {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 97;
    position: fixed;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-js-error-fixed {
    display: none;
}

.message-ajax {
    width: 90%;
    max-width: 400px;
    background-color: white;
    padding: 20px 40px;
    font-family: roboto;
    font-size: 1em;
    color: #66cc00;
    border-radius: 2px;
    position: relative;
}

.indicator {
    width: 22.5%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.indicator img {
    width: 100%;
}


/* account */

.account-step2 {
    display: none;
}

.box-tocomplete {
    width: 100%;
    position: absolute;
    background-color: rgb(142, 142, 142);
    left: 0px;
    top: 0px;
}

.value-tocomplete {
    padding: 1px;
    background-color: #00b4fe;
    width: 0%;
}

.box-verify-code {
    width: 100%;
    height: 100vh;
    background-color: #111423;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 97;
}

.verify-image {
    width: 100%;
    text-align: center;
}

.verify-image img {
    width: 50px;
}

.content-verify-code {
    width: 90%;
    max-width: 410px;
    margin: auto;
    border-radius: 2px;
    background-color: #232733;
    position: relative;
    margin-top: 50px;
    border-radius: 2px;
    padding: 50px 40px;
}


.list-plataforms {
    width: 100%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-plataforms img {
    width: 70px;
    margin: 0px 10px;
    filter: grayscale(100%);
}

.objecoes-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-objecoes {
    width: 200px;
    height: 180px;
    border: dashed 2px #828282;
    margin: 20px 30px;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}

.item-objecoes img {
    width: 60px;
}

.item-objecoes .desc-text {
    font-size: 1em;
    color: #171717;
    margin-top: 15px;
}

footer {
    width: 100%;
    padding: 50px 100px;
    background-color: black;
}

.text-footer {
    color: white;
    font-family: Questrial;
    text-align: center;
}

.text-footer-low {
    color: rgb(205, 205, 205);
}

.user-icon {
    width: 27px;
    height: 27px;
    cursor: pointer;
}

.lateral-prods {
    width: 100%;
    max-width: 300px;
    height: 100vh;
    background-color: #2b2b2b;
    position: fixed;
    top: 50px;
    left: 0px;
    padding: 10px;
    z-index: 98;
}

.list-lateral-prods {
    width: 100%;
    height: 75vh;
    background-color: transparent;
    overflow-y: auto;
}

#myprods-btn {
    display: none;
}

.blackshaddow {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    z-index: 98;
    left: -100%;
}

.item-prod {
    width: 100%;
    padding: 10px;
    font-family: roboto;
    color: #cbcccd;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-prod:hover {
    background-color: #ff9500e1;
    color: #ffffff;
}

.item-prod:hover .item-platform {
    color: rgb(233, 233, 233);
}

.item-name {
    margin-bottom: 5px;
}

.item-platform {
    color: #9b9b9b;
    font-size: 0.9em;
}

.data-prod {
    width: calc(100% - 35px);
    padding-right: 10px;
}

.porcent-prod {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background-color: white;
    color: #2b2b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: bold;
}


/* --------------------- */
figure {
    margin: 0px;
    display: flex;
    margin-bottom: 5px;
    break-inside: avoid;
    position: relative;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.content-image-projects {
    column-count: 2;
    column-gap: 10px;
    width: 100%;
}

@media (max-width: 800px) {
    .content-image-projects {
        column-count: 1;
    }
}

/* --------------------- */

/* ====================== TOOLS ===================== */
.contentTools {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-y: auto;
    background-image: linear-gradient(to bottom, #101423 70%, #0769a21f);
}

.bottomDescVersion {
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.contentlistTools {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    column-count: 2;
    column-gap: 5px;
}

.toolItem {
    width: 100%;
    padding: 15px 20px;
    background-color: #232734;
    border-radius: 10px;
    margin-bottom: 7px;
    box-shadow: 0px 0px 5px #5a9efe00;
    font-family: 'Circular Std Medium', roboto;
    position: relative;

}

.toolItem:hover {
    box-shadow: 0px 0px 5px #5a9efe3d;
}

.toolItem .desc-text {
    margin: 0px;
    text-indent: 0px;
}

.tool-title {
    font-weight: bold;
    margin: 0px;
    font-size: 1em;
    letter-spacing: 0.3px;
}

.tool-desc {
    font-size: 0.9em;
    color: #d3d3d3;
    font-weight: 300;
    font-family: roboto;
}

.big-title {
    width: 100%;
    color: #fff;
    font-family: Roboto;
    font-size: 1.7em;
    font-weight: bold;
    text-align: center;
}

.home-title {
    font-size: 2.3em;
    margin-top: 70px;
    font-family: 'Circular Std Medium', roboto;
    font-weight: normal;
}

.subtitlehome {
    color: #eee;
    font-family: 'Circular Std Book', roboto;
    text-align: center;
    font-weight: normal;
}

.deschometools {
    color: #cccccc;
    width: 50%;
    font-family: 'Circular Std Book', roboto;
    font-weight: normal;
    margin: 20px auto;
    text-align: center;
}

.toolRotul {
    width: 70px;
    padding: 2px;
    border-radius: 2px;
    background-color: #121520;
    text-align: center;
    position: absolute;
    right: 7px;
    top: 7px;
    font-size: 0.9em;
    font-family: 'Circular Std Book', roboto;
}

.toolRotul img {
    width: 20px;
    height: 20px;
}

.betaColor {
    color: #01f47f;
}

.breveColor {
    color: #00a8ff;
}

.rcColor {

    color: #ffa600;
}

.error-message {
    width: 100%;
    padding: 10px;
    border-radius: 2px;
    background-color: #ffcbcb;
    color: red;
    box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.305);
    display: flex;
    align-items: center;
    font-family: roboto;
    font-size: 0.85em;
}

.error-message img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.error-message p {
    width: calc(100% - 35px);
}

/* ========= ACTIONS ================= */
.actionsOfBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.actionNext,
.actionBack {
    width: 100px;
    padding: 10px;
    background-color: rgb(138, 180, 248);
    color: black;
    text-align: center;
    border-radius: 2px;
    font-family: roboto;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: 0px 0px 0px #b3f604;
    transition: 0.2s;
    pointer-events: all;
}

.btn-config {
    background-color: rgb(138, 180, 248);
    font-weight: 500;
}

.actionBack {
    background-color: transparent;
    margin-right: 10px;
    color: rgb(242, 242, 242);
}

/* ====================== area de pesquisa ============================== */
.QuestionsArea {
    width: 96%;
    max-width: 550px;
    margin: 20px auto;
    margin-bottom: 50px;
}

.milordeAfricano {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.milordeAfricano img {
    width: 20%;
    margin-bottom: 7px;
}

.milordeAfricano h1 {
    font-size: 1.7rem;
    font-family: 'Circular Std Medium', roboto;
    font-weight: lighter;

}

.milordeAfricano h2 {
    font-size: 1.1rem;
    font-weight: normal;
    margin-top: 5px;
}

.ptestemunho {
    margin-top: 10px;
    font-size: 1.5em;
    color: #171717;
    text-align: center;
    font-weight: normal;
}

.dataPesquisa h2 {
    margin-bottom: 10px;
    font-weight: normal;
}

.dataPesquisa {
    margin-top: 20px;
}

.dataPesquisa textarea {
    max-width: 100%;
    min-width: 100%;
    height: 110px;
    min-height: 110px;
    max-height: 300px;
    outline: none;
    padding: 10px;
    font-family: roboto;
    font-size: 1rem;
    margin-bottom: 10px;
}

.dataPesquisa label {
    color: #0f1116;
    font-family: KoHo;
    font-family: 1.1rem;
}

.dataPesquisa input,
.dataPesquisa select,
.dataPesquisa textarea {
    background-color: white;
    border: solid 1px #8282827e;
    padding: 10px;
    color: #171717;
}

.dataPesquisa select option {
    background-color: white;
}

.blueButton {
    width: 140px;
    padding: 10px;
    outline: none;
    border: none;
    border-radius: 2px;
    background-color: #0368cb;
    color: white;
    float: right;
    cursor: pointer;
    font-family: KoHo;
    text-align: center;
}

.QuestionsArea .desc {
    text-align: center;
    margin: 20px 0px;
    line-height: 20px;
    font-size: 1rem;
}

.noInteress {
    width: 200px;
    margin: auto;
    margin-top: 15px;
    color: red;
    text-align: center;
    cursor: pointer;
}

/* ================= TERMOS =========== */
.contentTerms {
    width: 95%;
    max-width: 800px;
    margin: auto;
    color: #fff;
}

.contentTerms h1,
.contentTerms h2 {
    font-family: Montserrat;
    margin-bottom: 10px;
    font-weight: normal;
}

.contentTerms h1 {
    font-size: 1.3em;
    text-align: left;
    color: #fff;
    margin-bottom: 20px;
}

.contentTerms h2 {
    font-size: 1.2em;
    color: #e6e6e6;
}

.contentTerms p {
    font-size: 0.9em;
    font-family: roboto;
    text-align: justify;
    margin-bottom: 15px;
}

.contentTerms ul {
    margin-left: 32px;
    margin-bottom: 15px;
}

.contentTerms ul li {
    margin-bottom: 7px;
}

.contentTerms p,
.contentTerms ul {
    color: #e8e8e8;
}

.step-account {
    width: 100%;
    min-height: 20vh;
    max-height: 60vh;
    overflow-y: auto;
    padding: 2px 10px;
    background-color: #101423;
}

.soon-item {
    opacity: 0.5;
    cursor: help;
}

/* ========= status top plan ======= */
.messagePlanStatus {
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    border: solid 1px rgb(138, 180, 248);
    color: white;
    display: flex;
    gap: 10px;
    align-items: center;
    overflow: auto;
}

.messagePlanStatus a {
    width: 50%;
    max-width: 250px;
}

.message-status {
    width: 100%;
    display: flex;
}


.action-status {
    width: 140px;
}

.btnItemPlusPlan {
    width: 100%;
    padding: 7px 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: #252b3b;
    border-radius: 10px;
    cursor: pointer;
}

.btnItemPlusPlan img {
    width: 22px;
    height: 22px;
}

.desc-status {
    width: 100%;
}

.desc-status h2 {
    font-size: 1.1em;
    color: #a6a6a6;
    font-weight: normal;
}

.desc-status p {
    font-size: 1em;
}

.notProStatus {
    width: 100%;
    display: flex;
    grid-area: 10px;
    gap: 10px;
}

.notProStatus .message-status {
    gap: 10px;
    align-items: center;
}

/* == */
@media (max-width: 800px) {
    .notProStatus {
        display: block;
    }

    .notProStatus .message-status {
        width: 100%;
        margin-bottom: 10px;
    }

    .notProStatus .action-status {
        width: 100%;
    }

    .notProStatus .action-status .actionNext {
        width: 100%;
    }

    .messagePlanStatus a {
        width: 200px !important;
    }
}