.alertborderdiv {
    width: 406px;
    height: 86px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    z-index: 2;

    position: fixed;
    top: -100px;
    left: calc( 50% - 203px );

    overflow: hidden;

    transition: top 0.5s;

    /* transition: top 3s; */
}

.alertborder {
    width: 0;
    height: 86px;
    background-color: #4386f4;
    /* transition: top 3s; */
    /* border-radius: 8px; */

    /* position: fixed;
    top: -100px;
    left: calc( 50% - 203px ); */

    /* z-index: 2; */

}

.alertdiv {
    width: 400px;
    height: 80px;
    background-color: white;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    z-index: 3;

    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: -100px;
    left: calc( 50% - 200px );

    transition: top 0.5s;
}

@media screen and (max-width: 500px) {

    .alertborderdiv {
        width: calc( 90% + 6px);
        left: calc( 5% - 3px );
    }

    .alertborder {
        left: calc( 5% - 3px );
    }

    .alertdiv {
        width: 90%;
        left: 5%;
    }
}

.alertdiv-titlediv {
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.show {
    /* transition: top 0.5s; */
    top: 10px;
}

.showborder {
    /* transition: width 3s; */
    transition: width 1s, top 0.5s;
    top: 7px;
}