/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/** REMINDER: The CSS for the preview window as well as the alert display on the public page is found int the /public/css/bcalrt-shared-style.css. This is because the preview window mostly the same CSS as the alert on the public page. Therefore, if you want to style preview window, you can do so by changing the css in that file. If you only want to change the css for the admin settings page, you can do it here: 
*/


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

#bcalrt-btn {
    padding: 12px 18px 12px 12px;
    margin: 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 95;
    font-size: .75rem;
    background-color: white;
    border-radius: 4px;
}

#bcalrt-btn i {
	margin-right: 8px;
	margin-left: 8px;
}


#bcalrt-btn:hover {
  background-color: lightGray;
}

#bcalrt {
    padding: 0;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
	background-color: white;
}

#bcalrt .row {
/*     text-align: center;
    padding: 0; */
}

.bcalrt-close-x {
    position: absolute;
    right: .5rem;
    top: .5rem;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: none;
}

/* #bcalrt.bc-alert {
    background-color: var(--crimsonred);
}

#bcalrt.bc-warning {
    background-color: var(--opportunityyellow);
}

#bcalrt.bc-info {
    background-color: var(--coastalgrey);
} */

@media only screen and (max-width: 500px) {
    #bcalrt-btn {
        top: 4rem;
    }
}