/* --------------------------------------------------
   Wanderung-Organizer
   Design passend zur Tour-Anmeldung
-------------------------------------------------- */

.wo-container {

    width: 100%;
    padding: 20px;

    background: #edfbe2;

    border: 2px solid #a0e16e;
    border-radius: 12px;

    box-sizing: border-box;
}

.wo-container h2 {
    margin-top: 0;
    color: #2f6b18;
}

.wo-container label {
    display: block;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 6px;
}

.wo-container input[type="text"],
.wo-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #b8d7a6;
    border-radius: 5px;
    box-sizing: border-box;
    background: #ffffff;
}

/* Abstand Passwort -> Button */

#wo_password {
    margin-bottom: 25px;
}

.wo-box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f7fff1;
    border: 1px solid #a0e16e;
    border-radius: 8px;
}

.wo-box h3 {
    margin-top: 0;
    color: #2f6b18;
}

.wo-box pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #ffffff;
    border: 1px solid #d9e9cf;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.wo-button-row {
    margin-top: 10px;
}

#wo_save {
    background: #54b435;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}

#wo_save:hover {
    background: #47992d;
}

#wo_message {
    margin-top: 15px;
    font-weight: 600;
}

.wo-success {
    color: #1f7a1f;
}

.wo-error {
    color: #c62828;
}

/* --------------------------------------------------
   Backend-Tabelle
-------------------------------------------------- */

.widefat input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.widefat td,
.widefat th {
    vertical-align: middle;
}

.widefat .button {
    margin-right: 5px;
}

/* --------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (max-width: 768px) {

    .wo-container {
        padding: 15px;
    }

    #wo_save {
        width: 100%;
    }

    .widefat {
        display: block;
        overflow-x: auto;
    }
}