Your IP : 3.141.46.238
:root {
--ui-alert-padding: 16px 34px 16px 18px;
--ui-alert-background: var(--ui-color-palette-gray-20);
--ui-alert-background-cls-btn: var(--ui-color-base-default);
--ui-alert-border-radius: 2px;
--ui-alert-color: var(--ui-color-base-default);
}
/*region Base style*/
.ui-alert {
position: relative;
display: flex;
box-sizing: border-box;
margin-bottom: 10px;
padding: var(--ui-alert-padding);
width: 100%;
border-radius: var(--ui-alert-border-radius);
background-color: var(--ui-alert-background);
color: var(--ui-alert-color);
vertical-align: middle;
font: 14px/17px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
opacity: 1;
transition: 180ms linear all;
}
/*endregion*/
.ui-alert-inline {
display: inline-flex;
width: auto;
}
.ui-alert-text-center { justify-content: center; }
/*region Size*/
.ui-alert-md {
padding: var(--ui-alert-padding);
font-size: 14px;
line-height: 17px;
}
.ui-alert-xs {
--ui-alert-padding: 8px 34px 8px 18px;
font-size: 13px;
line-height: 18px;
}
/*endregion*/
/*region Closed*/
.ui-alert-close-btn {
position: absolute;
top: 15px;
right: 10px;
display: inline-block;
width: 20px;
height: 20px;
opacity: .4;
cursor: pointer;
transition: 180ms opacity linear;
}
.ui-alert-xs .ui-alert-close-btn { top: 7px; }
.ui-alert-close-btn:hover { opacity: .7; }
.ui-alert-close-btn:active { opacity: 1; }
.ui-alert-close-btn:after,
.ui-alert-close-btn:before {
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: var(--ui-alert-background-cls-btn);
content: '';
transform: translate(-50%, -50%) rotate(45deg);
}
.ui-alert-close-btn:after {
width: 2px;
height: 8px;
}
.ui-alert-close-btn:before {
width: 8px;
height: 2px;
}
/*endregion*/
/*region Color*/
.ui-alert-default {
--ui-alert-background: var(--ui-color-base-20);
--ui-alert-color: var(--ui-color-base-default);
}
.ui-alert-default .ui-alert-close-btn:after,
.ui-alert-default .ui-alert-close-btn:before {
--ui-alert-background-cls-btn: var(--ui-color-base-default);
}
.ui-alert-success {
--ui-alert-background: var(--ui-color-background-success);
--ui-alert-color: var(--ui-color-background-on-success);
}
.ui-alert-success .ui-alert-close-btn:after,
.ui-alert-success .ui-alert-close-btn:before {
--ui-alert-background-cls-btn: var(--ui-color-background-on-success);
}
.ui-alert-danger {
--ui-alert-background: var(--ui-color-background-alert);
--ui-alert-color: var(--ui-color-background-on-alert);
}
.ui-alert-danger .ui-alert-close-btn:after,
.ui-alert-danger .ui-alert-close-btn:before {
--ui-alert-background-cls-btn: var(--ui-color-background-on-alert);
}
.ui-alert-warning {
--ui-alert-background: var(--ui-color-background-warning);
--ui-alert-color: var(--ui-color-background-on-warning);
}
.ui-alert-warning .ui-alert-close-btn:after,
.ui-alert-warning .ui-alert-close-btn:before {
--ui-alert-background-cls-btn: var(--ui-color-background-on-warning);
}
.ui-alert-primary {
--ui-alert-background: var(--ui-color-background-info);
--ui-alert-color: var(--ui-color-background-on-info);
}
.ui-alert-primary .ui-alert-close-btn:after,
.ui-alert-primary .ui-alert-close-btn:before {
--ui-alert-background-cls-btn: var(--ui-color-background-on-info);
}
.ui-alert-info {
--ui-alert-background: var(--ui-color-base-50);
--ui-alert-color: var(--ui-color-on-primary);
}
.ui-alert-info .ui-alert-close-btn:after,
.ui-alert-info .ui-alert-close-btn:before {
--ui-alert-background-cls-btn: var(--ui-color-on-primary);
}
/*endregion*/
/*region Icons*/
.ui-alert-icon-warning:before {
content: '';
vertical-align: middle;
display: inline-block;
margin-right: 10px;
min-width: 16px;
width: 16px;
height: 16px;
background-color: var(--ui-alert-color);
-webkit-mask-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22translate%28-394%2C%20-981%29%22%20fill%3D%22%23464a4e%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M402%2C997%20C397.581722%2C997%20394%2C993.418278%20394%2C989%20C394%2C984.581722%20397.581722%2C981%20402%2C981%20C406.418278%2C981%20410%2C984.581722%20410%2C989%20C410%2C993.418278%20406.418278%2C997%20402%2C997%20Z%20M400.728834%2C984.591068%20L400.728834%2C988.82483%20C400.728834%2C989.453606%20401.221589%2C989.956627%20401.837534%2C989.956627%20L401.988098%2C989.956627%20C402.604042%2C989.956627%20403.096798%2C989.453606%20403.096798%2C988.82483%20L403.096798%2C984.591068%20C403.096798%2C983.962291%20402.604042%2C983.45927%20401.988098%2C983.45927%20L401.837534%2C983.45927%20C401.221589%2C983.45927%20400.728834%2C983.962291%20400.728834%2C984.591068%20Z%20M403.3158%2C992.807081%20C403.3158%2C992.024603%20402.686168%2C991.381854%20401.91966%2C991.381854%20C401.153151%2C991.381854%20400.523519%2C992.024603%20400.523519%2C992.807081%20C400.523519%2C993.589558%20401.153151%2C994.232308%20401.91966%2C994.232308%20C402.686168%2C994.232308%20403.3158%2C993.589558%20403.3158%2C992.807081%20Z%22/%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.ui-alert-icon-danger:before {
content: '';
vertical-align: middle;
display: inline-block;
margin-right: 10px;
min-width: 16px;
width: 16px;
height: 16px;
background-color: var(--ui-alert-color);
-webkit-mask-image: url(data:image/svg+xml;charset=US-ASCII,%0A%3Csvg%20width%3D%2224px%22%20height%3D%2221px%22%20viewBox%3D%220%200%2024%2021%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28-322%2C%20-879%29%22%20fill%3D%22%23464a4e%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M345.546728%2C896.908333%20L335.587544%2C879.975%20C334.820197%2C878.675%20332.991625%2C878.675%20332.240605%2C879.975%20L322.281421%2C896.908333%20C321.497748%2C898.241667%20322.444687%2C899.925%20323.963054%2C899.925%20L343.881421%2C899.925%20C345.383462%2C899.925%20346.330401%2C898.241667%20345.546728%2C896.908333%20Z%20M332.485503%2C885.875%20C332.485503%2C885.125%20333.073258%2C884.525%20333.807952%2C884.525%20L333.987544%2C884.525%20C334.722238%2C884.525%20335.309993%2C885.125%20335.309993%2C885.875%20L335.309993%2C890.925%20C335.309993%2C891.675%20334.722238%2C892.275%20333.987544%2C892.275%20L333.807952%2C892.275%20C333.073258%2C892.275%20332.485503%2C891.675%20332.485503%2C890.925%20L332.485503%2C885.875%20Z%20M335.571217%2C895.675%20C335.571217%2C896.608333%20334.820197%2C897.375%20333.905911%2C897.375%20C332.991625%2C897.375%20332.240605%2C896.608333%20332.240605%2C895.675%20C332.240605%2C894.741667%20332.991625%2C893.975%20333.905911%2C893.975%20C334.820197%2C893.975%20335.571217%2C894.741667%20335.571217%2C895.675%20Z%22/%3E%0A%20%20%20%20%20%20%3C/g%3E%0A%3C/svg%3E);
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
}
.ui-alert-icon-info:before {
content: '';
vertical-align: middle;
display: inline-block;
margin-right: 10px;
min-width: 18px;
width: 18px;
height: 18px;
background: var(--ui-alert-color);
-webkit-mask-image: url(data:image/svg+xml;charset=US-ASCII,%0A%3Csvg%20width%3D%2218px%22%20height%3D%2218px%22%20viewBox%3D%220%200%2018%2018%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%3Cg%20fill%3D%22%2391711e%22%20fill-rule%3D%22evenodd%22%20%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M10.3309378%2C13%20L10.3309378%2C8.00284091%20L8%2C8.00284091%20L8%2C14%20L10%2C14%20L11%2C14%20L11%2C13%20L10.3309378%2C13%20Z%20M9%2C18%20C4.02943725%2C18%200%2C13.9705627%200%2C9%20C0%2C4.02943725%204.02943725%2C0%209%2C0%20C13.9705627%2C0%2018%2C4.02943725%2018%2C9%20C18%2C13.9705627%2013.9705627%2C18%209%2C18%20Z%20M9%2C6.41976706%20C9.7768545%2C6.41976706%2010.4066195%2C5.79000206%2010.4066195%2C5.01314755%20C10.4066195%2C4.23629305%209.7768545%2C3.60652804%209%2C3.60652804%20C8.2231455%2C3.60652804%207.59338049%2C4.23629305%207.59338049%2C5.01314755%20C7.59338049%2C5.79000206%208.2231455%2C6.41976706%209%2C6.41976706%20Z%20M7%2C13%20L7%2C14%20L8%2C14%20L8%2C13%20L7%2C13%20Z%20M7%2C7.95619799%20L7%2C8.95619799%20L8%2C8.95619799%20L8%2C7.95619799%20L7%2C7.95619799%20Z%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
}
.ui-alert-icon-forbidden:before {
content: '';
vertical-align: middle;
display: inline-block;
margin-right: 10px;
min-width: 18px;
width: 18px;
height: 18px;
background-color: var(--ui-alert-color);
-webkit-mask-image: url('./icons/ui-alert-icon-forbidden.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
/*endregion*/