/* 
Web App Install Banner Styles

When the user visits the site, an alert will appear prompting the user to install the app.
It will first appear as an alert, but will be replaced by a banner if the user dismisses the alert.
If the app is installed, the alert and/or banner will not appear.

*/

/* Container */
.alert-container { 
    position: absolute; /* Fixed Position */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Transparent White */
    z-index: 1000; /* On Top */
    align-items: center; /* Center Vertically */
    justify-content: center; /* Center Horizontally */
}

.banner-container {
    padding: 0px;
    font-size: 14px;
    width: 100%;
    border-bottom: #ccc solid 1px;
    display: flex;
}

/* Content */
.alert-content {
    border: #ccc solid 1px;
    background-color: #ebebeb;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 20px; /* Rounded Corners */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing */
}

.banner-content {
    display: flex;
    flex: 1; /* Fill Space */
    justify-content: center; /* Center Horizontally */
}

/* Message */
#banner-message,
#ios-banner-message {
    display: flex;
    flex-direction: column;
    flex: 1; /* Fill Space */
    gap: 10px; /* Spacing */
    line-height: 1.6em;
    justify-content: center; /* Center Vertically */
}

/* Buttons */
#install-buttons {
    display: flex;
    gap: 10px; /* Spacing */
    flex: 1; /* Fill Space */
}

#install-buttons button {
    width: 100%;
}

#install-continue i {
    margin-right: 5px;
}

.banner-content #install-continue {
    border-radius: 0px;
}