#alerts {
    width: 400px;
    position: fixed;
    z-index: 999999;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 24px;
    right: 24px;
}
.alertdialogbox.alertopen {
  right: 0;
  opacity: 1;
  transition: line-height 200ms, padding 200ms, right 350ms 200ms, opacity 350ms 200ms;
}
.alertifyside .alertdialogbox {
    margin-bottom: 20px;
}
.alertdialogbox {
   background: var(--background-white);
    padding: 16px 16px 16px 32px;
    border-radius:var(--borderradius16);
    border: 1px solid var(--button-bordercolor);
    display: grid;    
	align-items: center;
    grid-template-columns: 48px auto;
    grid-gap:var(--gap16);
    box-shadow: 0 3px 10px rgb(204 204 204 / 23%);
	right: -50px;
   line-height: 1;    
   position: relative;
   margin-bottom:10px;
   opacity: 0;
   transition: right 400ms, opacity 400ms, line-height 300ms 100ms, padding 300ms 100ms;
}
.alertdialogboxleft {
    position: relative;
    width:var(--size48);
    height:var(--size48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alertdialogboxleft svg, .alertdialogboxleft img {
	height: var(--svgiconheightwidth24);
	width: var(--svgiconheightwidth24);
	display:flex;
}
.alertdialogboxleft:before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translate(0, -50%);
    width: 4px;
    height: 54px;
    border-radius:var(--borderradius10);
}
.alertdialogboxright {
    grid-gap:var(--gap4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}
.alertdialogboxcloseicon {
cursor: pointer;
    position: absolute;
    top: 20px;
    right: 16px;
}
.alertdialogboxcloseicon svg path {
    stroke: transparent;
    fill: var(--headingcolor);
}
.alertdialogboxtext h3{
    margin: 0 0 4px 0;
    font-size:var(--fontsize16);
    font-weight:var(--font-weight-medium);
    color: var(--headingcolor);
}
.alert-title {
    margin: 0 0 4px 0;
    font-size:var(--fontsize16);
    font-weight:var(--font-weight-medium);
    color: var(--headingcolor);
}
.alert-message {
    margin: 0;
    font-size:var(--fontsize14);
    color: var(--othercolor);
    line-height:20px;
}
.alertdialogboxtext p {
    margin: 0;
    font-size:var(--fontsize14);
    color: var(--othercolor);
}
.alert_success .alertdialogboxleft {
    background: var(--success-bg);
}
.alert_success .alertdialogboxleft:before {
    background: var(--success-status);
}
.alert_success path {
    stroke: var(--success-status);
}
.alert_error .alertdialogboxleft {
    background: var(--danger-bg);
}
.alert_error .alertdialogboxleft:before {
    background: var(--danger-status);
}
.alert_error path {
    stroke: var(--danger-status);
}
.alert_trash .alertdialogboxleft {
    background: var(--danger-bg);
}
.alert_trash .alertdialogboxleft:before {
    background: var(--danger-status);
}
.alert_trash path {
    stroke: var(--danger-status);
}
.alert_info .alertdialogboxleft {
    background: var(--card-bluelight);
}
.alert_info .alertdialogboxleft:before {
    background: var(--card-bluedark);
}
.alert_info path {
    stroke: var(--card-bluedark);
}
.alert_warning .alertdialogboxleft {
    background: var(--warning-bg);
}
.alert_warning .alertdialogboxleft:before {
    background: var(--warning-status);
}
.alert_warning path {
    stroke: var(--warning-status);
}
.alertdialogboxcloseicon svg, .alertdialogboxcloseicon img {
    height:var(--svgiconheightwidth16);
    width:var(--svgiconheightwidth16);
	display:flex;
}