.popup {
     margin-top:20px;
     position:absolute;
     top: 0px;
     padding: 10px;
     opacity: 0;
     transition: opacity 0.6s;
     border-radius:20px;
 }

 .popup.success {background-color: #04AA6D;}
 .popup.info {background-color: #2196F3;}
 .popup.warning {background-color: #ff9800;}
 .popup.fail {background-color: #f44336;}

 .fadein
 {
     opacity: 1;
     transition: opacity 2s linear;
 }

 .closebtn {
     margin-left: 15px;
     color: white;
     font-weight: bold;
     float: right;
     font-size: 22px;
     line-height: 20px;
     cursor: pointer;
     transition: 0.3s;
 }

 .closebtn:hover {
     color: black;
 }


 /* The Modal (background) */
.modal
{
     position: fixed; /* Stay in place */
     z-index: 99; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

 /* Modal Content/Box */
 .modal-content {

     margin: 15% auto; /* 15% from the top and centered */
     border-radius: 15px;
     border: 1px solid #888;
     width: 80%; /* Could be more or less, depending on screen size */

 }

 .modal header
 {
     background-color:#2b2e39;
     padding: 20px;
     border-radius: 15px 15px 0px 0px;
 }

 .modal .content
 {
     background-color: #161924;
     color:red;
     padding: 20px;
 }

 .modal footer
 {
     background-color:#2b2e39;
     border-radius: 0px 0px 15px 15px;
     padding: 20px;
 }

 .modal .closebtn
 {
     color:black;
}

.modal .closebtn:hover
{
    color:red;
}