/* -------------------- Alert -------------------- */

.alert{direction: rtl;position: fixed;display: flex;align-items: center;gap: 10px;top: 120px;left: 50%;transform: translate(-50%,0);border-radius: 4px;padding: 10px;font-size: 13px;z-index: 999;box-shadow: 0px 2px 20px #00000011;}
.alert.hidden{display: none}
.alert.success-badge{background-color: hsl(143, 85%, 96%);color: hsl(140, 100%, 27%);border: 1px solid hsl(145, 92%, 91%);}
.alert.danger-badge{background-color: hsl(0, 100%, 97%);color: hsl(360, 100%, 45%);border: 1px solid hsla(0, 100%, 45%, 0.2);}
.alert.info-badge{background-color: hsl(208, 100%, 97%);color: hsl(210, 92%, 45%);border: 1px solid hsl(221, 91%, 91%);}
.alert.warning-badge{background-color: hsl(49, 100%, 97%);color: hsl(31, 92%, 45%);border: 1px solid hsl(49, 91%, 91%);}
.alert-title{font-weight: 600;display: flex;gap: 10px;}
.close-alert{display: flex;justify-content: center;align-items: center;width: 25px;height: 25px;cursor: pointer;border-radius: 3px;transition: all 0.3s;}
.close-alert span{font-size: 16px;font-weight: 800;line-height: 1px;}
.alert.success .close-alert span{color: hsl(140, 100%, 27%);}
.alert.danger .close-alert span{color: hsl(360, 100%, 45%);}
.alert.info .close-alert span{color: hsl(210, 92%, 45%);}
.alert.warning .close-alert span{color: hsl(31, 92%, 45%);}
.alert.success .close-alert:hover{background-color: hsl(145, 92%, 91%);}
.alert.danger .close-alert:hover{background-color: hsl(0, 100%, 93%);}
.alert.info .close-alert:hover{background-color: hsl(221, 91%, 91%);}
.alert.warning .close-alert:hover{background-color: hsl(49, 91%, 91%);}
@media screen and (max-width: 480px){.alert{width: 90%;}.close-alert{padding: 5px 7px;}}