.alerto { z-index: 5000; position: fixed; font-family: 'Open Sans', sans-serif; width: 400px; }

.alerto-right { right: 0; } .alerto-left { left: 0; } .alerto-bottom { bottom: 0; } .alerto-top { top: 0; }

.alerto-tabs { padding: 0; margin: 0; text-align: right; font-size: 0; }
.alerto-tabs li { cursor: pointer; background: #aaa; color: #fff; font-size: 12px; display: inline-block; width: 28px; height: 28px; margin-right: 2px; margin-top: 2px; text-align: center; line-height: 30px; list-style: none; }
.alerto-tabs li.alerto-active { background: #333; }

.alerto-tab-pane { padding: 0; margin: 0; }
.alerto-tab-pane li { visibility: hidden; max-height: 0; list-style: none; }
.alerto-tab-pane li.alerto-active { visibility: visible; max-height: 100%; min-height: 130px; margin: 2px 0 7px 0; -webkit-box-shadow: 0px 3px 20px -7px rgba(0,0,0,0.75); -moz-box-shadow: 0px 3px 20px -7px rgba(0,0,0,0.75); box-shadow: 0px 3px 20px -7px rgba(0,0,0,0.75); }
.alerto-tab-pane .alerto-default .alerto-close { color: #333; }
.alerto-tab-pane .alerto-default .alerto-progressbar-in { background-color: #333; }

.alerto-tabs .alerto-danger { background: #e28787; color: #fff; }
.alerto-tabs .alerto-danger.alerto-active { background: #cf3737; }
.alerto-tab-pane .alerto-danger.alerto-active { border-color: #b41d1d; background-color: #ca2121; color: #fff; }

.alerto-tabs .alerto-success { background: #8bd9b9; color: #fff; }
.alerto-tabs .alerto-success.alerto-active { background: #3ebf8b; }
.alerto-tab-pane .alerto-success.alerto-active { border-color: #24a370; background-color: #29b87e; color: #fff; }

.alerto-tabs .alerto-info { background: #82adce; color: #fff; }
.alerto-tabs .alerto-info.alerto-active { background: #3e83b9; }
.alerto-tab-pane .alerto-info.alerto-active { border-color: #296ba0; background-color: #2E79B4; color: #fff; }

.alerto-tabs .alerto-warning { background: #dcb07c; color: #fff; }
.alerto-tabs .alerto-warning.alerto-active { background: #d18b3b; }
.alerto-tab-pane .alerto-warning.alerto-active { border-color: #b97429; background-color: #CE812E; color: #fff; }

.alerto-btn { display: inline-block; font-weight: 600; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #e4e4e4; border: 1px solid #e4e4e4; padding: .375rem .75rem; font-size: 14px; line-height: 1.5; border-radius: .25rem; }
.alerto-btn:focus { outline: 0; }
.alerto-btn-danger { color: #fff; background-color: #e45c5b; border-color: #dc3545; }
.alerto-btn-success { color: #fff; background-color: #249668; border-color: #2fad7a; }
.alerto-btn-warning { color: #fff; background-color: #ab6b27; border-color: #e28b2d; }
.alerto-btn-info { color: #fff; background-color: #3692da; border-color: #3291dc; }

.alerto-content { display: flex; font-size: 14px; position: relative; }
.alerto-content-inner { width: 100%; padding: 10px; } 
.alerto-content-link { align-self: center; margin-right: 10px; float: left; } 
.alerto-content-link img { max-height: 110px; max-width: 110px; } 
.alerto-content-title { margin-bottom: 5px; font-size: 17px; }
.alerto-content-excerpt { margin-bottom: 10px; font-size: 13px; }
.alerto-close { cursor: pointer; align-self: flex-start; padding: 3px 7px 0 5px; display: inline-block; color: #fff; text-decoration: none; line-height: 20px; font-size: 22px; }

.alerto-progressbar { height: 4px; width: 100%; position: absolute; bottom: 8px; background-color: rgba(0,0,0,0.2); }
.alerto-progressbar-in { animation-fill-mode: forwards; height: 100%; background-color:#fff; } 
@keyframes fill { 0% { width: 0%; } 100% { width: 100%; } }

@media only screen and (max-width: 480px) {
    .alerto { width: 100%; }
    .alerto-tab-pane li.alerto-active { min-height: 80px; }
    .alerto-content-title { margin-bottom: 3px; font-size: 15px; }
    .alerto-content-excerpt { margin-bottom: 5px; font-size: 12px; max-height: 50px; overflow: hidden; }
    .alerto-btn { padding: .250rem .50rem; font-size: 12px; }
}