:root {
    --header: 9vh;
    --mainTop: 9vh;
    --sideLeft: 16%;
    --sideRight: 20%;
}

/* FUNDO – – – – – – – – – – ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

.mobile
header .cart {
    display: none;
}


header .btn-back i {
    font-size: larger;
}


.side-left .logo{
    display: none;
    padding: var(--padding);
    width: 50%;
}


.mobile
.side-left .logo{
    display: block;
}

.side-left ul{
    margin-top: var(--margin);
}

.mobile
.side-left ul{
    margin-top: 0;
}

.side-left .perfil {
    margin-bottom: 2rem;
}

.side-left .perfil i {
    font-size: xxx-large;
    font-weight: 100;
    margin-right: .5rem;
}

.side-left .perfil button {
    display: flex;
    justify-content: left;
}


/* TELAS | TELAS | TELAS – – – – – – – – – – ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
main {
    background: var(--darkMode-opc) url(/img/marcolimpo/fundo.png) no-repeat;
    background-position: 5vw 5vh;
    background-size: 90%;
}

main:not(main:has(> #tela-home)){
    padding: var(--padding);
}

.mobile main {
    background-size: 120vw;
    background-position: -10vw 8vh;
}

section > h1{
    position: relative;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    text-align: center;
    color: rgb(0, 0, 127);
    border-radius: var(--radius-2);
    background-color: var(--Bg-2);
}

section .btn-back:first-of-type {
    width: 4rem;
    color: red;
    font-size: 1.2rem;
    padding: 0 .4rem;
    height: 1.8rem;
    font-weight: bold;
    background-color: white;
    border-radius: var(--radius-2);
    border: 3.3px solid var(--color);
}

label,
.label {
  	font-weight: bold;
  	color: var(--label);
}

label em {
    display: none;
    float: right;
    color: red;
}

fieldset > label {
    display: inherit;
    cursor: pointer;
    padding: .5rem 1rem;
    font-size: 1.1rem;
}

fieldset label:hover, fieldset > label.checked {
    border-radius: var(--radius-1);
    background-color: var(--hoverColor);
}

fieldset:has(label) {
    margin-bottom: 1rem;
    border-radius: var(--radius-1);
    border: 1px solid grey;
    background-color: var(--input-1);

    min-width: auto;
    overflow-x: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

fieldset:has(> legend) { padding-bottom: .6rem; }

legend {
    margin: auto;
    padding: 0 10%;
    color: var(--color-2);
    border-radius: var(--radius-2);
    border: 1px solid darkgray;
    background-color: var(--input-1);
}

p:has(> label + input, > label + select, > .label + input, > .label + select, > label select),
div:has(> label + input, > label + select, > .label + input, > .label + select, > label select)
{
    margin: var(--margin) 0!important;
}

p:has(.z7-moreless) label { width: max-content; min-width: 50%;  }

select, input:not(fieldset input, input[type='number'], input[type='checkbox'])  {
    width: 100%;
}

select { box-shadow: inset 2px 3px 3px #00000020 }

input[type=radio], input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    user-select: none;
}

textarea {
    transition: all 150ms;
    width: 100%;
    padding: 0.3rem;
    font-size: 1rem;
    resize: vertical;
    border-radius: var(--radius-2);
}


.mobile input[type=radio],
.mobile input[type=radio]
{ margin: 1rem .5rem }


*:disabled {
    opacity: 0.6;
}


/* SIDE RIGHT – – – – – – – – – – ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
.btn-serv-adicionado {
    border-radius: var(--radius-3);
    background-color: rgb(97, 163, 255);
    margin: .4rem 0;
}

/* DESCRIÇÕES DOS SERVIÇOS – – – – – – – – – – ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
.dv-descricao {
    display: none;
    padding: .5rem;
    font-size: 1.1rem;
    text-align: justify;
    background-color: #ffffffb9;
}

/* TELA ORÇAMENTO – – – – – – – – – – ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
.dv-orcamento {
    padding-bottom: var(--header);
}

.dv-orcamento .pdf {
    display: none;
}

.mobile .dv-orcamento {
    padding-bottom: calc(2 * var(--header));
}

#tela-orcamento .dv-orcamento > p:first-of-type {
    display: none;
}

.dv-orcamento > p:first-of-type {
    margin-bottom: var(--margin);
}

#tela-orcamento .dv-imgs {
    margin-bottom: var(--margin);
}

/* .btn-verMais {
    background-color: transparent;
    border: none;
} */

.btn-verMais {
    background-color: transparent;
    border: none;
}


/* TELA ORÇAMENTO – – – – – – – – – – ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
.btn-flutuante {
    position: fixed;
    top: calc(var(--header) + var(--margin));
    right: calc(var(--sideRight) + (2 * var(--margin)));

    display: flex;
    justify-content: right;
}

.btn-flutuante > * {
    margin-left: var(--margin);
    font-size: 1.8rem;
    height: 3rem;
    width: 3rem;

    border-radius: var(--radius-max);
    background-color: #fff;
    color: gray;
    border: 3px solid gray;
    box-shadow: 2px 2px 5px 1px rgba(128, 128, 128, 0.515);
}
#tela-orcamento .btn-fechar, #tela-avaliar .btn-fechar {
    display: none!important;
}

.dv-nenhum {
    padding: 3rem .8rem;
    text-align: center;
    font-size: larger;
    background-color: white;
    border: 1px solid #000;
    border-radius: var(--radius-3);
}


/* ================================== ARTICLES - MAIN ========================================== */

.article, article:not(article:has(.del)) {
    display: block;
    width: 100%;
    position: relative;
    margin-top: var(--margin);
    padding: .5rem .5rem;

    background-color: white;
    border: 2px solid #12d4e7;
    border-radius: var(--radius-3);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.article h2 , article:not(article:has(.del)) h2 {
    width: 100%;
    font-size: large;
    text-align: center;
    color: var(--colorMain);
}

.article p , article:not(article:has(.del)) p {
    width: 100%;
    text-align: center;
}
.article p strong , article:not(article:has(.del)) p strong {
    color: var(--colorMain);
}

.article .dv-btn , article .dv-btn {
    width: 100%;
    height: min-content;
    margin-top: var(--margin);
}

.article button, article:not(article:has(.del)) .btn, article:not(article:has(.del)) button {
    border: 1px solid #000;
    border-radius: var(--radius);
    background-color: buttonface;
    padding: 0 .5rem;
}


.side-left:not(.mobile .side-left) .sair
{
    display: none !important;
}

.side-left .sair {
    position: absolute;
    bottom: var(--margin);
    width: 100%;
}


.enviado, .aguardando{
    background-color: #a6a6a6!important
}
.agendar, .cortesia{
    background-color: #ffcc00!important
}
.realizado, .parcial {
    background-color: #7ed957!important
}
.recusado, .compensação, .estornado{
    background-color: #d9d9d9!important
}
.avaliado, .pago {
    background-color: #3bb6ff!important
}
.cancelado, .atrasado{
    background-color: #ff5757!important
}
.pendente {
    background-color: #ff914d!important
}
.agendado {
    background-color: #ff66c4!important
}
.excluido {
    background-color: #171717!important
}
p.carrinho {
    background-color: #213eff!important
}