/** COLORS */
:root {
    --color-default: #343a40;
    --color-green: #28a745;
    --color-blue: #007bff;
    --color-yellow: #ffc107;
    --color-red: #dc3545;
    --color-orange: #fd7e14;
    --color-purple: #563D7C;
    --color-black: #222222;

    --hover-color-green: #68c17c;
    --hover-color-blue: #4ca2ff;
    --hover-color-yellow: #ffd351;
    --hover-color-red: #e6717c;
    --hover-color-orange: #fda45a;
    --hover-color-purple: #8877a3;
    --hover-color-black: #444444;
    --hover-duration: 0.3s;

    --dark-color-green: #1c7430;
    --dark-color-blue: #0056b2;
    --dark-color-yellow: #b28704;
    --dark-color-red: #9a2530;
    --dark-color-orange: #b1580e;
    --dark-color-purple: #3c2a56;

    --gradient-green: linear-gradient(to right, #42E695 0%, #3BB2B8 50%, #42E695 100%);
    --gradient-blue: linear-gradient(to right, #17EAD9 0%, #6078EA 50%, #17EAD9 100%);
    --gradient-red: linear-gradient(to right, #622744 0%, #C53364 50%, #622744 100%);
    --gradient-yellow: linear-gradient(to right, #FCE38A 0%, #F38181 50%, #FCE38A 100%);
    --gradient-purple: linear-gradient(to right, #8F9ECD 0%, #435180 50%, #6075B8 100%);
    --gradient-black: linear-gradient(90deg, rgba(52,58,64,1) 0%, rgba(112,117,121,1) 50%, rgba(173,176,178,1) 100%);
}

/** AJAX-MESSAGE */
.ajax-message {
    position: fixed;
    padding: 20px 20px 0 0;
    z-index: 998;
    top: 0;
    right: 0;
    max-width: 100%;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

.ajax-message .message {
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 500;
    overflow: hidden;
    border: none;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 15px 20px 15px;
    background: #333333;
    margin-bottom: 15px;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
}

.ajax-message .message:before {
    flex-basis: 0;
    margin: -4px 5px 0 0 !important;
    font-size: 1.2em;
}

.ajax-message .message-time {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4%;
    height: 5px;
    background: rgba(0, 0, 0, 0.5);
}

.ajax-message .message.success {
    background: var(--color-green);
}

.ajax-message .message.info {
    background: var(--color-blue);
}

.ajax-message .message.warning {
    background: var(--color-yellow);
    color: #333333;
    text-shadow: none;
}

.ajax-message .message.error {
    background: var(--color-red);
}