/* Modal styles */
.modal_bg {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: none;
    z-index: 1000;   
    background-color:rgba(0,0,0,.25);
}
  
.modal_window {
    overflow:hidden;
    top:50%;
    left:50%;
    position: absolute;
    background: #fff;    
    padding: 24px;
    min-width: 200px;
    min-height: 32px;
    z-index: 1001;
    box-shadow: 0px 0px 200px 0px rgba(0, 0, 0, 0.25);
    border-radius: 1em;
    transform: translatez(0);
    display:none;
}
 
.modal_window h1, .modal_window h2, .modal_window h3, .modal_window h4, .modal_window h5 { margin-top:0; }
.modal_window .gutter { margin-top:1em; }
.modal_window.fixed { border-radius:0; }
.modal_window .modal_closeX { position: absolute; right: 20px; top: 20px; display: block; width: 32px; height: 32px; cursor: pointer; border-radius: 5px; transition: all .3s ease-in-out; z-index: 1; font-size: 24px; }
.modal_window .modal_closeX:hover { background: #ffffff11; }
.modal_window .modal_closeX:after { content: "\00d7"; color: #fff; font-size: 24px; line-height: 32px; font-weight: 700; position: absolute; width: 100%; text-align: center; }
.modal_window_open_animation { animation-duration: .25s; animation-fill-mode: both; animation-name: modalOpen; }
.modal_window_open_animation_left { animation-duration: .25s; animation-fill-mode: both; animation-name: modalOpenLeft; }
.modal_window_open_animation_right { animation-duration: .25s; animation-fill-mode: both; animation-name: modalOpenRight; }
.modal_window_open_animation_bottom { animation-duration: .25s; animation-fill-mode: both; animation-name: modalOpenBottom; }
.modal_window_close_animation { animation-duration: .25s; animation-fill-mode: both; animation-name: modalClose; }
.modal_window_close_animation_left { animation-duration: .25s; animation-fill-mode: both; animation-name: modalCloseLeft; }
.modal_window_close_animation_right { animation-duration: .25s; animation-fill-mode: both; animation-name: modalCloseRight; }
.modal_window_close_animation_bottom { animation-duration: .25s; animation-fill-mode: both; animation-name: modalCloseBottom; }
  
.modal_noscroll { position: fixed; width: 100%; overflow-y: hidden; }  
.modal_noscroll.modal_scrollbars { overflow-y: scroll; }
    
.modal_buttons { text-align: center; margin: 0 -10px; }
.modal_button_wrapper { margin:20px 10px 0 10px; }
.modal_buttons button { display:inline-block; }
.modal_window img { max-width:100%; height:auto; }

/* Keyframes */
@keyframes modalOpen { from { opacity: 0; /* transform: translate3d(0, 25%, 0); */ transform: translate3d(20px, 0, 0); } to { opacity: 1; transform: none; } }  
@keyframes modalOpenLeft { from { opacity: 0; transform: translate3d(-25%, 0, 0); } to { opacity: 1; transform: none; } }  
@keyframes modalOpenRight { from { opacity: 0; transform: translate3d(25%, 0, 0); } to { opacity: 1; transform: none; } }  
@keyframes modalOpenBottom { from { opacity: 0; transform: translate3d(0, 25%, 0); } to { opacity: 1; transform: none; } }  
@keyframes modalClose { from { opacity: 1; transform: none; } to { opacity: 0; /* transform: translate3d(0, 25%, 0); */ transform: translate3d(0, 0, 0); } }  
@keyframes modalCloseLeft { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-25%, 0, 0); } }  
@keyframes modalCloseRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(25%, 0, 0); } }  
@keyframes modalCloseBottom { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 25%, 0); } }
  
/* icon animations */
.modal_icon_wrapper { position:relative; min-width:150px; min-height:100px; overflow:hidden; text-align: center; margin-bottom: 15px; }  
.modal_icon_wrapper i { font-size:100px; }

/* Toast styles */
.toast_window {
    position:absolute;    
    background: #000000aa;
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:16px 12px;
    text-align:center;
    z-index:99999;
    top:0;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    width:auto;
    max-width:calc(100% - 32px);
    min-width:100px;  
    border-bottom-left-radius: .75em;
    border-bottom-right-radius: .75em;  
    padding-left:1.5em;
    padding-right:1.5em;
    display:flex;
    align-items: center;
    gap: 5px;
    animation: fadeInDown .3s ease-in-out;
}
.toast_window i { color:#0ace7d; font-size:24px; }
.toast_window.green { background:#0ace7d; }
.toast_window a { color:#333; font-weight: 400; }