.gfb-form-container {
    border: 1px solid #e2e4e7;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 40px;
    max-width: 600px;
    /*line-height: 1;*/
}

div.gfb-error {
    border: 3px solid black;
    background-color: red;
    color: black;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 24px;
}

.error {
    color: red;
    font-weight: bold;
    /*line-height: 1;*/
}

.success {
    color: green;
    font-weight: bold;
    /*line-height: 1;*/
}

.extra-html {
    font-size: 50%;
    font-weight: bold;
}

#server_message {
    margin-top: 10px;
    font-size: 32px;
    /*line-height: 1;*/
}

.qb_input_field {
    font-size: 40px;
    width: auto;
    /*max-width: 320px;*/
    /*width: 100%;*/
    padding: 8px;
    margin: 6px 0;
    /*line-height: 1;*/
}

.qb_input_field::placeholder {
    color: paleturquoise;
}

th {
    text-decoration: underline;
}

.picker-flex-row {
    display: flex;           /* lay out children horizontally */
    gap: 30px;               /* space between items */
    align-items: center;
    flex-wrap: wrap;         /* enable this if you want items to wrap on small screens */
}

.picker-flex-row > div {
    flex: 0 0 auto;          /* keep each div at its content width */
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Station Picker */

/* Station picker */
.gfb-station-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.15);
    text-transform: uppercase;
}

/* Color variants (used for both the picker and the modal options) */
.gfb-station-red { background-color: #c62828; }
.gfb-station-blue { background-color: #1565c0; }
.gfb-station-green { background-color: #2e7d32; }
.gfb-station-purple { background-color: #6a1b9a; }
.gfb-station-missing { background-color: #000; }

.gfb-station-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
}

.gfb-station-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.15);
    cursor: pointer;
}

/* Modal */
.gfb-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}
.gfb-modal.is-open { display: block; }

.gfb-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.gfb-modal__dialog {
    position: relative;
    margin: 10vh auto 0;
    max-width: 420px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.gfb-modal__title {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
}

.gfb-modal__actions {
    display: flex;
    /*display: none !important;  !* hide the close button *!*/
    justify-content: flex-end;
    margin-top: 16px;
}

.gfb-modal__close {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
}

/* Server picker (thumbnail button) */
.gfb-server-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 72px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    margin-left: 12px;
}

.gfb-server-picker img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

/* Server modal grid */
.gfb-server-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gfb-server-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.15);
    background: #fafafa;
    cursor: pointer;
    transition: background .15s ease-in-out, transform .05s ease-in-out;
}

.gfb-server-option:hover {
    background: #f0f0f0;
}

.gfb-server-option:active {
    transform: scale(0.99);
}

.gfb-server-option img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
}

.gfb-server-option span {
    font-weight: 600;
}