/* buttons custom */
.btn:focus,.btn:hover,a{
    text-decoration:none
}
.btn{
	font-family: 'majalla', sans-serif;
	font-size: 18px;
    display:inline-block;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    border:1px solid transparent;
    line-height:1.5;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
}
@media screen and (prefers-reduced-motion:reduce){
    .btn{
        transition:none
    }
}
.btn.focus,.btn:focus{
    outline:0
}
.btn.disabled,.btn:disabled{
    opacity:.65
}
.btn:not(:disabled):not(.disabled){
    cursor:pointer
}
a.btn.disabled,fieldset:disabled a.btn{
    pointer-events:none
}
.btn-primary{
    color:#fff;
    border-color:#007bff
}
.btn-primary:hover{
    color:#fff;
    background-color:#0069d9;
    border-color:#0062cc
}
.btn-primary.disabled,.btn-primary:disabled{
    color:#fff;
    background-color:#007bff;
    border-color:#007bff
}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{
    color:#fff;
    background-color:#0062cc;
    border-color:#005cbf
}
.btn-secondary{
    color:#fff;
    border-color:#6c757d
}
.btn-secondary:hover{
    color:#fff;
    background-color:#5a6268;
    border-color:#545b62
}
.btn-secondary.disabled,.btn-secondary:disabled{
    color:#fff;
    background-color:#6c757d;
    border-color:#6c757d
}
.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{
    color:#fff;
    background-color:#545b62;
    border-color:#4e555b
}
.btn-success{
    color:#fff;
    border-color:#28a745
}
.btn-success:hover{
    color:#fff;
    background-color:#218838;
    border-color:#1e7e34
}
.btn-success.disabled,.btn-success:disabled{
    color:#fff;
    background-color:#28a745;
    border-color:#28a745
}
.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{
    color:#fff;
    background-color:#1e7e34;
    border-color:#1c7430
}
.btn-info{
    color:#fff;
    border-color:#17a2b8
}
.btn-info:hover{
    color:#fff;
    background-color:#138496;
    border-color:#117a8b
}
.btn-info.disabled,.btn-info:disabled{
    color:#fff;
    background-color:#17a2b8;
    border-color:#17a2b8
}
.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{
    color:#fff;
    background-color:#117a8b;
    border-color:#10707f
}
.btn-warning{
    border-color:#ffc107
}
.btn-warning:hover{
    color:#212529;
    background-color:#e0a800;
    border-color:#d39e00
}
.btn-warning.disabled,.btn-warning:disabled{
    color:#212529;
    background-color:#ffc107;
    border-color:#ffc107
}
.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{
    color:#212529;
    background-color:#d39e00;
    border-color:#c69500
}
.btn-danger{
    color:#fff;
    border-color:#dc3545
}
.btn-danger:hover{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130
}
.btn-danger.disabled,.btn-danger:disabled{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545
}
.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{
    color:#fff;
    background-color:#bd2130;
    border-color:#b21f2d
}
.btn-light{
    border-color:#f8f9fa
}
.btn-light:hover{
    color:#212529;
    background-color:#e2e6ea;
    border-color:#dae0e5
}
.btn-light.disabled,.btn-light:disabled{
    color:#212529;
    background-color:#f8f9fa;
    border-color:#f8f9fa
}
.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{
    color:#212529;
    background-color:#dae0e5;
    border-color:#d3d9df
}
.btn-dark{
    color:#fff;
    border-color:#343a40
}
.btn-dark:hover{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124
}
.btn-dark.disabled,.btn-dark:disabled{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40
}
.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{
    color:#fff;
    background-color:#1d2124;
    border-color:#171a1d
}
.btn-outline-primary{
    color:#007bff;
    background-color:transparent;
    background-image:none;
    border-color:#007bff
}
.btn-outline-primary.active,.btn-outline-primary:hover{
    color:#fff;
    background-color:#007bff;
    border-color:#007bff
}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{
    color:#007bff;
    background-color:transparent
}
.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{
    color:#fff;
    background-color:#007bff;
    border-color:#007bff
}
.btn-outline-secondary{
    color:#6c757d;
    background-color:transparent;
    background-image:none;
    border-color:#6c757d
}
.btn-outline-secondary:hover{
    color:#fff;
    background-color:#6c757d;
    border-color:#6c757d
}
.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{
    color:#6c757d;
    background-color:transparent
}
.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{
    color:#fff;
    background-color:#6c757d;
    border-color:#6c757d
}
.btn-outline-success{
    color:#28a745;
    background-color:transparent;
    background-image:none;
    border-color:#28a745
}
.btn-outline-success:hover{
    color:#fff;
    background-color:#28a745;
    border-color:#28a745
}
.btn-outline-success.disabled,.btn-outline-success:disabled{
    color:#28a745;
    background-color:transparent
}
.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{
    color:#fff;
    background-color:#28a745;
    border-color:#28a745
}
.btn-outline-info{
    color:#17a2b8;
    background-color:transparent;
    background-image:none;
    border-color:#17a2b8
}
.btn-outline-info:hover{
    color:#fff;
    background-color:#17a2b8;
    border-color:#17a2b8
}
.btn-outline-info.disabled,.btn-outline-info:disabled{
    color:#17a2b8;
    background-color:transparent
}
.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{
    color:#fff;
    background-color:#17a2b8;
    border-color:#17a2b8
}
.btn-outline-warning{
    color:#ffc107;
    background-color:transparent;
    background-image:none;
    border-color:#ffc107
}
.btn-outline-warning:hover{
    color:#212529;
    background-color:#ffc107;
    border-color:#ffc107
}
.btn-outline-warning.disabled,.btn-outline-warning:disabled{
    color:#ffc107;
    background-color:transparent
}
.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{
    color:#212529;
    background-color:#ffc107;
    border-color:#ffc107
}
.btn-outline-danger{
    color:#dc3545;
    background-color:transparent;
    background-image:none;
    border-color:#dc3545
}
.btn-outline-danger:hover{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545
}
.btn-outline-danger.disabled,.btn-outline-danger:disabled{
    color:#dc3545;
    background-color:transparent
}
.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545
}
.btn-outline-light{
    color:#f8f9fa;
    background-color:transparent;
    background-image:none;
    border-color:#f8f9fa
}
.btn-outline-light:hover{
    color:#212529;
    background-color:#f8f9fa;
    border-color:#f8f9fa
}
.btn-outline-light.disabled,.btn-outline-light:disabled{
    color:#f8f9fa;
    background-color:transparent
}
.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{
    color:#212529;
    background-color:#f8f9fa;
    border-color:#f8f9fa
}
.btn-outline-dark{
    color:#343a40;
    background-color:transparent;
    background-image:none;
    border-color:#343a40
}
.btn-outline-dark:hover{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40
}
.btn-outline-dark.disabled,.btn-outline-dark:disabled{
    color:#343a40;
    background-color:transparent
}
.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40
}
.btn-link,.btn-link:hover{
    background-color:transparent
}
.btn-link{
    font-weight:400;
    color:#007bff
}
.btn-link:hover{
    color:#0056b3;
    text-decoration:underline;
    border-color:transparent
}
.btn-link.disabled,.btn-link:disabled{
    color:#6c757d;
    pointer-events:none
}
.btn-group-lg>.btn,.btn-lg{
    padding:.5rem 1rem;
    font-size:1.25rem;
    line-height:1.5;
    border-radius:.3rem
}
.btn-group-sm>.btn,.btn-sm{
    padding:.25rem .5rem;
    font-size:.875rem;
    line-height:1.5;
    border-radius:.2rem
}
.btn-block{
    display:block;
    width:100%
}
.btn-block+.btn-block{
    margin-top:.5rem
}
.btn-radius{
    border-radius:100px!important
}
.btn{
    font-weight:700;
    letter-spacing:1px;
    border-radius:2px;
    padding:13px 28px;
    text-shadow:1px 1px 1px rgba(0,0,0,.14);
    text-transform:uppercase
}
.btn-sm{
    font-size:11px;
    font-weight:600;
    padding:11px 25px
}
.btn-lg{
    padding:18px 49px
}
.btn-xs{ 
    font-size:10px;
    padding:8px 14px
}
.btn-primary{
    background:#5a7ce2;
    background:-moz-linear-gradient(-45deg,#5a7ce2 0,#8283e8 50%,#5c5de8 51%,#565bd8 71%,#575cdb 100%);
    background:-webkit-linear-gradient(-45deg,#5a7ce2 0,#8283e8 50%,#5c5de8 51%,#565bd8 71%,#575cdb 100%);
    background:linear-gradient(135deg,#5a7ce2 0,#8283e8 50%,#5c5de8 51%,#565bd8 71%,#575cdb 100%);
    background-size:400% 400%
}
.btn-secondary{
    background:#797b7f;
    background:-moz-linear-gradient(-45deg,#797b7f 0,#b5b8bf 50%,#8e9397 51%,#8e9397 71%,#828589 100%);
    background:-webkit-linear-gradient(-45deg,#797b7f 0,#b5b8bf 50%,#8e9397 51%,#8e9397 71%,#828589 100%);
    background:linear-gradient(135deg,#797b7f 0,#b5b8bf 50%,#8e9397 51%,#8e9397 71%,#828589 100%);
    background-size:400% 400%
}
.btn-success{
    background:#05ac50;
    background:-moz-linear-gradient(-45deg,#05ac50 0,#21dd72 50%,#05c44e 51%,#05ac50 71%,#05ac50 100%);
    background:-webkit-linear-gradient(-45deg,#05ac50 0,#21dd72 50%,#05c44e 51%,#05ac50 71%,#05ac50 100%);
    background:linear-gradient(135deg,#05ac50 0,#21dd72 50%,#05c44e 51%,#05ac50 71%,#05ac50 100%);
    background-size:400% 400%
}
.btn-danger{
    background:#e81216;
    background:-moz-linear-gradient(-45deg,#e81216 0,#f45355 50%,#f6290c 51%,#ed0e11 71%,#fc1b21 100%);
    background:-webkit-linear-gradient(-45deg,#e81216 0,#f45355 50%,#f6290c 51%,#ed0e11 71%,#fc1b21 100%);
    background:linear-gradient(135deg,#e81216 0,#f45355 50%,#f6290c 51%,#ed0e11 71%,#fc1b21 100%);
    background-size:400% 400%
}
.btn-warning{
    background:#e5ae09;
    background:-moz-linear-gradient(-45deg,#e5ae09 0,#ffd044 50%,#ffc107 51%,#fc9014 71%,#f1890b 100%);
    background:-webkit-linear-gradient(-45deg,#e5ae09 0,#ffd044 50%,#ffc107 51%,#fc9014 71%,#f1890b 100%);
    background:linear-gradient(135deg,#e5ae09 0,#ffd044 50%,#ffc107 51%,#fc9014 71%,#f1890b 100%);
    background-size:400% 400%;
    color:#fff!important
}
.btn-info{
    background:#01a8c1;
    background:-moz-linear-gradient(-45deg,#01a8c1 0,#2adbf7 50%,#00b5d1 51%,#0aafc9 71%,#0599b1 100%);
    background:-webkit-linear-gradient(-45deg,#01a8c1 0,#2adbf7 50%,#00b5d1 51%,#0aafc9 71%,#0599b1 100%);
    background:linear-gradient(135deg,#01a8c1 0,#2adbf7 50%,#00b5d1 51%,#0aafc9 71%,#0599b1 100%);
    background-size:400% 400%
}
.btn-light{
    background:#f2f2f2;
    background:-moz-linear-gradient(-45deg,#f2f2f2 0,#ddd 50%,#fff 51%,#fff 71%,#f6f8fb 100%);
    background:-webkit-linear-gradient(-45deg,#f2f2f2 0,#ddd 50%,#fff 51%,#fff 71%,#f6f8fb 100%);
    background:linear-gradient(135deg,#f2f2f2 0,#ddd 50%,#fff 51%,#fff 71%,#f6f8fb 100%);
    color:#3f345f!important;
    background-size:400% 400%
}
.btn-dark{
    background:#343a40;
    background:-moz-linear-gradient(-45deg,#343a40 0,#667584 50%,#4e5256 51%,#242a30 71%,#343a40 100%);
    background:-webkit-linear-gradient(-45deg,#343a40 0,#667584 50%,#4e5256 51%,#242a30 71%,#343a40 100%);
    background:linear-gradient(135deg,#343a40 0,#667584 50%,#4e5256 51%,#242a30 71%,#343a40 100%);
    background-size:400% 400%
}
@-webkit-keyframes AnimationName{
    0%,100%{
        background-position:0 31%
    }
    50%{
        background-position:100% 70%
    }
}
@-moz-keyframes AnimationName{
    0%,100%{
        background-position:0 31%
    }
    50%{
        background-position:100% 70%
    }
}
@keyframes AnimationName{
    0%,100%{
        background-position:0 31%
    }
    50%{
        background-position:100% 70%
    }
}
/* buttons custom */


* {
	border: 0px;
	margin: 0px;
}
*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a {
	text-decoration: none;
}
@font-face {
	font-family: majalla;
	src: url(../fonts/majalla.ttf);
}
body {
	font-family: 'majalla', sans-serif;
	font-size: 24px;
	font-weight: 400;
    background-color: #f3f4f6;
    background-color: #fcfcfc;
}
.eng {
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
}
#menu {
	padding: 10px;
	display: flex;
	border-bottom: 1px solid #eceff1;
	background-color: #fff;
    justify-content: flex-start;
    align-items: center;
}
#menu #brand {
	display: flex;
	align-items: center;
    margin-left: 30px;
}
#menu #brand .img {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	overflow: hidden;
	margin-left: 10px;
}
#menu #brand .img img {
	width: 100%;
}
#menu #brand .name {
	font-weight: bold;
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
}
#menu .balance {
    font-weight: bold;
    font-size: 32px;
    color: #696cff;
}
#dashboard #menu {
    border-bottom: 1px solid #1E90FF;
    background: #1E90FF;
    color: white;
}
#container {
	//width: 100vw;
	//height: 100vh;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    background: #f3f4f6;
}
#sidebar {
	width: 250px;
	border: 1px solid #eceff1;
	padding: 20px 0px;
	background-color: #fff;
}
#sidebar a {
	width: 100%;
	text-decoration: none;
	font-weight: bold;
}
#dashboard #sidebar {
    background: #1E90FF;
    color: white;
}
#sidemenu .link {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 10px;
	font-size: 24px;
	margin-bottom: 10px;
	color: black;
}
#sidemenu .link:hover {
	background-color: #f3f4f6;
}
#sidemenu .link.active {
	color: #1379f0;
	background-color: #f3f4f6;
}
#sidemenu .link.active img {

}
#sidemenu .link .text {

}
#sidemenu .link img {
	margin-left: 10px;
	width: 16px;
	position: relative;
	top: -2px;
}
#dashboard #sidebar .link {
    color: white;
}
#dashboard #sidemenu .link:hover,
#dashboard #sidemenu .link.active {
    background-color: #48a5ff;
}
#contents {
	width: calc(100% - 280px);
	padding-left: 30px;
	margin-top: 30px;
}
#contents .content {
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
	border: 1px solid #eceff1;
	background-color: #fff;
}
#contents .content .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contents h4 {
	border-bottom: 0px solid #eceff1;
	margin-bottom: 10px;
}
#sq_container {
	width: 100%;
}
#sq_container.scroll {
	overflow-x: scroll;
	overflow-y: hidden;
}
#sq_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}
#sq_header #sq_search {
	
}
#sq_header #sq_search input {
	border: 1px solid #e4e4e7;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	margin-left: 5px;
	outline: none;
    direction: rtl;
}
#sq_header button {
    font-size: 20px;
    padding: 2px 16px;
}
#sq_header .buttons button img {
    width: 18px;
    position: relative;
    top: 4px;
}
#sq_container table {
	border-collapse: collapse;
	min-width: 100%;
}
#sq_container table tr {
	text-align: center;
}
#sq_container table td ,
#sq_container table th {
	padding: 10px 20px;
	white-space: nowrap;
}
#sq_container table td.eng ,
#sq_container table th.eng {
	font-size: 16px;
}
#sq_container table thead tr {
	background: #f3f4f6;
	border: 1px solid #eceff1;
}
#sq_container table tbody tr:nth-child(even) {
	background: #f3f4f6;
}
.green {
	color: #00cb52;
}
.red {
    color: red;
}
.blue {
	color: #696cff;
}
#sq_container table .operator {

}
#sq_container table .operator .image {
	width: 50px;
	height: 50px;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sq_container table .operator .image img {
	width: 100%;
}
#sq_container table .user {
	display: flex;
	align-items: center;
}
#sq_container table .user .image {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
    margin-left: 10px;
}
#sq_container table .user .image img {
	width: 100%;
	height: 100%;
}
#sq_container table .user .data {
	color: black;
	font-weight: bold;
	text-align: right;
}
#sq_container table .user .data .name {
	font-size: 18px;
}
#sq_container table .user .data .id {
	font-size: 14px;
	color: #4a5565;
}
#sq_footer {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px;
}
#sq_footer .sq_rows {
    display: flex;
    align-items: center;
}
#sq_footer .sq_rows select {
    margin: 0px 10px;
    border: 1px solid #e4e4e7;
    border-radius: 5px;
    padding: 10px;
    outline: none;
}
.center {
	display: flex;
	justify-content: center;
}
.right {
	display: flex;
	justify-content: right;
}
.left {
	display: flex;
	justify-content: left;
}
.empty {
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex1 {
    flex: 1;
}
#pt_container {
	width: 100%;
	padding: 30px;
	border-radius: 5px;
}
#pt_container table {
	border-collapse: collapse;
    width: 100%;
}
#pt_container table tr {
	text-align: center;
}
#pt_container table td ,
#pt_container table th {
	padding: 10px 20px;
	white-space: nowrap;
	text-align: right;
}
#pt_container table th {

}
#pt_container table td.eng ,
#pt_container table th.eng {
	font-size: 16px;
}
#pt_container table thead tr {
	background: #f3f4f6;
	border: 1px solid #eceff1;
}
#pt_container table .operator {
	display: flex;
	align-items: center;
}
#pt_container table .operator .image {
	width: 40px;
	height: 40px;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 5px
}
#pt_container table .operator .image img {
	width: 100%;
}
#pt_container table select,
#pt_container table input {
	min-width: 402px;
	direction: rtl;
	border: 1px solid #e4e4e7;
	border-radius: 5px;
	padding: 10px;
	font-size: 20px;
	word-wrap: normal;
	overflow: auto;
}
.status {
	border-radius: 20px;
	padding: 0px 15px;
	padding-right: 10px;
}
.status img {
	position: relative;
	top: 3px;
	margin-left: 5px;
	width: 16px;
}
.status.pending {
	color: #0000FF;
	background: #dbdbff;
}
.status.pending.rotate img {
	-webkit-animation: rotating 1s linear infinite;
	-moz-animation: rotating 1s linear infinite;
	-ms-animation: rotating 1s linear infinite;
	-o-animation: rotating 1s linear infinite;
	animation: rotating 1s linear infinite;
}
.status.success {
	color: #16A34A;
	background: #dafce4;
}
.status.failed,
.status.expired {
	background: #ffc5bb;
	color: red;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
#Chart1 {
	max-width: 500px;
	height: 300px;
}
#Chart2 {
	max-width: 500px;
}
#profile {
	
}
#profile #profile_header {
	background-image: url(../images/profile-background.png);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#profile #profile_header .center {
	display: flex;
	justify-content: center;
}
#profile #profile_header .image {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid #e1e1e1;
	overflow-y: hidden;
}
#profile #profile_header .image img {
	width: 100%;
}
#profile #profile_header .name {
	font-weight: bold;
	margin-bottom: 20px;
    font-size: 36px;
}
#profile #profile_header .infos {
	display: flex;
	margin-bottom: 20px;
}
#profile #profile_header .infos .info {
	font-size: 16px;
	font-weight: bold;
	display: flex;
	align-items: center;
	margin-left: 20px;
}
#profile #profile_header .infos .info:last-child {
	margin-left: 0px;
}
#profile #profile_header .infos .info img {
	width: 18px;
	margin-left: 5px;
	position: relative;
	top: 1px;
}
.infos2 {
	display: flex;
    align-items: center;
    border: 1px solid #eceff1;
    padding: 10px;
    border-radius: 5px;
}
.infos2 .info {
	width: 50%;
	text-align: center;
	border-left: 1px solid #eceff1;
    flex: 1;
    white-space: nowrap;
    padding: 0px 10px;
}
.infos2 .info:last-child {
    border-left: 0px;
}
.infos2 .info .label {
    font-weight: bold;
}
.infos2 .info .value {
    font-weight: bold;
    font-size: 40px;
}
.infos2 .info .value.balance {
    color: #696cff;
}
.infos2 .info .value.debts {
    color: red;
}
.infos2 .info .value.bonus {
    color: #71dd37;
}
.infos2 button {
    display: flex;
    align-items: center;
    margin: 10px auto;
}
.infos2 button img {
    width: 24px;
    margin-right: 10px;
}
.btn-sm {
    font-size: 20px;
    padding: 2px 16px;
}
#tabs {
	width: 100%;
	display: flex;
	border-bottom: 2px solid #eceff1;
	margin-bottom: 30px;
}
#tabs a {
	text-decoration: none;
}
#tabs .tab {
	padding: 10px 20px;
	font-weight: bold;
	color: black;
	border-bottom: 2px solid transparent;
	position: relative;
	top: 1px;
	margin-left: 5px;
}
#tabs .tab:hover ,
#tabs .tab.active {
	border-color: blue;
}
#tabs .tab img {
	width: 18px;
	position: relative;
	top: 2px;
}
#tab_content {
	min-height: 300px;
}
#transaction_form_container {
	display: flex;
	justify-content: center;
}


.switch {
	
}
.switch input {
	display: none;
}
.switch {
	display: inline-block;
}
.switch svg {
	-webkit-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	-o-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	position: absolute;
	height: auto;
}
.switch .checkmark {
	width: 10px;
	color: rgb(0, 218, 80);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
.switch .cross {
	width: 6px;
	color: rgb(255,0,0);
}
.slider {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 46px;
	height: 24px;
	background: rgb(255,0,0);
	border-radius: 999px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	-webkit-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	-o-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	cursor: pointer;
}
.circle {
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: inherit;
	-webkit-box-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
	box-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	-o-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	z-index: 1;
	position: absolute;
	left: calc((24px - 18px) / 2);
}
.slider::before {
	content: "";
	position: absolute;
	width: calc(18px / 2);
	height: calc(calc(18px / 2) / 2 - 1px);
	left: calc(calc((24px - 18px) / 2) + (calc(18px / 2) / 2));
	background: #fff;
	border-radius: 1px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
/* actions */
.switch input:checked+.slider {
	background: rgb(0, 218, 80);
}
.switch input:checked+.slider .checkmark {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.switch input:checked+.slider .cross {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
.switch input:checked+.slider::before {
	left: calc(100% - calc(18px / 2) - (calc(18px / 2) / 2) - calc((24px - 18px) / 2));
}
.switch input:checked+.slider .circle {
	left: calc(100% - 18px - calc((24px - 18px) / 2));
	-webkit-box-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
	box-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
}
#pag {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	font-size: 18px;
}
#pag .link {
	padding: 5px 14px;
	border-radius: 2px;
	white-space: nowrap;
	color: #000;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
	border: 1px solid #e9e9e9;
	display: flex;
	align-items: center;
}
#pag a {
	margin: 0 5px
}
#pag .link:hover {
	background-color: #f0f0f0
}
#pag .link.active {
	background-color: #1e90ff;
	color: #fff;
	border-color: #1e90ff
}
#ch_r {
	margin-left: 5px;
	width: 8px;
}
#ch_l {
	margin-right: 5px;
	width: 8px;
}
@media only screen and (max-width:768px) {
	#pag span.text {
		display: none
	}
	#pag .link i.fa-chevron-right {
		margin-left: 0
	}
	#pag .link i.fa-chevron-left {
		margin-right: 0
	}
	#pag .link {
		padding: 4px 10px
	}
}
#stats .value {
    text-align: center;
    font-weight: bold;
    font-size: 50px;
}
#stats .value .smaller {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#stats .value .smaller img {
    width: 24px;
    margin-left: 7px;
    position: relative;
    bottom: 2px;
}
#stats .rows {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
#stats .rows.four .row {
	width: calc((100% / 4) - (40px / 4));
}
#stats .rows.three .row {
	width: calc((100% / 3) - (30px / 3));
}
#stats .rows.two .row {
	width: calc((100% / 2) - (20px / 2));
}
@media only screen and (max-width:900px) {
    #stats .rows.two .row {
        width: 100%;
    }
}
#stats .row {
	padding: 20px;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 1px solid #eceff1;
	background-color: #fff;
}
#stats_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
} 
#stats_header select {
	border: 1px solid #e4e4e7;
	border-radius: 5px;
	padding: 10px;
	outline: none;
    font-weight: 800;
    font-size: 16px;
}
#stats_header h4 {
    margin-bottom: 0px;
}
#stats .right_left {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
#stats .right_left .right {
	flex-wrap: wrap;
}
#stats .right_left .li {
	display: flex;
	align-items: center;
	width: 100%;
	font-size: 28px;
}
#stats .right_left .li ._circle {
	width: 10px;
	height: 10px;
	background: red;
	border-radius: 50%;
	margin-left: 10px;
}
#stats .right_left .li.succes ._circle,
#stats .right_left .li.mobilis ._circle {
	background: #16A34A;
}
#stats .right_left .li.failed ._circle,
#stats .right_left .li.ooredoo ._circle {
	background: #f05b4f;
}
#stats .right_left .li.expired ._circle,
#stats .right_left .li.djezzy ._circle {
	background: #ff0000;
}
#stats .right_left .li.idoom ._circle {
	background: #800080;
}
#stats .chart_type1 {
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	width: 260px;
	height: 260px;
}
#stats .chart_type2 {
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	height: 300px;
}
#stats .chart {
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	width: 100%;
	height: 200px;
}
#stats h4 {
    padding-bottom: 5px;
    border-bottom: 1px solid #eceff1;
    margin-bottom: 10px;
}
.ct-series-a .ct-area, 
.ct-series-a .ct-slice-donut-solid, 
.ct-series-a .ct-slice-pie {
	fill: #16A34A;
}
.ct-series-c .ct-area, 
.ct-series-c .ct-slice-donut-solid, 
.ct-series-c .ct-slice-pie {
	fill: #ff0000;
}
.ct-series-d .ct-area, 
.ct-series-d .ct-slice-donut-solid, 
.ct-series-d .ct-slice-pie {
	fill: #800080;
}

.ct-series-a .ct-bar, 
.ct-series-a .ct-line, 
.ct-series-a .ct-point, 
.ct-series-a .ct-slice-donut {
	stroke: #16A34A;
}
.ct-series-c .ct-bar, 
.ct-series-c .ct-line, 
.ct-series-c .ct-point, 
.ct-series-c .ct-slice-donut {
	stroke: #ff0000;
}
.ct-series-d .ct-bar, 
.ct-series-d .ct-line, 
.ct-series-d .ct-point, 
.ct-series-d .ct-slice-donut {
	stroke: #800080;
}
.ct-label {
	font-weight: 800;
}
#chart5 .ct-label,
#chart6 .ct-label {
    font-family: 'majalla', sans-serif !important;
    font-size: 18px;
}
#chart5.days .ct-label.ct-horizontal,
#chart6.days .ct-label.ct-horizontal {
    width: 44px  !important;
    position: relative;
    left: -16px;
}
#chart5.weeks .ct-label.ct-horizontal,
#chart6.weeks .ct-label.ct-horizontal,
#chart5.months .ct-label.ct-horizontal,
#chart6.months .ct-label.ct-horizontal {
    width: 70px  !important;
    position: relative;
    left: -32px;
}
#chart5.year,
#chart6.year {
    margin-bottom: 15px;
}
#chart5.year .ct-label.ct-horizontal,
#chart6.year .ct-label.ct-horizontal {
    width: 34px !important;
    height: 50px !important;
    position: relative;
    left: -16px;
    text-align: center;
}
.tablesorter-default th, 
.tablesorter-default thead td {
    border-bottom: #ccc 2px solid;
}
.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
    white-space: normal;
    padding: 4px 20px 4px 4px;
}
.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc,
.tablesorter-default thead .tablesorter-headerSortUp {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
    border-bottom: #000 2px solid;
}
.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc,
.tablesorter-default thead .tablesorter-headerSortDown {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
    border-bottom: #000 2px solid;
}
.tablesorter-default thead .sorter-false {
    background-image: none;
    cursor: default;
    padding: 4px;
}
#downloaddable_container {
    //height: 0px;
    overflow: hidden;
    direction: ltr;
}
#downloaddable_container,
#downloaddable_container * {
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
}
#downloaddable {
    width: 100%;
    border-collapse: collapse;
}
#downloaddable thead tr {
    background: #1e90ff;
    color: white;
}
#downloaddable thead th {
    padding: 5px;
    text-align: left;
}
#downloaddable tbody tr {

}
#downloaddable tbody tr td {
    border-bottom: 1px solid #eceff1;
}
#downloaddable tbody tr:nth-child(even) {
    background: #f3f4f6;
}
#downloaddable td {
    padding: 5px;
}
.modal_container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 500;
    justify-content: center;
    align-items: center;
    display: none;
}
#modal {
    background: white;
    width: 500px;
    padding: 20px;
    border-radius: 5px;
}
#modal #header {
    position: relative;
    margin-bottom: 10px;
}
#modal #header .close {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eceff1;
    cursor: pointer;
}
#modal #header .close img {
    width: 20px;
}
#modal form {
    width: 100%;
}
#modal form .row {
    margin-bottom: 10px;
}
#modal #amount_container {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e7;
    border-radius: 5px;
}
#modal #amount_container .da {
    padding: 20px;
    font-size: 28px;
    font-weight: bold;
}
#modal form .row label {
    width: 100%;
    font-weight: bold;
    margin-bottom: 5px;
}
#modal form .row input {
    width: 100%;
    direction: ltr;
}
#modal form .row select {
    width: 100%;
    direction: ltr;
    border-radius: 4px;
    border: 1px solid #e7e3e4;
    height: 40px;
    outline: none;
    padding: 3px 10px;
}
#modal form .row textarea {
    width: 100%;
    direction: rtl;
    border: 2px dotted #eceff1;
    font-size: 22px;
    padding: 10px;
    font-family: 'majalla', sans-serif;
}
#modal form .row input:not(#amount) {
    border: 1px solid #e4e4e7;
    border-radius: 5px;
    padding: 10px;
    font-size: 20px;
}
#modal form .row input#amount {
    padding: 30px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}
#modal form .row input:focus{
    outline: none;
}
#modal #transaction_type {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
#modal #transaction_type input[type="radio"] {
    position: absolute;
    right: 1px;
    top: 1px;
    opacity: 0;
    width: auto !important;
}
#modal #transaction_type label {
    width: 33.33% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 1px solid #e4e4e7;
    cursor: pointer;
    background: white;
}
#modal #transaction_type label img {
    position: relative;
    top: 1px;
    margin-left: 5px;
    width: 16px;
}
#modal #transaction_type label#cash_label {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
#modal #transaction_type label#cash_label.active,
#modal #transaction_type label#cash_label:hover {
    border-color: #16A34A;
    background: #dafce4;
    color: #16A34A;
}

#modal #transaction_type label#debt_label.active,
#modal #transaction_type label#debt_label:hover {
    border-color: red;
    background: #ffc5bb;
    color: red;
}

#modal #transaction_type label#reverse_label {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#modal #transaction_type label#reverse_label.active,
#modal #transaction_type label#reverse_label:hover {
    border-color: #0000FF;
    background: #dbdbff;
    color: #0000FF;
}



.jq-toast-wrap {
    width: 300px;
}
.jq-toast-loader {
    display: none !important;
}
#messages {
    margin-top: 10px;
}
#messages .message {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px dotted #eceff1;
    border-radius: 4px;
}

#login {
    background-image: url(../images/bg-5.png);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: calc(100vh - 72px);
}
#login #form {
    width: 400px;
    background: white;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #eeeaeb;
    color: #2a2627;
    direction: ltr;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
}
#login #form .row {
    width: 100%;
    margin-bottom: 30px;
}
#login #form .title {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}
#login #form .label {
    color: #0b0809;
    font-weight: bold;
    margin-bottom: 10px;
}
#login #form input {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #e7e3e4;
    height: 40px;
    outline: none;
    padding: 3px 10px;
}
#login #form input::placeholder {
    color: #e7e3e4;
}
#login #form button {
    margin-top: 10px;
    background: #1379f0;
    color: white;
    width: 100%;
    padding: 12px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
.admin_buttons {
    display: flex;
    justify-content: flex-start;
}
.flex {
    flex: 1;
}