.toast-icon {
    width: 50px;
    padding-right: 7px;
    font-size: 18px;
    float: left;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.toast-msg {
width: calc(100% - 50px);
float: right;
height: 100%;
}

/* TOASTS */

.toasts {
width: 400px;
position: fixed;
bottom: 20px;
right: 20px;
zoom: 85%;
}

.toast {
width: 100%;
margin: 10px 0;
padding: 20px 10px;
position: relative;
background-color: white;
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
color: #3d3d3d;
cursor: pointer;
animation-name: sli;
animation-duration: .3s;
border-radius: 10px;
font-weight: 500;
display: flex;
}

.toast span {
display: inline-block;
margin-right: 10px;
margin-left: 5px;
height: 100%;
font-size: 20px;
}

.toast h3 {
font-weight: 300;
font-size: 14px;
margin: unset;
}
.toast .exit {
position: absolute;
top: 7px;
right: 7px;
font-size: 1.1em;
}
.toast progress[value] {
-webkit-appearance: none;
appearance: none;
position: absolute;
width: 100%;
left: 0;
bottom: 0px;
height: 4px;
opacity: 0.3;
}
.toast progress[value]::-webkit-progress-bar {
background-color: rgba(0,0,0,0);
}

.success {
background-color: #143b38;
}
.success .toast-icon {
color: #34d399;
}
.success .toast-msg {
color: #34d399;
}
.success progress[value]::-webkit-progress-value {
background-color: rgba(0,0,0,0.4);
}

.error {
background-color: #521f3e;
}
.error .toast-icon {
color: #ff4487;
}
.error .toast-msg {
color: #ff4487;
}
.error progress[value]::-webkit-progress-value {
background-color: rgba(0,0,0,0.4);
}

.info {
background-color: #16143b;
}
.info .toast-icon {
color: #345bd3;
}
.info .toast-msg {
color: #345bd3;
}

.info progress[value]::-webkit-progress-value {
background-color: rgba(0,0,0,0.4);
}

.warning {
background-color: #52391f;
}
.warning .toast-icon {
color: #ffd244;
}
.warning .toast-msg {
color: #ffd244;
}
.warning progress[value]::-webkit-progress-value {
background-color: rgba(0,0,0,0.4);
}

@keyframes sli {
0%   {
    right: -400px;
}
100%   {
    right: 0px;
}
}

@keyframes slo {
0%   {
    right: 0px;
}
100%   {
    right: -400px;
}
}
.toast > progress::-webkit-progress-bar { background: transparent; }
.toast > progress::-webkit-progress-value { background: currentColor; }
.toast > progress::-moz-progress-bar { background: currentColor; }

/* Icon + text */
.toast .toast-icon i { font-size: 18px; line-height: 1; }
.toast .toast-msg { font-size: 14px; }

/* Color hints */
.toast.success { color: #3be287; }
.toast.error   { color: #ff6b6b; }
.toast.info    { color: #7ec8ff; }
.toast.warning { color: #ffd166; }
/* Ensure the actions row is visible and spaced */
.plan-card-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.plan-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* Keep proxy list wrapper smooth */
.isp-proxy-list-wrapper { overflow:hidden; transition:max-height .25s ease; }
.isp-proxy-list { margin-top:.75rem; white-space:pre-wrap; }