html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

.padding{padding:10px;}

#painel {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 600px;
}


.marcador-endereco.entregue{pointer-events:none; opacity:0.5;}
.marcador-endereco.entregue .concluir-endereco,
.marcador-endereco.entregue .remover-endereco{
    display:none !important;
}

.marcador-endereco.entregue .texto{
    background:#d8ffd8;
    color:#666;
    text-decoration:line-through;
}

.marcador-endereco.entregue .circulo{
    background:#27ae60;
}

.marcador-endereco.entregue .concluir-endereco{
    display:none;
}
#endereco {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border: 0;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    outline: none;
}

#mapa {
    width: 100%;
    height: 100%;
}

/* Marcador criado sobre o mapa */
.marcador-endereco{
    position:absolute;
    display:flex;
    align-items:center;
    gap:8px;
    transform:translateY(-50%);
    white-space:nowrap;
}

.marcador-endereco .circulo{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#111;
    border:2px solid #fff;
}

.marcador-endereco .texto{
    background:rgba(255,255,255,.95);
    padding:5px 8px;
    border-radius:4px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
}

.marcador-endereco button{

    border:none;
    background:#d33;
    color:#fff;

    width:20px;
    height:20px;

    border-radius:50%;
    cursor:pointer;
    font-size:12px;
    line-height:20px;
    padding:0;
}
.marcador-endereco .texto{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;

    background:rgba(255,255,255,.95);
    padding:7px 8px;
    border-radius:6px;
    font-size:12px;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
}

.marcador-endereco .endereco-texto{
    display:block;
    max-width:280px;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.35;
}

/* Equivale ao UL */
.marcador-endereco .acoes-endereco{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    width:100%;
}

/* Equivale aos LI */
.marcador-endereco .acoes-endereco button{
    flex:1 1 0;
    min-width:0;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    border:0;
    border-radius:8px;

    cursor:pointer;
    font-size:0;
    line-height:0;

    transition:
        transform .15s ease,
        filter .15s ease,
        opacity .15s ease;
}

.status-aguardando{
	background:#D7CC75;
}

.marcador-endereco .acoes-endereco button svg{
    display:block;
    width:18px;
    height:18px;
    pointer-events:none;
}

.marcador-endereco .acoes-endereco button svg path{
    fill:#fff;
}

/* Confirmar */
.marcador-endereco .concluir-endereco{
    background:#a6d52e !important;
}

/* Pendente / voltar para aguardando */
.marcador-endereco .pendente-endereco,
.marcador-endereco .aguardando-endereco{
    background:#ddd074 !important;
}

/* Remover */
.marcador-endereco .remover-endereco{
    background:#f41923 !important;
}

.marcador-endereco .acoes-endereco button:hover{
    filter:brightness(.94);
    transform:scale(1.03);
}

.marcador-endereco .acoes-endereco button:active{
    transform:scale(.96);
}

.marcador-endereco .acoes-endereco button:disabled{
    opacity:.45 !important;
    cursor:default;
    transform:none;
}