.error {
    background-color: #FF5549;
    width: 350px;
    border-radius: 5px;
    padding: 10px; /* Dodaje wewnętrzne odstępy */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Uwzględnia padding i border w szerokości kontenera */
}

.error_img {
    margin-bottom: 10px; /* Dodaje odstęp poniżej obrazka */
}

.error_title {
    color: #FFE4FF;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 75px;
}

.error_text {
    color: #FFF4F4;
    font-size: 14px;
    font-weight: 400;
    width: 80%;
    white-space: normal; /* Pozwala na zawijanie tekstu */
    word-wrap: break-word; /* Zawija długie słowa */
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 105px;
}

.error_x {
    color: #f6b5aa;
    cursor: pointer;
    font-size: 25px;
    align-self: flex-end; /* Wyrównuje przycisk do prawej */
    margin-top: 10px; /* Dostosowuje położenie w pionie */
    position: relative;
    bottom: 120px;
}

.error_x:hover {
    color: #FFF4F4;
    transition: color 0.3s linear;
}

.success {
    background-color: #32C682;
    width: 350px;
    border-radius: 5px;
    padding: 10px; /* Dodaje wewnętrzne odstępy */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Uwzględnia padding i border w szerokości kontenera */
}

.success_img {
    margin-bottom: 10px; /* Dodaje odstęp poniżej obrazka */
}

.success_text {
    color: #CAFBFF;
    font-size: 14px;
    font-weight: 400;
    width: 80%;
    white-space: normal; /* Pozwala na zawijanie tekstu */
    word-wrap: break-word; /* Zawija długie słowa */
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 105px;
}

.success_title {
    color: #ECFBFF;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 75px;
}

.success_x {
    color: #b5e1e5;
    cursor: pointer;
    font-size: 25px;
    align-self: flex-end; /* Wyrównuje przycisk do prawej */
    margin-top: 10px; /* Dostosowuje położenie w pionie */
    position: relative;
    bottom: 120px;
}
.success_x:hover {
    color: #f9feff;
    transition: color 0.3s linear;
}

.info {
    background-color: #26C0D3;   
    width: 350px;
    border-radius: 5px;
    padding: 10px; /* Dodaje wewnętrzne odstępy */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Uwzględnia padding i border w szerokości kontenera */
}

.info_img {
    margin-bottom: 10px; /* Dodaje odstęp poniżej obrazka */
}

.info_text {
    color: #C7FBFC;
    font-size: 14px;
    font-weight: 400;
    width: 80%;
    white-space: normal; /* Pozwala na zawijanie tekstu */
    word-wrap: break-word; /* Zawija długie słowa */
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 105px;
}

.info_title {
    color: #F8FCFE;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 75px;
}

.info_x {
    color: #9fc8c9;
    cursor: pointer;
    font-size: 25px;
    align-self: flex-end; /* Wyrównuje przycisk do prawej */
    margin-top: 10px; /* Dostosowuje położenie w pionie */
    position: relative;
    bottom: 120px;
}
.info_x:hover {
    color: #d2fbfc;
    transition: color 0.3s linear;
}

.warning {
    background-color: #EEBF31;   
    width: 350px;
    border-radius: 5px;
    padding: 10px; /* Dodaje wewnętrzne odstępy */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Uwzględnia padding i border w szerokości kontenera */
}

.warning_img {
    margin-bottom: 10px; /* Dodaje odstęp poniżej obrazka */
}

.warning_text {
    color: #FCFBCA;
    font-size: 14px;
    font-weight: 400;
    width: 80%;
    white-space: normal; /* Pozwala na zawijanie tekstu */
    word-wrap: break-word; /* Zawija długie słowa */
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 105px;
}

.warning_title {
    color: #F8F5FF;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    left: 75px;
    bottom: 75px;
}

.warning_x {
    color: #979679;
    cursor: pointer;
    font-size: 25px;
    align-self: flex-end; /* Wyrównuje przycisk do prawej */
    margin-top: 10px; /* Dostosowuje położenie w pionie */
    position: relative;
    bottom: 120px;
}
.warning_x:hover {
    color: #FCFBCA;
    transition: color 0.3s linear;
}

.errors {
    color: #ee5b43;
    text-align: center;
    text-shadow: 2px 2px 8px #000;
}