.jqifade {position: absolute;background-color: #777777;}

div.jqi {width: auto;max-width: 98%;position: absolute;background-color: #ffffff;font-size: 11px;text-align: left;border: solid 1px #eeeeee;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;padding: 7px;top:8vh !important;}
div.jqi .jqiclose {position: absolute;top: -1px;Left: -1px;width: 1.5vw}
div.jqi .jqistate {background-color: #fff;}
div.jqi .jqititle {padding: 0 10px;line-height: 20px;text-align: right;font-size: 11px;font-weight: bold}
div.jqi .jqimessage {padding: 0;line-height: 20px;color: #444444;}
div.jqi .jqibuttons {text-align: right;margin: 0 -7px -7px -7px;border-top: solid 1px #e4e4e4;background-color: #f4f4f4;border-radius: 0 0 6px 6px;-moz-border-radius: 0 0 6px 6px;-webkit-border-radius: 0 0 6px 6px;}
div.jqi .jqibuttons button {margin: 0;padding: 10px 20px;background-color: transparent;font-weight: normal;border: none;border-left: solid 1px #e4e4e4;color: #777;font-size: 11px;cursor: pointer;transition: all 0.5s ease-out;}
div.jqi .jqibuttons button.jqidefaultbutton {color: #489afe;font-family: 'Vazir';}
div.jqi .jqibuttons button:focus {outline: none}
div .jqi .jqibuttons button:hover {color: #e74c3c;outline: none;transform: scale(0.9);border-left: solid 1px #FF9E80}
.jqiwarning .jqi .jqibuttons {background-color: tomato;}


.LoadingJModal {background-color: #dbf7f9;color:#0073CC;text-align: right;border-radius: 10px;box-shadow: 0 1px 2px #ACDDE1;filter:alpha(opacity=90);opacity:0.9;padding: 10px 20px;position: fixed;left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}


/* close icon */
.nav-icon {cursor: pointer;display: inline-block;vertical-align: middle;width: 1.5em;transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;background:white;border-radius:5px;padding: 0 4px;}
.nav-icon:hover {background:#e74c3c}
.nav-icon:after,.nav-icon:before,.nav-icon span {display: block;transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;content: '';margin: 4px 0;height: 4px;border-radius: 3px;background-color:#37474F;}

.nav-icon:before {transform: translateY(8px) rotate(135deg);-webkit-transform: translateY(8px) rotate(135deg);-moz-transform: translateY(8px) rotate(135deg);}
.nav-icon:after {transform: translateY(-8px) rotate(-135deg);-moz-transform: translateY(-8px) rotate(-135deg);-webkit-transform: translateY(-8px) rotate(-135deg);}

.nav-icon:hover:before {transform: translateY(8px) rotate(45deg);-webkit-transform: translateY(8px) rotate(45deg);-moz-transform: translateY(8px) rotate(45deg);background-color:white}
.nav-icon:hover:after {transform: translateY(-8px) rotate(-45deg);-moz-transform: translateY(-8px) rotate(-45deg);-webkit-transform: translateY(-8px) rotate(-45deg);background-color:white}

.nav-icon span, .nav-icon:hover span {transform: scale(0);-moz-transform: scale(0);-webkit-transform: scale(0);}

@media only screen and (max-width:1024px) {
        div.jqi {top:5vh !important}

}