body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Tajawal', sans-serif;
font-size: 14pt;
}
#bg{
width: 0;
height: 0;
border-style: solid;
border-color: #7d8a99 transparent transparent transparent;
position: absolute;
left: 0;
top: 0;
z-index: 0
}
.header{
float: left;
width: 100%;
position: relative;
z-index: 2
}
a{
text-decoration: none
}
.banner{
width: 100%;
position: relative;
z-index: 3;
float: left;
}
.banner img{
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 2
}
.banner .message{
line-height: 200%;
direction: rtl;
text-align: right;
color: #fff;
font-size: 20pt;
position: absolute;
top: 80px;
right: 40%;
z-index: 2
}
.table{
width: 28%;
position: absolute;
z-index: 2;
top: 130px;
right: 96px;
background: rgba(52, 72, 94, 0.83)
}

.table form{
margin: 25px;
margin-bottom: 0;
text-align: center
}
.table form img{
visibility: hidden
}
input, select{
font-family: 'Tajawal', sans-serif;
box-sizing: border-box;
box-shadow: inset 2px 5px 5px rgba(0, 0, 0, 0.25);
border: none;
width: 100%;
color: #3e3e3e;
outline: none;
text-align: right;
direction: rtl;
margin-bottom: 14px;
padding: 9px 11px
}
input[type=submit]{
background: #f05966;
color: white;
text-align: center;
box-shadow: none;
margin-bottom: 0;
cursor: pointer
}
input[type=submit]:active {
 box-shadow: 1px 1px 3px #000
}
#bannermobile{
display: none
}
@media (max-width: 768px){
.bgdecor{
opacity: 0.3
}
#lang a{
color: #222 !important
}
#bannermobile{
display: inherit
}
#bannerweb, .banner .message{
display: none
}
#logo{
width: 100px
}
.table{
width: 90%;
right: 5%;
}
#lang{
margin: 26px 0 0 8px !important
}
#footer{
margin: 5% !important;
margin-top: -20px;
top: 50px !important;
left: 0 !important
}
#footer a{
font-size: 20pt !important
}
#textbody{
display: none
} 
.table, #footer, banner{
position: relative !important
}
#footerdiv{
display: inherit !important
}
.table {
    padding: 1px 0;
    top: 30px;
    right: 0;
        background: rgba(52, 72, 94, 1);
	left: 5%;
}
.done{
left: 18% !important
}
}