@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800';
*{margin:0;padding:0;box-sizing:border-box;}
ul{list-style:none}
a{text-decoration:none;color:#fff;transition:.3s}
@font-face {
    font-family:corbelb;
    font-weight: normal;
    src: url(../fonts/CORBELB.TTF);
}

@font-face{
    font-family:'Ebrima';
    src:url(../fonts/ebrima.ttf)
}

@font-face {
    font-family:calibrib;
    font-weight: normal;
    src: url(../fonts/CALIBRIB.TTF);
}

@font-face {
    font-family: "Ropa Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Ropa Sans"), local("RopaSans-Regular"), url("http://themes.googleusercontent.com/static/fonts/ropasans/v3/QnguTd82yEUxQZygH2gm8D8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}

*:focus { outline:none; }
.clear { clear:both; }

input, select, textarea {
    box-sizing:content-box;
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

/* links */
a{
    text-decoration:none;
    color:#FFFFFF;
    transition:0.3s all;
}
a:hover{
    color:#FFFFFF;
}

*, ul, li, h1, h2, p, b{
    font-weight:normal;
    margin:auto;
    padding:0px;
    list-style:none;
    line-height:1.5;
}

*{ margin:0px; padding:0px; }

body{
    background-color:#0b1024;
    background-image:radial-gradient(circle at top center, #16204a 0%, #0b1024 60%);
    background-attachment:fixed;
    margin:0;
    color:#fff;
}

.top-header{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:hidden;
    padding-top:0;
	height:0px;
}

img{
    filter:none;
    -webkit-filter:none;
}
#pages-se{
    margin:0 auto;
    position:relative;
    padding:0;
    overflow:hidden;
}

#main-pages{
    width:960px;
    margin:0px auto 30px;
}

a.logo-server{
    background:url(../images/logo.png) center center no-repeat;
    width:479px;
    height:170px;
    display:block;
    margin:0px auto;
    position:relative;
    top:20px;
}

.border-light-menu{
    background:url(../images/border-light.png) center center no-repeat;
    width:1200px;
    height:9px;
    margin:0px auto;
    position:relative;
    top:4px;
    opacity:0.8;
}

#navigation-bar{
    background:#121834;
    width:960px;
    height:68px;
    margin:0px auto;
    text-align:center;
    z-index:9999;
}

#navigation-bar > ul{
    border-radius:6px;
    position:relative;
}

#navigation-bar > ul > li{
    display:inline-block;
    border-right:1px solid #0e132b;
    border-left:1px solid #0e132b;
    margin-left:-4px;
    height:64px;
}

#navigation-bar > ul > li > a{
    padding:18px 20px;
    display:block;
    line-height:32px;
    font-family:'Ebrima';
    font-size:15px;
    font-weight:bold;
    color:#FFFFFF;
    text-shadow:1px 2px 1px #000;
    transition:all 400ms;
}

#navigation-bar > ul > li > a:hover{
    background-color:#0b1024;
    box-shadow:inset 0px 0px 10px 2px #0e132b;
    color:#FFFFFF;
    border-radius:5px;
}

#steps-server{
    margin:0px auto 0px -1px;
}

#steps-server > ul > li{
    float:left;
    margin-left:3px;
}

#steps-server > ul > li > a{
    height:100px;
    width:316px;
    display:block;
    opacity:0.8;
    transition:all 1s;
}

#steps-server > ul > li > a:hover{
    opacity:1;
    box-shadow:0 0 10px #0e132b;
}

#steps-server > ul > li > .step-1{
    background:url(../images/step/1.png) center center no-repeat;
}
#steps-server > ul > li > .step-2{
    background:url(../images/step/2.png) center center no-repeat;
}
#steps-server > ul > li > .step-3{
    background:url(../images/step/3.png) center center no-repeat;
}

/* Side Right */
#side-right{
    float:right;
	width:26%;
}

#side-right .top-box-right{
    background:#121834;
	padding:2px;
    width:250px;
    height:45px;
	text-align:center;
    font-weight:bold;
    color:#BD8200;
}

#side-right .top-box-right h1.head-title-right{
    font-family:'Ebrima';
    font-size:14px;
    color:#BD8200;
    text-shadow:1px 2px 1px #000;
    line-height:45px;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}

#side-right .middle-box-right{
    background:#0b1024;
    width:240px;
}

#side-right .middle-box-right .text{
    font-family:'Open Sans';
    text-align:center;
    font-size:12px;
    font-weight:bold;
    color:#FFFFFF;
    padding:10px;
    text-shadow:1px 1px 1px #000;
}

#side-right .footer-box-right{
    background:#121834;
	float:right;
    height:100%;
    width:100%;
}

/* Side Left */
#side-left{
    float:left;
    width:72%;
}

#side-left .top-box-left{
    background:#121834;
	text-align:center;
	font-weight:bold;
    color:#BD8200;
    width:690px;
    height:35px;
}

#side-left .top-box-left h1.head-title-left{
    font-family:'Ebrima';
    font-size:14px;
    color:#BD8200;
    text-shadow:1px 2px 1px #000;
    line-height:45px;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}

#side-left .middle-box-left{
    background:#0b1024;
    width:690px;
    padding:10px 0px;
}

#side-left .middle-box-left .text{
    font-family:'Open Sans';
    text-align:center;
    font-size:12px;
    font-weight:bold;
    color:#FFFFFF;
    padding:10px;
    text-shadow:1px 1px 1px #000;
}
#side-left .footer-box-left{
    background:#121834;
    height:14px;
    width:100%;
}

/* Footer */
#footer{
    width:100%;
    margin-top:30px;
}
#footer > .border-footer{
    background:#0b1024;
	padding:30px;
    width:1200px;
	text-align:center;
    height:9px;
    margin:0px auto;
    opacity:0.5;
	border-top:2px solid #0e132b;
}

#footer > .background-footer{
    background-color:#0b1024;
    width:1200px;
    height:100px;
    border-top:2px solid #0e132b;
}

#footer > .background-footer > .copyright{
    float:left;
    position:relative;
    top:30%;
    left:30px;
    background-color:#121834;
    padding:5px 21px;
    font-family:'Open Sans', sans-serif;
    font-size:11px;
    color:#FFFFFF;
    text-shadow:1px 2px 5px #000;
    border-radius:4px;
    border:1px solid #0e132b;
}

/* Inputs */
.input-text{
    background-color:#121834;
    border:1px solid #0e132b;
    height:34px;
    width:93%;
    margin-bottom:5px;
    text-align:center;
    color:#FFFFFF;
    line-height:30px;
    font-family:'Open Sans', sans-serif;
    font-size:12px;
}

.input-text:focus{
    background-color:#0b1024;
    border:1px solid #0e132b;
}

.input-submit{
    background:#121834;
    height:35px;
    width:103px;
    text-align:center;
    line-height:35px;
    color:#FFFFFF;
    border:1px solid #0e132b;
    font-family:'Open Sans', sans-serif;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.input-submit:hover{
    background:#0b1024;
}

/* Status */
.status{
    background-color:#121834;
    color:#FFFFFF;
    border:1px solid #0e132b;
    padding:5px;
    font-family:tahoma;
    font-size:11px;
    border-radius:5px;
}

.info{
    background-color:#0b1024;
    color:#FFFFFF;
    border:1px solid #0e132b;
    padding:5px;
    font-family:tahoma;
    font-size:11px;
    border-radius:5px;
}

.off{
    background-color:#0b1024;
    color:#ff4444;
    border:1px solid #0e132b;
    padding:3px 12px;
    border-radius:5px;
}

.on{
    background-color:#0b1024;
    color:#00ff99;
    border:1px solid #0e132b;
    padding:3px 12px;
    border-radius:5px;
}

/* Alerts */
.alert,
.alert-files{
    background-color:#121834;
    border:1px solid #0e132b;
    padding:5px;
    font-family:'Open Sans', sans-serif;
    font-size:11px;
    margin:7px auto;
    color:#FFFFFF;
    text-shadow:1px 2px 2px #000;
    border-radius:4px;
}

/* Titles */
.page-title,
h1, h2, h3{
    background:linear-gradient(to bottom,#121834,#0b1024);
    border:1px solid #0e132b;
    color:#FFFFFF;
    text-align:center;
    padding:10px;
    margin-bottom:10px;
    text-transform:uppercase;
    text-shadow:1px 1px 2px #000;
}
.page-body,.content,.page-box{
    background:#0b1024;
    border:1px solid #0e132b;
    padding:15px;
	color:#FFFFFF;
}
/* Tables */
table{
    width:100%;
    border-collapse:collapse;
    background:#0b1024;
    border:1px solid #0e132b;
}

th{
    background:#121834;
    color:#FFFFFF;
    padding:10px;
    border:1px solid #0e132b;
    text-transform:uppercase;
    font-size:12px;
}

td{
    padding:10px;
    border:1px solid #0e132b;
    color:#FFFFFF;
    font-size:12px;
}

tr:hover{
    background:rgba(18,24,52,0.6);
}

/* Gallery */
div.img{
    border:1px solid #0e132b;
}

div.img:hover{
    border:1px solid #121834;
}

div.img img{
    width:100%;
    height:auto;
}

div.desc{
    padding:15px;
    text-align:center;
    color:#FFFFFF;
}

.responsive{
    padding:8px;
    float:left;
    width:49.99999%;
    background-color:#000;
}

@media only screen and (max-width:700px){
    .responsive{
        width:49.99999%;
        margin:6px 0;
    }
}

@media only screen and (max-width:500px){
    .responsive{
        width:100%;
    }
}

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

/* Footer Boxes */
#footer-boxes{
    position:fixed;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    z-index:9999;
}

.footer-box{
    width:120px;
    height:45px;
    background:#121834;
    color:#FFFFFF;
    text-align:center;
    line-height:45px;
    border-radius:8px;
    border:1px solid #0e132b;
    font-family:Tahoma, Arial;
    font-size:14px;
    transition:all 0.3s ease;
}

.footer-box:hover{
    background:#0b1024;
    transform:translateY(-4px);
}
#content-wrapper{
    display:flex;
    gap:2%;
    width:100%;
}
/* موبايل */
@media(max-width:900px){
    #content-wrapper{flex-direction:column}
    #side-left,#side-right{width:100%}
}