.o-bg-yellow{
    background-color:yellow;
}
.o-bg-orange {
    background-color: orange;
}
.o-bg-red {
    background-color: red;
}
.o-bg-blue {
    background-color: blue;
}
.o-bg-lightgray {
    background-color: lightgray;
}
.o-text-white{
    color: white;
}
.o-bg-green {
    background-color: green;
}

.alert{
    background: #ffdb9b;
    padding:20px 40px;
    margin-left:20px;
    min-width:100px;
    position:absolute;
    right:0px;
    top: 10px;
    overflow:hidden;
    border-radius:4px;
    border-left:8px solid #ffa502;
}

.alert.show{
    animation:show_slide 1s ease forwards;
}

.alert.hide {
    display:none;
}

body{
    overflow:hidden;
}

@keyframes show_slide{
   0%{
       transform: translateX(100%);
   }
   40% {
        transform: translateX(-10%);
   }
   80% {
        transform: translateX(0%);
   }
   100% {
        transform: translateX(-10px);
   }
}

.alert .fa-exclamation-circle {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #ce8500;
    font-size: 30px;
}

.alert .msg {
    padding: 0 40px;
    font-size: 18px;
    color: #ce8500;
    cursor: pointer;
}

.alert .close-btn{
    position:absolute;
    right:0px;
    top:50%;
    transform:translateY(-50%);
    background:#ffd080;
    padding:20px 18px;
    cursor:pointer;
}

.close-btn:hover{
    background:#ffc766;
}

.close-btn .fa-times {
    color: #ce8500;
    font-size: 22px;
    line-height: 40px;
}