.notification {
    position: absolute;
    background-color: #ff8c00;
    text-align: center;
    border-radius: 12px;
    min-width: 17px;
    height: 17px;
    font-size: 15px;
    color: #fff;
    font-weight: 300;
    line-height: 15px;
    top: -10px;
    right: 10px;
    letter-spacing: -1px
}


/* Style invalid text input fields with a red border */
input.invalid,
select.invalid, textarea.invalid {
    border: 2px solid red;
}

.btn.is-default {
    border-color: red;
}

/* Initial styles for the alert */
.alert.slide-down {
    position: fixed;
    top: 0;
    right: -100%; /* Start off the screen to the right */
    transition: right 0.5s ease-in-out; /* Smooth slide animation */
    z-index: 9999; /* Make sure it's on top of other content */
    margin-top: 9%;
}

    /* Styles for when the alert is displayed */
    .alert.slide-down.show {
        right: 0; /* Slide in from the right */
    }
/*Pen styling*/
.container {
    margin-top: 50px;
}
.attention {
    animation: colorAndOpacityChange 2s infinite;
}

@keyframes colorAndOpacityChange {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .alert.slide-down {
        margin-top: 16%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .alert.slide-down {
        margin-top: 9%;
    }
}

@media screen and (min-width: 1600px) and (max-width: 3000px) {
    .alert.slide-down {
        margin-top: 6%;
    }
}

/*alert styling*/
.alert-success {
    border-color: #e6e6e6;
    border-left: 5px solid #00986a;
    background-color: #fff;
    color: #888;
}

.alert-info {
    border-color: #e6e6e6;
    border-left: 5px solid #00b3c8;
    background-color: #fff;
    color: #888;
}

.alert-warning {
    border-color: #e6e6e6;
    border-left: 5px solid #f9af2c;
    background-color: #fff;
    color: #888;
}

.alert-danger {
    border-color: #e6e6e6;
    border-left: 5px solid #c82630;
    background-color: #fff;
    color: #888;
}

.alert {
    border-radius: 6px;
    display: table;
    width: 30%;
    padding-left: 78px;
    position: relative;
    padding-right: 60px;
    border: 1px solid #e6e6e6;
}

    .alert .close {
        color: #888;
        opacity: 1;
        float: none;
        position: absolute;
        right: 18px;
        top: 50%;
        margin-top: -12px;
        font-size: 25px;
    }

    .alert .icon {
        text-align: center;
        width: 58px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #bdbdbd;
        padding-top: 15px;
        border-radius: 6px 0 0 6px;
    }

        .alert .icon i {
            font-size: 20px;
            color: #fff;
            left: 21px;
            margin-top: -10px;
            position: absolute;
            top: 50%;
        }

        .alert .icon img {
            font-size: 20px;
            color: #fff;
            left: 18px;
            margin-top: -10px;
            position: absolute;
            top: 50%;
        }
    /*============ colors ========*/
    .alert.alert-success .icon,
    .alert.alert-success .icon:after {
        border-color: none;
        background: #00986a;
    }

    .alert.alert-info .icon,
    .alert.alert-info .icon:after {
        border-color: none;
        background: #00b3c8;
    }

    .alert.alert-warning .icon,
    .alert.alert-warning .icon:after {
        border: none;
        background: #f9af2c;
    }

    .alert.alert-danger .icon,
    .alert.alert-danger .icon:after {
        border-color: none;
        background: #c82630;
    }