.cotacao-section-center-page{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* BANNER PAGE */
.cotacao-section-display-banner-page{
    width: 100%;
    max-height: 300px;
    display: flex;
    justify-content: center;
    object-fit: cover;
}
.cotacao-container-banner{
    width: 100%;
    display: flex;
    justify-content: center;
}
.cotacao-banner-desktop{
    width: 100%;
    object-fit: cover;
}
.cotacao-banner-mobile{
    display: none;
    width: 100%;
    object-fit: cover;
}

/* DISPLAY DAS MARCAS */
.cotacao-section-cotacao-list-display{
    width: 80%;
    margin-top: -60px;
    margin-bottom: 27px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secundary);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
}
.cotacao-section-display-cotacao-full{
    width: 100%;
    padding: 34px;
}

/* TITLE cotacao */
.cotacao-container-main-title-cotacao{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.cotacao-container-main-title-cotacao span:nth-child(1){
    font-size: 1rem;
    margin-bottom: 28px;
    color: var(--color-one);
}
.cotacao-container-main-title-cotacao span:nth-child(2){
    font-size: 0.7rem;
    text-align: justify;
    color: var(--color-one);
}

/* TITLE cotacao */
.cotacao-container-main-title-cotacao{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.cotacao-container-main-title-cotacao span:nth-child(1){
    font-size: 1rem;
    margin-bottom: 28px;
    color: var(--color-one);
}
.cotacao-container-main-title-cotacao span:nth-child(2){
    font-size: 0.7rem;
    text-align: justify;
    color: var(--color-one);
}

/**********************************************/
/**********************************************/
/* SECTION INSERIR OS DADOS E FINALIZAR */
.cotacao-section-finalizar{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.cotacao-form-action{
    width: 100%;
    margin-top: 17px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cotacao-container-list-inputs{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cotacao-container-row-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cotacao-container-input{
    width: 100%;
    margin: 13px 0;
    display: flex;
    flex-direction: column;
}
.title-input{
    width: fit-content;
    margin: 4px;
    display: flex;
    justify-content: center;
    margin-bottom: -7px;
    color: var(--color-one);
    background: var(--color-three);
    z-index: 1;
}
.title-input label{
    padding: 0 5px;
    font-size: 0.7rem;
}

.cotacao-container-input input[type=text]{
    width: 100%;
    font-size: 0.75rem;
    outline: 0;
    border: 0;
    border: 1px solid var(--color-one);
    color: var(--color-one);
    padding: 7px 10px;
}
.cotacao-container-input input[type=email]{
    width: 100%;
    font-size: 0.75rem;
    outline: 0;
    border: 0;
    border: 1px solid var(--color-one);
    color: var(--color-one);
    padding: 7px 10px;
}
#telefone-mask{
    letter-spacing: 2px;
}

/* BUTTON COTAÇÃO */
.cotacao-input-button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cotacao-input-button button{
    margin: 16px 0;
    background: transparent;
    padding: 5px 22px;
    font-size: 0.8rem;
    color: var(--color-one);
    border: 1px solid var(--color-one);
    outline: 0;
    cursor: pointer;
    border-radius: 3px;
    transition: 0.5s;
}
.cotacao-input-button button:hover{
    transition: 0.5s;
    background: var(--color-one);
    color: var(--color-three);
}

/**********************************************/
/**********************************************/
/* SECTION DOS ITENS DA COTAÇÃO */
.cotacao-container-display-itens{
    width: 65%;
    display: flex;
    flex-direction: column;
}
.cotacao-title-container{
    width: 100%;
    margin: 8px 0;
    display: flex;
}
.cotacao-title-container span{
    font-size: 0.7rem;
    color: var(--color-one);
}

.cotacao-container-display-list-itens{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.cotacao-container-component{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-one);
}

.cotacao-itens-um{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cotacao-itens-dois{
    width: 92%;
    display: flex;
    justify-content: center;
}

.cotacao-itens-tres{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cotacao-itens-tres button{
    margin: 16px 0;
    background: transparent;
    padding: 5px 5px;
    font-size: 0.8rem;
    color: var(--color-one);
    border: 1px solid var(--color-one);
    outline: 0;
    cursor: pointer;
    border-radius: 3px;
    transition: 0.5s;
}
.cotacao-itens-tres button:hover{
    transition: 0.5s;
    background: var(--color-one);
    color: var(--color-three);
}

.cotacao-itens-brand{
    width: 100%;
    margin: 7px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-one);
}


.cotacao-itens-brand-display-um{
    width: 100%;
    margin-left: 12px;
    display: flex;
}
.cotacao-itens-brand-display-dois{
    width: 100%;
    margin-left: 12px;
}
.cotacao-itens-brand-display-dois span{
    font-size: 0.7rem;
    margin-top: 7px;
    color: var(--color-one);
}

.cotacao-itens-brand-display-dois input[type=text]{
    background: transparent;
    outline: 0;
    border: 0;
    text-align: left;
    color: var(--color-one);
    font-size: 0.7rem;
    cursor: pointer;
}

.cotacao-itens-brand-display-um input[type=text]:nth-child(1){
    width: 15%;
    border: none;
    outline: 0;
    background: transparent;
    color: var(--color-one);
    font-size: 1rem;
}
.cotacao-itens-brand-display-um input[type=text]:nth-child(2){
    width: 100%;
    margin-left: 15px;
    border: none;
    outline: 0;
    background: transparent;
    color: var(--color-one);
    text-align: left;
    font-size: 1rem;
}

.cotacao-container-inpt{
    display: flex;
    justify-content: center;
    margin-right: 6px;
}
.cotacao-container-inpt input[type=number]{
    width: 20px;
    height: 30px;
    margin: 0 7px;
    border: none;
    outline: 0;
    color: var(--color-one);
    text-align: center;
}
.cotacao-container-inpt button{
    background: transparent;
    border: none;
    margin: 0 5px;
    outline: 0;
    color: var(--color-one);
    cursor: pointer;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}



.cotacao-container-atualizar{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.cotacao-container-atualizar button{
    margin: 16px 0;
    background: transparent;
    padding: 5px 22px;
    font-size: 0.8rem;
    color: var(--color-one);
    border: 1px solid var(--color-one);
    outline: 0;
    cursor: pointer;
    border-radius: 3px;
    transition: 0.5s;
}
.cotacao-container-atualizar button:hover{
    transition: 0.5s;
    background: var(--color-one);
    color: var(--color-three);
}


/************************/
/************************/
/* SECTION DE successful */
#cotacao-section-display-successful{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(192, 192, 192, 0.281);
}

.successful-tela{
    background: var(--bg-secundary);
    border-radius: 4px;
}

.successful-main-display{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    
}
.successful-main-display img{
    width: 45%;
    margin-top: 28px;
}
.successful-text-msg{
    width: 95%;
    height: 95%;
    display: flex;
    flex-direction: column;
    
}
.successful-text-msg span{
    font-size: 0.8rem;
    color: var(--color-one);
    text-align: center;
}

/**************************/
/**************************/
/* RESPONSIVE */
@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 900px) {

}
@media only screen and (max-width: 800px) {
    /* BANNER */
    .cotacao-banner-desktop{
        display: none;
    }
    .cotacao-banner-mobile{
        display: flex;
    }

    .cotacao-section-display-cotacao-full{
        width: 100%;
        padding: 12px;
    }
    .cotacao-form-action{
        flex-direction: column;
        align-items: center;
    }
    .cotacao-container-list-inputs{
        width: 100%;
    }
    .cotacao-container-display-itens{
        width: 100%;
    }
}
@media only screen and (max-width: 700px) {
    .cotacao-section-cotacao-list-display{
        width: 95%;
    }
}
@media only screen and (max-width: 500px) {
    .cotacao-itens-dois{
        width: 100%;
    }
    .cotacao-container-component{
        flex-direction: column;
    }
    .cotacao-itens-brand{
        width: 100%;
        border-left: 0;
        align-items: center;
        margin-top: 12px;
    }
    .cotacao-itens-brand span:nth-child(1){
        text-align: center;
    }
    .cotacao-container-inpt{
        border-bottom: 1px solid var(--color-one);
    }

}