.leaflet-notification {
    width: 300px;
    min-height: 50px;
    padding: 10px;
    margin: 0 0 1rem 0;
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
    border-radius: 5px;
    transition: opacity .3s ease;
    display: table;
    opacity: 0
}

.leaflet-notification.dismissable {
    cursor: pointer
}

.leaflet-notification.alert>.leaflet-notification-close-button,
.leaflet-notification.alert>.leaflet-notification-icon>i {
    color: #8a0714
}

.leaflet-notification.info>.leaflet-notification-close-button,
.leaflet-notification.info>.leaflet-notification-icon>i {
    color: #3786aa
}

.leaflet-notification.success>.leaflet-notification-close-button,
.leaflet-notification.success>.leaflet-notification-icon>i {
    color: #308333
}

.leaflet-notification.warning>.leaflet-notification-close-button,
.leaflet-notification.warning>.leaflet-notification-icon>i {
    color: #c56702
}

.leaflet-notification.custom>.leaflet-notification-close-button,
.leaflet-notification.custom>.leaflet-notification-icon>i {
    color: #a2a2a2
}

.leaflet-notification.alert {
    background-color: rgba(199, 66, 67, .95);
    color: #f3f3f3;
    border: solid #8a0714;
    border-width: 0 0 0 4px
}

.leaflet-notification.info {
    background-color: rgba(61, 171, 198, .95);
    color: #f3f3f3;
    border: solid #3786aa;
    border-width: 0 0 0 4px
}

.leaflet-notification.success {
    background-color: rgba(74, 162, 85, .95);
    color: #f3f3f3;
    border: solid #308333;
    border-width: 0 0 0 4px
}

.leaflet-notification.warning {
    background-color: rgba(237, 154, 71, .95);
    color: #f3f3f3;
    border: solid #c56702;
    border-width: 0 0 0 4px
}

.leaflet-notification.custom {
    background-color: rgba(228, 228, 228, .95);
    color: #494949;
    border: solid #a2a2a2;
    border-width: 0 0 0 4px
}

.leaflet-notification-content {
    display: table-cell;
    vertical-align: middle
}

.leaflet-notification-message,
.leaflet-notification-title {
    margin-left: 10px
}

.leaflet-notification>.leaflet-notification-content>.leaflet-notification-title {
    font-weight: 800
}

.leaflet-notification-close-button {
    margin-left: 15px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    transition: .3s;
    float: right
}

.leaflet-notification-close-button:hover {
    font-size: 22px;
    color: red
}

.leaflet-notification-icon {
    display: table-cell;
    vertical-align: middle;
    font-size: 22pt;
    width: 30px
}

.pastel>.leaflet-notification.alert {
    background-color: rgba(248, 215, 218, .95);
    color: #721c24;
    border: solid #721c24;
    border-width: 0 0 0 4px
}

.pastel>.leaflet-notification.success {
    background-color: rgba(212, 237, 218, .95);
    color: #155724;
    border: solid #155724;
    border-width: 0 0 0 4px
}

.pastel>.leaflet-notification.warning {
    background-color: rgba(255, 243, 205, .95);
    color: #856404;
    border: solid #856404;
    border-width: 0 0 0 4px
}

.pastel>.leaflet-notification.info {
    background-color: rgba(209, 236, 241, .95);
    color: #0c5460;
    border: solid #0c5460;
    border-width: 0 0 0 4px
}

.pastel>.leaflet-notification.custom {
    background-color: rgba(235, 235, 235, .95);
    color: #505050;
    border: solid #505050;
    border-width: 0 0 0 4px
}

.pastel>.leaflet-notification.alert>.leaflet-notification-close-button,
.pastel>.leaflet-notification.alert>.leaflet-notification-icon>i {
    color: #721c24
}

.pastel>.leaflet-notification.info>.leaflet-notification-close-button,
.pastel>.leaflet-notification.info>.leaflet-notification-icon>i {
    color: #0c5460
}

.pastel>.leaflet-notification.success>.leaflet-notification-close-button,
.pastel>.leaflet-notification.success>.leaflet-notification-icon>i {
    color: #155724
}

.pastel>.leaflet-notification.warning>.leaflet-notification-close-button,
.pastel>.leaflet-notification.warning>.leaflet-notification-icon>i {
    color: #856404
}

.pastel>.leaflet-notification.custom>.leaflet-notification-close-button,
.pastel>.leaflet-notification.custom>.leaflet-notification-icon>i {
    color: #505050
}

.modern>.leaflet-notification {
    border-radius: 2px;
    color: #333
}

.modern>.leaflet-notification.alert {
    background-color: rgba(255, 255, 255, .95);
    border: solid #cc2738;
    border-width: 0 0 0 4px
}

.modern>.leaflet-notification.success {
    background-color: rgba(255, 255, 255, .95);
    border: solid #32da3f;
    border-width: 0 0 0 4px
}

.modern>.leaflet-notification.warning {
    background-color: rgba(255, 255, 255, .95);
    border: solid #febe14;
    border-width: 0 0 0 4px
}

.modern>.leaflet-notification.info {
    background-color: rgba(255, 255, 255, .95);
    border: solid #1a76e5;
    border-width: 0 0 0 4px
}

.modern>.leaflet-notification.custom {
    background-color: rgba(255, 255, 255, .95);
    border: solid #5e5e5e;
    border-width: 0 0 0 4px
}

.modern>.leaflet-notification.alert>.leaflet-notification-icon>i {
    color: #cc2738
}

.modern>.leaflet-notification.info>.leaflet-notification-icon>i {
    color: #1a76e5
}

.modern>.leaflet-notification.success>.leaflet-notification-icon>i {
    color: #32da3f
}

.modern>.leaflet-notification.warning>.leaflet-notification-icon>i {
    color: #febe14
}

.modern>.leaflet-notification.custom>.leaflet-notification-icon>i {
    color: #5e5e5e
}

.modern>.leaflet-notification .leaflet-notification-content .leaflet-notification-message,
.modern>.leaflet-notification>.leaflet-notification-close-button {
    color: #767676
}