/* ========================================
   LÄGG TILL PLATS - PANEL
======================================== */

.add-place-panel {
    display: none;

    position: absolute;

    top: 20px;
    right: 20px;

    width: 320px;
    max-width: calc(100% - 40px);

    padding: 20px;

    box-sizing: border-box;

    z-index: 2000;

    background: #d8d8d8;

    border: 3px solid #333;
    border-radius: 5px;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        0 4px 0 #222,
        0 10px 22px rgba(0, 0, 0, 0.35);
}


/* ========================================
   PANEL - RUBRIK
======================================== */

.add-place-panel h2 {
    margin: 0 0 18px 0;

    text-align: center;

    font-size: 21px;
    letter-spacing: 1px;

    color: #222;
}


/* ========================================
   PANEL - LABELS
======================================== */

.add-place-panel label {
    display: block;

    margin: 12px 0 5px 0;

    font-size: 14px;
    font-weight: bold;

    color: #222;
}


/* ========================================
   PANEL - INPUT & DROPDOWN
======================================== */

.add-place-panel input,
.add-place-panel select {
    box-sizing: border-box;

    width: 100%;
}


/* ========================================
   X OCH Z
======================================== */

#place-x,
#place-z {
    font-size: 16px;
}


/* ========================================
   PANEL - KNAPPAR
======================================== */

.add-place-buttons {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.add-place-buttons button {
    flex: 1;
}


/* ========================================
   SPARA
======================================== */

#save-place-button {
    background: #4f6f45;
}

#save-place-button:hover {
    background: #5d8052;
}


/* ========================================
   STÄNG
======================================== */

#close-place-button {
    background: #6a4b4b;
}

#close-place-button:hover {
    background: #7a5757;
}


/* ========================================
   MINDRE SKÄRMAR
======================================== */

@media (max-width: 700px) {

    .add-place-panel {
        top: 15px;
        right: 15px;

        width: calc(100% - 30px);
        max-width: none;
    }
}