/* modal alert */

/*- dark background -*/
#dark_screen {
position: fixed;
width:100%;
height:100%;
z-index:15;
background:#000;
opacity: 0.6;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.popup_window {
top: 27%;
left: 38%;
right: 38%;
min-width: 160px;
margin: 0;
padding: 0;
font-size: 14px;
font-family: 'Tahoma', Arial, sans-serif;
z-index: 20;
position: fixed;
border: 1px solid #aaa;
background: #fffcf0;
display: none;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;

-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
}

/* button close window */
.close_alert {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}

.close_alert:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.close_alert:hover {
background-color: rgba(250, 160, 100, 0.8);
}

.popup_window .top_size {
width:100%;
height: 4px;
background: #8cf;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
}

.popup_window .title_alert {
width:100%;
height: 20px;
background: #8cf;
color: #fff;
font-size: 14px;
text-align: left;
font-weight:500;
font-style:italic;
font-family: Arial;
border-bottom:1px solid #aaa;
text-shadow: 1px 1px 3px #adadad;
}

.popup_window .text_alert {
margin-top:20px;
margin-bottom:25px;
margin-left:10px;
margin-right:10px;
color: #444;
text-align: center;
font-weight: 500;
font-size:14px;
font-family: 'Tahoma', Arial, sans-serif;
}

@media screen and (max-width: 1100px) {
.popup_window {left: 33%;right: 33%;}
}

@media screen and (max-width: 800px) {
.popup_window {left: 25%;right: 25%;}
}

@media screen and (max-width: 550px) {
.popup_window {left: 15%;right: 15%;}
}

@media screen and (max-width: 320px) {
.popup_window {left: 5%;right: 5%;}
}

.popup_window .ok_button {
margin-top:0;
margin-bottom: 20px;
height:24px;
text-align:center;
font-family:Arial;
font-weight:bold;
font-size:14px;
}
.popup_window .ok_button a {
text-decoration:none;
background: #f6f6f6;
background: -moz-linear-gradient(top, #e8e8e8 0%, #f0f0f0 45%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8),color-stop(45%,#f0f0f0), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #e8e8e8 0%, #f0f0f0 45%, #ffffff 100%);
background: -o-linear-gradient(top, #e8e8e8 0%, #f0f0f0 45%, #ffffff 100%);
background: -ms-linear-gradient(top, #e8e8e8 0%, #f0f0f0 45%, #ffffff 100%);
background: linear-gradient(top, #e8e8e8 0%, #f0f0f0 45%, #ffffff 100%);
padding: 4px 25px;
color: #666;
border: 1px solid #d0d0d0;
border-radius: 12px;
}
.popup_window .ok_button a:hover {
background:#ffd0a0;
background: -moz-linear-gradient(top, #ffd0a0 0%, #fffde2 55%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd0a0),color-stop(55%,#fffde2), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffd0a0 0%, #fffde2 55%, #ffffff 100%);
background: -o-linear-gradient(top, #ffd0a0 0%, #fffde2 55%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffd0a0 0%, #fffde2 55%, #ffffff 100%);
background: linear-gradient(top, #ffd0a0 0%, #fffde2 55%, #ffffff 100%);
color:#37a;
cursor: pointer;
}
.popup_window .ok_button a:active {
    color: #e44;
  background:#fec;
}
