/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 09.Ağu.2022, 17:27:19
    Author     : Ayberk
*/

 .alert {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        border-radius: 4px;
        background: #ccc;
        border: 1px solid #777;
        display: flex;
        margin-bottom: 20px;
    }
    .alert:before {
        content: "";
        width: 80px;
        position: relative;
        z-index: 999;
        background-color: #777;
        background-repeat: no-repeat;
        background-position: center 16px;
        background-size: 30px;
    }

    .alert-content {
        padding: 20px;
    }

    .alert-title {
        margin: 0;
        margin-bottom: 5px;
        font-size: 18px;
        padding: 0;
    }

    .alert-body p {
        margin: 0;
        font-size: 16px;
    }

    .alert-error {
        background-color: #fff5f5;
        border-color: #f78b8b;
    }
    .alert-error:before {
        background-color: #f78b8b;
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/error.svg");
    }
    .alert-error .alert-title {
        color: #f78b8b;
    }

    .alert-success {
        background-color: #f0f9ef;
        border-color: #7ebb7a;
    }
    .alert-success:before {
        background-color: #7ebb7a;
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/success.svg");
    }
    .alert-success .alert-title {
        color: #7ebb7a;
    }

    .alert-warning {
        background-color: #fff9f0;
        border-color: #ffc848;
    }
    .alert-warning:before {
        background-color: #ffc848;
        background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/warning.svg");
    }
    .alert-warning .alert-title {
        color: #ffc848;
    }