body, .ui-menu-item-wrapper{
    direction: rtl;
    font-family: 'Assistant', sans-serif;
}

body {
    background: rgba(57, 130, 206, 0.05);
}

#container1, #container2, #container h2, .dataTables_filter, .dataTables_length {
    background: #fff;
}

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

p {
    margin: 5px 0px;
}

h1 {
    font-size: 1.5em;
    margin: 0;
}

label{
    margin-right: 0px;
    color: rgb(113, 113, 113);
}

textarea, input {
    border: none;
    border-bottom: 1px solid rgb(183, 183, 183);
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none;
    -webkit-appearance: none;
    line-height: 1em;
    background: transparent;
    text-align: center;
}

button, input[type=submit] {
    cursor: pointer;
    font-family: 'Assistant', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 0.9em;
    font-weight: 600;
}


#container1 {
    width: 400px;
    position: absolute;
    top:50%;
    left: 50%;
    padding-bottom: 10px;
    border-radius: 5px;
    border: 1px solid rgb(56, 119, 177);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

#container2 {
    padding-bottom: 10px;
    border-radius: 5px;
    border: 1px solid rgb(56, 119, 177);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

#container2 form {
    padding: 0% 5%;
}

#container2 form p {
    margin: 20px 0px;
}

#container2 form label, #container form select {
    margin-left: 10px;
}

.ui-widget.ui-widget-content {
    overflow: hidden;
    padding-bottom: 10px;
    border-radius: 5px;
    border: 1px solid rgb(56, 119, 177) !important;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}


#container2 h2 {
    background: rgb(56, 119, 177);
    color: white;
    padding: 5px 2%;
}

#container1 h1 {
    background: rgb(56, 119, 177);
    color: white;
    padding: 5px 5%;
}

#container1 p {
    display: block;
    height: 30px;
    position: relative;
    margin: 25px 10% 25px 10%;
}

#container1 p > * {
    position: absolute;
    line-height: 31px;
    height: 31px;
    transition: ease 0.15s;
    -webkit-transition: ease 0.1s;
    -moz-transition: ease 0.1s;
    -ms-transition: ease 0.1s;
    -o-transition:  ease 0.1s;
}

#container1 p > input {
    border-radius: 0px;
    display: inline-block;
    width: 95%;
    padding: 0 2.5%;
    top: 0;
    right: 0;
    height: 100%;
    line-height: 5px;
    font-size: 0.9em;
}

p > input:focus, p > textarea:focus {
    border-bottom: 2px solid rgb(56, 119, 177);
}

#container1 input:focus ~ label {
    font-size: 0.7em;
    top:-50%;
    color: rgb(56, 119, 177);
}

#container1 p > input[type=submit] {
    width: 30%;
    border-radius: 3px;
    border: none;
    background: rgb(56, 119, 177);
    color: white;
    margin: 10px 0px;;
    margin-right: 70%;
}

#container1 p > input[type=submit]:hover {
    background: rgb(49, 103, 154);
}

#container2 p > input[type=submit] {
    width: 20%;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    border: none;
    background: rgb(56, 119, 177);
    color: white;
    margin: 10px 0px;;
    margin-right: 80%;
}

#container2 p > input[type=submit]:hover {
    background: rgb(49, 103, 154);
}

#container2 textarea#comments {
    width: 91%;
    margin-bottom: -10px;
}

ul#menu {
font-family: 'Assistant', sans-serif;
text-decoration: none !important;
padding: 10px;
}

.ui-menu-item-wrapper a {
    text-decoration: none !important;
}

#container h2 {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgb(56, 119, 177);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    margin-top: -20px;
    color: rgb(113, 113, 113);
}

#container h2 input[type=submit] {
    border-radius: 3px;
    border: none;
        background: rgb(56, 119, 177);
        color: white;
    width: 80px;
height: 25px;
}

#container h2 input {
    margin: 0 20px;
}

div#example_length.dataTables_length {
    padding: 10px;
border-radius: 5px;
border: 1px solid rgb(56, 119, 177);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 20px;
margin-top: 20px;
}

div#example_filter.dataTables_filter {
   padding: 5px;
border-radius: 5px;
border: 1px solid rgb(56, 119, 177);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 20px;
margin-top: 20px;
height: 30px; 
}

.dataTable {
    margin-top: 20px;
}

table#example.display.dataTable {
padding: 5px;
float: right;
border-radius: 5px;
border: 1px solid rgb(56, 119, 177);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 20px;
margin-top: 20px;
height: 30px;
background: white;
}

 tr.odd {
     background-color: rgba(204, 232, 255, 0.35) !important;
 }

tr.odd td.sorting_1 {
   background-color: rgba(67, 185, 255, 0.14) !important;
}

tr.even td.sorting_1 {
    background-color: rgba(204, 232, 255, 0.35) !important;
}

tr td a {
border-radius: 3px;
border: none;
background: rgb(56, 119, 177);
color: white;
width: 70px;
height: 25px;
line-height: 25px;
display: block;
text-decoration: none;
}

div.ta-info {
    width: 94%;
    padding: 20px;
    float: right;
    border-radius: 5px;
    border: 1px solid rgb(56, 119, 177);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    background: white;
}

div.ta-info h2 {
    color: rgb(56, 119, 177);
    border-bottom: 1px solid #d6d6d6;
    margin: 15px 0 10px 0;
}

div.ta-info table {
    width: 100%;
}

div.ta-info table tr {
    line-height: 35px;
    height: 35px;
}

div.ta-info table th {
    color: rgb(56, 119, 177);
}

div.ta-info table tr td {
    border-bottom: 1px solid #d6d6d6;
}


#container4 {
    border-radius: 5px;
    border: 1px solid rgb(56, 119, 177);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    margin-top: 0px;
    color: rgb(113, 113, 113);
    background: white;
}

#container4 h2 {
background: rgb(56, 119, 177);
color: white;
padding: 10px 2.5%;
font-size: 1.1em;
text-align: right;
}

#container4 form {
    text-align: right;
padding: 20px 30px;
}

#container4 form p > label:nth-child(2){
    float: left;
}

.select2-container{
    min-width: 20%;
}