body{background: #DFE7E5!important; font-family:'Abadi MT Std'!important; margin:0; padding:0; direction: rtl!important;}

.box{max-width:1270px; width: 100%; padding:20px; background-color:#fff; border:1px solid #ccc; border-radius:5px; margin-top:25px; box-sizing:border-box; position: relative;}
  
.form-control{width:100% !important; margin-bottom: 20px;}

.sidenav .side-nav-inner{max-width: 180px; width: 100%; z-index: 1;  background: #eee; overflow-x: hidden; padding: 10px 5px; text-align: left; margin-left: auto;}
.sidenav a {padding: 6px 10px; text-decoration: none; font-size: 18px; line-height: 18px; color: #2196F3; display: block;}
  
.sidenav a:hover {color: #064579;}
.main {margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 22px; /* Increased text to enable scrolling */ padding: 0px 10px;}

#user_data_wrapper > div.dt-buttons > button { display: none; }

table {direction: rtl; /* font-family:'Droid Arabic Kufi'!important; */}

/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {max-width: 800px; width: 100%; margin: 0 auto;}

.middle-page{max-width: 380px; width: 100%; margin: 0 auto;display: flex; flex-wrap: wrap; justify-content: space-between;}
.middle-page > div.page{width: 48%; margin-bottom: 20px; position: relative;border: 2px solid #007bff;
padding: 10px; border-radius: 8px;}
.middle-page > div.page a{color: #007bff; display: inline-block; font-size: 16px; line-height: 16px;padding-left: 10px;}
.middle-page > div.page button.edit-btn{color: #007bff; position: absolute; left: 0; background: none; border: none;}
.middle-page > div.page.plus-btn{text-align: right; border:none; padding: 0;}
.middle-page .plus-btn .btn{width: 38px; height: 38px; line-height: 10px; text-align: center; font-weight: bold; font-size: 24px; padding: 10px 10px; display: inline-block;}
.box .table-responsive{overflow: inherit;}
.box .table-responsive .btn-danger{background:#007bff; color: #fff; border-color: #007bff;}
.box .table-responsive .btn-danger:hover, .box .table-responsive .btn-danger:focus{background: none; color: #007bff; box-shadow: none;}

/*****01-05-2020******/
header{background: #fff; padding: 20px 0; text-align: center;}
header .menu ul{margin-bottom: 0; padding: 0;}
header .menu ul li{display: inline-block; list-style: none; font-size: 18px; line-height: 18px; font-weight: bold;padding: 0 10px;}
.box h1{text-align: center; font-size: 32px; margin: 0 14% 20px; line-height: 34px; font-weight: bold;}
.login-form{max-width: 380px; width: 100%; margin: 0 auto;}
.login-form .btn-success{width: 100%;}
.login-form label a{margin-top: 10px;display: block; text-align: center;}
.table-responsive{max-width: 800px; width: 100%; margin: 0 auto; position: relative;}
.table-responsive select.form-control{width: auto !important; min-width: 200px;}
.table-responsive #user_data_filter label{display: block;}
.table-responsive #user_data_filter input{margin: 0.5em 0 0; display: block; height: 38px;}
.footer{background: #fff; padding: 20px 0; text-align: center; margin-top: 30px;}
.footer p{margin-bottom: 0; color: blue; font-size: 18px; line-height: 18px; font-weight: bold;}

/*****05-05-2020******/
.toggle-switch .switch {position: relative; display: inline-block; width: 60px; height: 34px;margin-bottom: 0;}
.toggle-switch .switch input {opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 25px;}
.toggle-switch .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white;transition: .4s; border-radius: 50%;}
.toggle-switch input:checked + .slider {background-color: #2196F3; }
.toggle-switch input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
.toggle-switch input:checked + .slider:before {transform: translateX(26px);}

.toggle-switch .slider.round {border-radius: 34px;}
.toggle-switch .slider.round:before {border-radius: 50%;}

@media(min-width: 768px) and (max-width: 1024px){
.box .table-responsive{overflow-x: inherit; margin-top: 70px;}
.box h1{max-width: 80%; width: 100%; margin: 0 auto 20px 0;}
}

@media(min-width: 768px){
.box .table-responsive{overflow-x: inherit;}
.sidenav {position: absolute; right: 0; top: 0;}
.table-responsive #user_data_filter{position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; text-align: center;
max-width: 220px; width: 100%;}
}

@media(max-width: 767px){
.sidenav {text-align: right; margin:-20px -20px 20px 0;} 
.sidenav a{font-size: 16px; line-height: 16px;}
.table-responsive #user_data_info{white-space:break-spaces;}
.table-responsive select.form-control{min-width: 100%;}
.box .table-responsive{overflow: auto;}
.table-responsive button#add{position: absolute; right: 0; top: 175px;}
.table-responsive table.table{margin-top: 70px !important;}
}
  
@media screen and (max-height: 450px) {
 .sidenav a {font-size: 18px;}
}
td {
  border: 1px solid;
}
/*hide delete header and column*/
#user_data > thead > tr > th:nth-child(5) { display:none; }
#user_data > tbody > tr > td:nth-child(5) { display:none; }
body > table > thead > tr > th:nth-child(5) { display:none; }

/*hide pagination*/
#user_data_paginate { display: none }

#user_data_filter > label { text-align: right; }