.vpn-error-container {
    background: #fff;
    color: var(--bs-dark-text);
    max-width: 600px;
    margin: 1rem auto;
    padding: 32px 28px 24px 28px;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    font-size: 1.1rem;
    text-align: left;
    font-weight: 400;
}
.vpn-error-container ul {
    margin-left: 24px;
    margin-bottom: 16px;
}
.vpn-error-container li {
    margin-bottom: 6px;
}
.vpn-error-container p {
    margin-bottom: 12px;
}
#outputDiv a,
.vpn-error-container a {
    color: #1976d2;
    font-weight: bold;
    text-decoration: underline;
    display: inline-block;
    margin-top: 18px;
}

[data-bs-theme="dark"] .vpn-error-container {
    background: var(--bs-dark-bg-subtle);
    color: var(--bs-gray-600);
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.1);
}

/*
Custom CSS

This file is for your custom CSS. You can add your own styles here without
modifying the index.html file or any other template files. This file is
loaded in the template_v3/index.js file.

This file is intentionally left blank. Add your custom CSS below.

@version 1.0.0
*/

ol li {
    margin-bottom: 1rem;
}

ol li ol {
    margin-top: 1rem;
}

/* animate the icon */
.collapse-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

/* rotate when open */
[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

.was-validated .form-control.is-invalid {
    border-color: var(--bs-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

@media screen and (min-width: 0) and (max-width: 1199px) {
    .select-container {
        min-width: 400px;
    }
    #specific-merchandise-select {
        max-width: calc(100vw - 60px);
    }
    #selected-jewelry-image > img {
        width: calc(100vw - 60px);
    }
}

@media (min-width: 1200px) {
    #selected-jewelry-image > img {
        width: 400px;
        height: auto;
    }
}


/*# sourceMappingURL=common.css.map*/