*{
    font-family: 'Almarai', sans-serif; 
}
html{
    background-color: #115412;
}

body{
    background-color: #115412;
}
th{
    text-align: center;
}
.container{

    margin: 0 a;

}
#header{
    width: 100%;
    height: 150px;
    width: 100%;
    margin-bottom: 20px;
}
.navbar-default{
    display: none;
}
#navbar{
    float: right;
    width: 100%;
}
#actiev {
    background: black;
    border-bottom-right-radius: 10px;
}
#actiev2 {
    background: black;
    border-bottom-left-radius: 10px;
}
#navbar ul{ 
    text-decoration: none !important;
    list-style: none;
    width: 100%;
    border-top: 10px solid #c00000;
}
#navbar ul li{
    float: right;
    padding: 8px;
    background: black;
}
#navbar ul li:hover{
    background: #c00000;
}
#navbar a{
    
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
#logo{
    float: left;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 5px 6px black;
}
#title{
    float: right;
}
#contentmain{
    width: 70%;
    height: auto;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 10px black;
    margin: 0 auto;
}
#contentmain form,#show-link{
    width: 50%;
    margin: 59px auto;
    direction: rtl;
    padding: 10px;
}
#contentmain input[type='file'] {
    margin: 10px;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 6px black;

}
#contentmain input[type='submit'],input[type='text'],button,#button my{
    margin: 10px;
    border-radius: 5px;
    box-shadow: 5px 6px black;
    text-decoration: none;
}
#contentmain.btn btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 5px 6px black;
    text-decoration: none;
}
#contentmain label {
    color: white;
    font-weight: bold;
}
#show-link
{

}

footer{
	width: 100%;
    height: 40px;
    line-height: 40px;;
}
.fot h3{    
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 5px;
}
td{
    vertical-align: middle !important;
}
#loader{
    text-align: center !important;
}
.navbar-default{
    background: #115412 !important;
    direction: rtl;
    border: 0;
}
.navbar-default .navbar-toggle{
    background-color: #000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #000;
}
#bs-example-navbar-collapse-1
{
    text-align: right;
}
#amtdadat{
    text-align: center;
    width: 50%;
    margin: -45px auto 10px auto;
}
#amtdadat i{
    
    font-size: 40px;
}
#imgView{
    margin: 0 auto;
    width: 90%;
    text-align: center;
    border: 2px solid white;
    border-radius: 5px;
}
#imgView img{
    margin-top: 20px;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 10px black;
}
#myFiles{
    background-color: beige;
    margin: 0 auto;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 10px black;
    direction: rtl;
    width: 60%;
}
#myFiles th{
    background-color: #000;
    color: white;
    font-weight: bold;
}
#myFiles td{
    text-align: center;
    direction: ltr;
}
#myFiles i{
    font-size: 25px;
    cursor: pointer;
}
.wname{
    width: 100%;
}
#profile{
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
}
#About{
    margin: 0 auto;
    width: 80%;
    height: auto;
    padding: 5px;
}
#logonsf img{
    text-align: center;
    margin: 0 auto;
    width: 290px;
    height: auto;

}
#ali{
    text-align: center;
    width: 30%;
    height: 425px;
    border: 3px solid #000;
    border-radius: 20px;
    background: #ecb0b040;
    float: right;
    margin-right: 80px;
}
#ali img{
    text-align: center;
    width: 200px;
    height: 200px;
    direction: rtl;
    border: 3px solid #fff;
    border-radius: 70px;
    background: #fff;
    margin: 10px auto;
}
#ali i{
    font-size: 30px;
    color: black;
}
#ali i:hover{
    font-size: 30px;
    color: green;
}
#ali h2{
    font-size: 30px;
    color: wheat;
    font-weight: bold;
}
#ali h3{
    font-size: 20px;
    color: black;
}
#raad{
    text-align: center;
    width: 30%;
    height: 425px;
    border: 3px solid #000;
    border-radius: 20px;
    background: #ecb0b040;
    float: left;
    margin-left: 80px;
}
#raad img{
    text-align: center;
    width: 200px;
    height: 200px;
    direction: rtl;
    border: 3px solid #fff;
    border-radius: 70px;
    background: #fff;
    margin: 10px auto;
}
#raad i{
    font-size: 30px;
    color: black;
}
#raad i:hover{
    font-size: 30px;
    color: green;
}
#raad h2{
    font-size: 30px;
    color: wheat;
    font-weight: bold;
}
#raad h3{
    font-size: 20px;
    color: black;
}
#ContactUs{
    width: 40%;
    margin: 0 auto;
    direction: rtl;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 10px black;
}
#ContactUs form{
    width: 90%;
    padding: 10px;
    margin: 0 auto;
}
#ContactUs input[type='text'],input[type='email'], select ,textarea.form-control {
    height: auto;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 5px 6px black;
    border: 2px solid white;
}
#ContactUs label{
    color: white;
}
#About{
    width: 60%;
    margin: 0 auto;
    direction: rtl;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 10px black;
    padding: 20px;
}
#Rules{
    color: white;
    background-color: black;
    padding: 20px;
    width: 60%;
    margin: 0 auto;
    direction: rtl;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 10px black;
    }
#Rules h3{
    direction: rtl;
    color: white;
}
#Rules li{
    font-size: 13px;
}



            @media screen and (min-width: 300px)and (max-width: 700px) {
              /* For tablets: */
                #logo{
                    position: absolute;
                    left: 20px;
                    top: -60px;
                    padding: 0;
                    border-radius: none;
                    box-shadow: none;
                }
                #logo img{
                    width: 70px;
                    height: 100%;
                }
                #header {
                    height: 85px;
                }
                #contentmain{
                    width: 90%;
                    height: auto;
                }
                #contentmain form, #show-link {
                    width: 80%;
                    padding: 0;
                    margin-top: 15px;
                }
                #amtdadat{
                    width: 90%;
                    margin: -45px auto 10px auto;
                }
                #amtdadat i{
                    font-size: 30px;
                }
                #show-link{
                    margin-top: -80px;
                    margin: 20px auto;
                }
                #navbar{
                    display: none;
                }
                .navbar-default{
                    display:inherit;
                }
                .navbar-default .navbar-nav > li > a {
                    color: #fff;
                    font-size: 20px;
                    padding: 13px;
                }
                #myFiles{
                    width: 95%;
                }
                .datehide{
                    display: none;
                }
                .wname{
                    width: 73px;
                }
                #About
                {
                    width: 90%;

                }
                #ali{
                    width: 100%;
                    margin: 0;
                    height: auto;
                    float: none;
                    padding: 0;

                }
                #raad{
                    width: 100%;
                    margin: 0 0 20px 0;
                    height: auto;
                    float: none;
                    padding: 0;
                }
                #ContactUs{
                    width: 95%;
                    border: 1px solid white;
                    box-shadow: 5px 5px black;
                }
                #ContactUs form{
                    width: 90%;
                    padding: 5px;
                }
                #ContactUs input[type='text'],input[type='email'], select ,textarea.form-control {
                    margin: 5px;
                    border: 1px solid white;
                }
                #Rules{
                    padding: 5px;
                    width: 95%;
                    border: 1px solid white;
                    box-shadow: 5px 5px black;
                }
                #Rules li{
                    font-size: 13px;
                }
}