.alert {
display: flex;
align-items: stretch;
padding: 1rem 2rem;
border-radius: 3px;
margin: 0;
}
.alert .alert-icon {
display: flex;
align-items: center;
padding: 0 1.25rem 0 0;
}
.alert .alert-icon i {
font-size: 2.4rem;
}
.alert .alert-icon.alert-icon-top {
align-items: flex-start;
align-content: stretch;
}
.alert .alert-text {
align-self: center;
flex-grow: 1;
}
.alert .alert-close {
padding: 0 0 0 1rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
.alert .alert-close .close {
text-shadow: none !important;
}
.alert .alert-close i {
opacity: 0.8;
transition: all 0.3s ease;
}
.alert .alert-close i:hover {
transition: all 0.3s ease;
opacity: 1;
}
.alert.alert-elevate {
box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.1);
}
.alert.alert-brand {
background: #5d78ff;
border: 1px solid #5d78ff;
color: #ffffff;
}
.alert.alert-brand .alert-icon i {
color: #ffffff;
}
.alert.alert-brand .alert-text {
color: #ffffff;
}
.alert.alert-brand .alert-text hr {
border-top-color: #ffffff;
opacity: 0.4;
}
.alert.alert-brand .alert-close i {
color: #ffffff;
}
.alert.alert-outline-brand {
border: 1px solid #5d78ff;
color: #5d78ff;
}
.alert.alert-outline-brand .alert-icon i {
color: #5d78ff;
}
.alert.alert-outline-brand .alert-text {
color: #5d78ff;
}
.alert.alert-outline-brand .alert-close i {
color: #5d78ff;
}
.alert.alert-solid-brand {
background: rgba(93, 120, 255, 0.1);
border-color: transparent;
color: #5d78ff;
}
.alert.alert-solid-brand .alert-icon i {
color: #5d78ff;
}
.alert.alert-solid-brand .alert-text {
color: #5d78ff;
}
.alert.alert-solid-brand .alert-close i {
color: #5d78ff;
}
.alert.alert-light {
background: #ffffff;
border: 1px solid #ffffff;
color: #282a3c;
}
.alert.alert-light .alert-icon i {
color: #282a3c;
}
.alert.alert-light .alert-text {
color: #282a3c;
}
.alert.alert-light .alert-text hr {
border-top-color: #282a3c;
opacity: 0.4;
}
.alert.alert-light .alert-close i {
color: #282a3c;
}
.alert.alert-outline-light {
border: 1px solid #ffffff;
color: #ffffff;
}
.alert.alert-outline-light .alert-icon i {
color: #ffffff;
}
.alert.alert-outline-light .alert-text {
color: #ffffff;
}
.alert.alert-outline-light .alert-close i {
color: #ffffff;
}
.alert.alert-solid-light {
background: rgba(255, 255, 255, 0.1);
border-color: transparent;
color: #ffffff;
}
.alert.alert-solid-light .alert-icon i {
color: #ffffff;
}
.alert.alert-solid-light .alert-text {
color: #ffffff;
}
.alert.alert-solid-light .alert-close i {
color: #ffffff;
}
.alert.alert-dark {
background: #282a3c;
border: 1px solid #282a3c;
color: #ffffff;
}
.alert.alert-dark .alert-icon i {
color: #ffffff;
}
.alert.alert-dark .alert-text {
color: #ffffff;
}
.alert.alert-dark .alert-text hr {
border-top-color: #ffffff;
opacity: 0.4;
}
.alert.alert-dark .alert-close i {
color: #ffffff;
}
.alert.alert-outline-dark {
border: 1px solid #282a3c;
color: #282a3c;
}
.alert.alert-outline-dark .alert-icon i {
color: #282a3c;
}
.alert.alert-outline-dark .alert-text {
color: #282a3c;
}
.alert.alert-outline-dark .alert-close i {
color: #282a3c;
}
.alert.alert-solid-dark {
background: rgba(40, 42, 60, 0.1);
border-color: transparent;
color: #282a3c;
}
.alert.alert-solid-dark .alert-icon i {
color: #282a3c;
}
.alert.alert-solid-dark .alert-text {
color: #282a3c;
}
.alert.alert-solid-dark .alert-close i {
color: #282a3c;
}
.alert.alert-primary {
background: #5867dd;
border: 1px solid #5867dd;
color: #ffffff;
}
.alert.alert-primary .alert-icon i {
color: #ffffff;
}
.alert.alert-primary .alert-text {
color: #ffffff;
}
.alert.alert-primary .alert-text hr {
border-top-color: #ffffff;
opacity: 0.4;
}
.alert.alert-primary .alert-close i {
color: #ffffff;
}
.alert.alert-outline-primary {
border: 1px solid #5867dd;
color: #5867dd;
}
.alert.alert-outline-primary .alert-icon i {
color: #5867dd;
}
.alert.alert-outline-primary .alert-text {
color: #5867dd;
}
.alert.alert-outline-primary .alert-close i {
color: #5867dd;
}
.alert.alert-solid-primary {
background: rgba(88, 103, 221, 0.1);
border-color: transparent;
color: #5867dd;
}
.alert.alert-solid-primary .alert-icon i {
color: #5867dd;
}
.alert.alert-solid-primary .alert-text {
color: #5867dd;
}
.alert.alert-solid-primary .alert-close i {
color: #5867dd;
}
.alert.alert-success {
background: #0abb87;
border: 1px solid #0abb87;
color: #ffffff;
}
.alert.alert-success .alert-icon i {
color: #ffffff;
}
.alert.alert-success .alert-text {
color: #ffffff;
}
.alert.alert-success .alert-text hr {
border-top-color: #ffffff;
opacity: 0.4;
}
.alert.alert-success .alert-close i {
color: #ffffff;
}
.alert.alert-outline-success {
border: 1px solid #0abb87;
color: #0abb87;
}
.alert.alert-outline-success .alert-icon i {
color: #0abb87;
}
.alert.alert-outline-success .alert-text {
color: #0abb87;
}
.alert.alert-outline-success .alert-close i {
color: #0abb87;
}
.alert.alert-solid-success {
background: rgba(10, 187, 135, 0.1);
border-color: transparent;
color: #0abb87;
}
.alert.alert-solid-success .alert-icon i {
color: #0abb87;
}
.alert.alert-solid-success .alert-text {
color: #0abb87;
}
.alert.alert-solid-success .alert-close i {
color: #0abb87;
}
.alert.alert-info {
background: #5578eb;
border: 1px solid #5578eb;
color: #ffffff;
}
.alert.alert-info .alert-icon i {
color: #ffffff;
}
.alert.alert-info .alert-text {
color: #ffffff;
}
.alert.alert-info .alert-text hr {
border-top-color: #ffffff;
opacity: 0.4;
}
.alert.alert-info .alert-close i {
color: #ffffff;
}
.alert.alert-outline-info {
border: 1px solid #5578eb;
color: #5578eb;
}
.alert.alert-outline-info .alert-icon i {
color: #5578eb;
}
.alert.alert-outline-info .alert-text {
color: #5578eb;
}
.alert.alert-outline-info .alert-close i {
color: #5578eb;
}
.alert.alert-solid-info {
background: rgba(85, 120, 235, 0.1);
border-color: transparent;
color: #5578eb;
}
.alert.alert-solid-info .alert-icon i {
color: #5578eb;
}
.alert.alert-solid-info .alert-text {
color: #5578eb;
}
.alert.alert-solid-info .alert-close i {
color: #5578eb;
}
.alert.alert-warning {
background: #ffb822;
border: 1px solid #ffb822;
color: #111111;
}
.alert.alert-warning .alert-icon i {
color: #111111;
}
.alert.alert-warning .alert-text {
color: #111111;
}
.alert.alert-warning .alert-text hr {
border-top-color: #111111;
opacity: 0.4;
}
.alert.alert-warning .alert-close i {
color: #111111;
}
.alert.alert-outline-warning {
border: 1px solid #ffb822;
color: #ffb822;
}
.alert.alert-outline-warning .alert-icon i {
color: #ffb822;
}
.alert.alert-outline-warning .alert-text {
color: #ffb822;
}
.alert.alert-outline-warning .alert-close i {
color: #ffb822;
}
.alert.alert-solid-warning {
background: rgba(255, 184, 34, 0.1);
border-color: transparent;
color: #ffb822;
}
.alert.alert-solid-warning .alert-icon i {
color: #ffb822;
}
.alert.alert-solid-warning .alert-text {
color: #ffb822;
}
.alert.alert-solid-warning .alert-close i {
color: #ffb822;
}
.alert.alert-danger {
background: #fd397a;
border: 1px solid #fd397a;
color: #ffffff;
}
.alert.alert-danger .alert-icon i {
color: #ffffff;
}
.alert.alert-danger .alert-text {
color: #ffffff;
}
.alert.alert-danger .alert-text hr {
border-top-color: #ffffff;
opacity: 0.4;
}
.alert.alert-danger .alert-close i {
color: #ffffff;
}
.alert.alert-outline-danger {
border: 1px solid #fd397a;
color: #fd397a;
}
.alert.alert-outline-danger .alert-icon i {
color: #fd397a;
}
.alert.alert-outline-danger .alert-text {
color: #fd397a;
}
.alert.alert-outline-danger .alert-close i {
color: #fd397a;
}
.alert.alert-solid-danger {
background: rgba(253, 57, 122, 0.1);
border-color: transparent;
color: #fd397a;
}
.alert.alert-solid-danger .alert-icon i {
color: #fd397a;
}
.alert.alert-solid-danger .alert-text {
color: #fd397a;
}
.alert.alert-solid-danger .alert-close i {
color: #fd397a;
}
.alert.alert-secondary .alert-icon i {
color: #74788d;
}
.alert.alert-secondary .alert-text {
color: #595d6e;
}
.alert.alert--marginless {
margin: 0;
}
.alert.alert-bold .alert-text {
font-weight: 500;
}
.alert ul {
margin-block-start: 0;
margin-block-end: 0;
}
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
a.close.disabled {
pointer-events: none;
}