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: #90c847 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: 150%;
    direction: ltr;
    text-align: left;
    color: #fff;
    font-size: 20pt;
    position: absolute;
    top: 60px;
    left: 20%;
    z-index: 2
}

.table {
    width: 28%;
    position: absolute;
    z-index: 2;
    top: -6px;
    right: 96px;
    background: rgba(5, 102, 56, 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: left;
    direction: ltr;
    margin-bottom: 14px;
    padding: 9px 11px
}

input[type=submit] {
    background: #91c847;
    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
}
#logo{
    max-height: 80px;
}
@media (max-width: 1280px) {
    .banner .message{
        top: 35px;
    }
}
@media (max-width: 768px) {
    #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: 0 !important;
        left: 0 !important
    }

    #textbody {
        display: none
    }

    .table, #footer, banner {
        position: relative !important
    }

    #footerdiv {
        display: inherit !important
    }

    .table {
        padding: 1px 0;
        top: -24px;
        right: 0;
        background: rgba(5, 102, 56, 1);
        left: 5%;
    }

    .done {
        left: 18% !important
    }
}