@font-face {

	font-family: 'Material Icons';

	font-style: normal;

	font-weight: 400;

	src: url(fonts/material-icons.woff2) format('woff2');

}

@font-face {

    font-family:'DIN Next LT Arabic';

    src:url('fonts/DINNextLTArabic-Regular.ttf');

    src:local('âک؛'),

        url('fonts/DINNextLTArabic-Regular.ttf') format('truetype');

    font-weight:normal;

}

@font-face {

    font-family:'DIN Next LT Arabic Light';

    src:url('fonts/DINNextLTArabic-Light.ttf');

    src:local('âک؛'),

        url('fonts/DINNextLTArabic-Light.ttf') format('truetype');

    font-weight:lighter;

}

@font-face {

	font-family: 'DIN Next LT Arabic Ultra Light';

    src:url('fonts/DINNextLTArabic-UltraLight.ttf');

    src:local('âک؛'),

        url('fonts/DINNextLTArabic-UltraLight.ttf') format('truetype');

    font-weight:100;

}

/* latin-ext */

@font-face {

  font-family: 'Lato';

  font-style: normal;

  font-weight: 100;

  src: local('Lato Hairline'), local('Lato-Hairline'), url(fonts/Lato-Hairline.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Lato';

  font-style: normal;

  font-weight: 100;

  src: local('Lato Hairline'), local('Lato-Hairline'), url(fonts/Lato-Hairline-2.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

* {

	outline: none;

	transition-property: height, width, margin, padding, opacity, background, border, color, line-height, box-shadow, transform;

    transition-duration: 0.3s;

    transition-timing-function: ease;

}

html, body, h2, h3, h4, ul {

	margin: 0;

	padding: 0;

	font-weight: normal;

	font-family: 'DIN Next LT Arabic Light';

}

/* GENERALS */

input:focus,

select:focus,

textarea:focus {

	border-color: #5AB2CD !important;

}

body {

	background-color: rgba(0,0,0,0.075);

	overflow-x: hidden;

}

a {

	text-decoration: none;

	color: inherit;

}

img {

	border-style: none;

}

hr {

	border-style: none none solid none;

	border-width: 1px;

	color: rgba(0,0,0,0.12);

	height: 0;

    margin-top: 10px;

    width: 100%;

}

form * {

	font-family: 'DIN Next LT Arabic Light';

}

fieldset {

	border: 1px solid #CCCCCC;

	border-radius: 6px;

}

legend {

	font-size: 15px;

	white-space: nowrap;

}

select option {

	height: 4em !important;

	font-family: 'DIN Next LT Arabic';

	font-size: 16px;

}

optgroup {

	font-weight: normal;

	background-color: #F2F2F2;

	font-family: 'DIN Next LT Arabic';

}

input[type=text],

input[type=url],

input[type=email],

input[type=tel],

input[type=password],

input[type=date],

input[type=number],

textarea,

select {

	border-width: 1px;

	border-color: #e5e5e5;

	border-style: none none solid none;

	margin: 0 0 3px 5px;

	padding: 0 5px;

	height: 26px;

	-webkit-border-radius: 2px;

	-moz-border-radius: 2px;

	border-radius: 2px;

}

input[type=number] {

	text-align: center;

	max-width: 90px;

	box-sizing: border-box;

}

input[type=file] {

	margin-bottom: 3px;

	height: 26px;

}

input[type=checkbox] {

	display: none;

}

input[type=checkbox] + label {

	margin: 11px 10px 4px;

	height: 10px;

	border: 2px solid transparent;

	padding: 2px 0;

	line-height: 10px;

	display: inline-block;

	position: relative;

	cursor: pointer;

	border-radius: 6px;

}

nav input[type=checkbox] + label {

	padding: 2px 7px;

	background-color: #fff;

}

nav input[type=checkbox] + label:hover {

	border-color: #6d6d6d;

	background-color: #fff;

}

input[type=checkbox]:checked + label,

.block:hover input[type=checkbox] + label,

.adminpages input[type=checkbox] + label {

	background-color: #fff;

	border-color: #6d6d6d;

	padding: 2px 7px;

}

input[type=checkbox]:checked + label {

	background-color: #abcc6e !important;

	border: 2px solid #abcc6e !important;

	color: #99a1a7;

}

input[type=checkbox]:checked + label:after {

	content: 'check';

	font-size: 18px;

	position: absolute;

	top: 2px;

	left: -2px;

	color: #fff;

}

.material-icons {

	font-family: 'Material Icons';

	font-weight: normal;

	font-style: normal;

	font-size: 24px;

	letter-spacing: normal;

	text-transform: none;

	display: inline-block;

	white-space: nowrap;

	word-wrap: normal;

	direction: ltr;

	-webkit-font-smoothing: antialiased;

}

.material-icons sup {

	position: absolute;

	display: block;

	width: 16px;

	height: 16px;

	right: 0px;

	top: 0px;

	background-color: #abcc6e;

	text-align: center;

	color: #fff;

	border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

	font-size: 10px;

	font-family: 'DIN Next LT Arabic';

}



/* LOGIN PAGE */

#log {

	background-size: cover !important;

	height: 100%;

	background-repeat: no-repeat !important;

	background-color: #1A1A1A;

	position: relative;

}

.blr {

	height: 100vh;

}

#login form {

	transition-property: height;

    transition-duration: 0s;

    transition-timing-function: none;

    -webkit-transition-property: height;

    -webkit-transition-duration: 0s;

    -webkit-transition-timing-function: none;

	padding-top: 20px;

}

#login hr {

	width: 90%;

}

#login form[name=restore] {

	display: none;

}

section#login {

	width: 450px;

	max-height: 300px;

	min-height: 220px;

	position: absolute;

	top: calc(50% - 150px);

	right: calc(50% - 225px);

	border-radius: 10px;

	display: flex;

	margin: auto;

	overflow: hidden;

	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);

	direction: rtl;

}

section#login *:not(.material-icons){

	font-family: 'DIN Next LT Arabic Light';

}

section#login aside {

	background-color: #c2453fcf;

	color: #ffffff;

	width: 150px;

	flex-shrink: 0;

	padding-top: 0;

	cursor: move;

	backdrop-filter: blur(15px);

}

section#login aside .avatar {

	position: relative;

	border-radius: 50%;

	background-color: #ccc;

	height: 96px;

	width: 96px;

	margin: 36px auto 10px auto;

	background-size: cover;

	background-image: url(images/avatar.png);

}

section#login aside .avatar:after {

	content: ' ';

	display: block;

	position: absolute;

    width: 100px;

    height: 100px;

    right: -8px;

    top: -8px;

	border-radius: 50%;

	border: 6px solid #fff;

	border-color: rgba(255,255,255,0.75) transparent rgba(255,255,255,0.75) transparent;

	animation: login-loading 50s linear infinite;

}

section#login aside .ldng:after {

	animation: login-loading 1s linear infinite;

}

@keyframes login-loading {

	0% {

		transform: rotate(0deg);

	}

	100% {

		transform: rotate(360deg);

	}

}

section#login div:last-child {

	background-color: rgba(255,255,255,0.6);

	color: #ffffff;

	width: 300px;

	padding: 0 20px;

	backdrop-filter: blur(15px);

	display: flex;

    align-items: center;

    justify-content: center;

	flex-direction: column;

}

section#login div:last-child p{

	color:#333;

	font-weight:600;

}

section#login h1 {

	font-size: 30px;

	color: #333333;

	font-weight: 100;

	white-space: nowrap;

}

section#login h3 {

	font-size: 22px;

	color: #fff;

	font-weight: 100;

	text-align: center;

	line-height: 26px;

}

section#login input[type=text],

section#login input[type=password] {

	border: 1px solid #D9D9D9;

	width: 260px;

	height: 40px;

	text-align: center;

	margin-bottom: 15px;

	border-radius: 2px;

	font-size: 18px;

	line-height: 18px;

	box-sizing: border-box;

}

section#login input:focus {

	border-color: #363636;

}

section#login input[type=submit] {

	border-style: none;

	width: 48px;

	height: 48px;

	text-align: center;

	border-radius: 50%;

	background-color: #abcc6e;

	position: absolute;

    bottom: 20px;

    left: 20px;

	color: #fff;

	font-family: 'Material Icons';

	cursor: pointer;

	transition-property: all;

    transition-duration: 0.3s;

    transition-timing-function: ease;

}

section#login input[type=submit]:not(.restore):hover {

	padding-right:15px;

}

section#login input[type=submit].restore:hover {

	transform: rotate(-145deg);

}

section#login > span {

	position: absolute;

    font-size: 22px;

    bottom: 32px;

    color: #333333;

    left: 85px;

}

section#login a#btn {

	color: #FFFFFF;

	text-decoration: none;

	font-size: 12px;

	text-align: center;

	display: block;

	width: 110px;

	padding: 5px;

	margin: auto;

	position: absolute;

	right: 15px;

	bottom: 25px;

	background-color: rgba(255,255,255,0.2);

}

section#login a#btn:hover {

    background-color: rgba(255,255,255,0.3);

}

#clock {

	color: #fff;

	font-size: 60px;

	position: absolute;

	bottom: 160px;

	left: 40px;

	font-family: 'Lato', sans-serif;

}

#clock h1,

#clock h4 {

	margin: 0;

	font-weight: 100;

	font-family: 'Lato', sans-serif;

}



#logo {

	background-position: center center;

	background-size: contain;

	display: block;

	width: 240px;

	height: 80px;

	bottom: 30px;

	left: 30px;

	position: absolute;

	background-image: url('images/Mable-logo.svg');

	background-repeat: no-repeat;

}

#rights {

	border-width: 3px;

	border-color: rgba(255,255,255,0.5);

	width: 100%;

	color: rgba(255,255,255,0.8);

	display: block;

	text-align: left;

	position: absolute;

	bottom: 30px;

	left: 270px;

	font-size: 12px;

	border-left-style: solid;

	padding: 0 20px;

	box-sizing: border-box;

}

#rights .icon {

	width: 36px;

	height: 36px;

	line-height: 36px;

	font-size: 24px;

	margin: 5px 5px 0 0;

	text-align:center;

	color: #fff;

	background-color: #5AB2CD;

	border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

}

#rights .icon:hover {

	text-decoration: none !important;

	background-color: #C95B56;

}

#rights a:hover {

	text-decoration: underline;

}



/* loading message */

#ldng {

	background-color: rgba(0,0,0,0.5);

	width: 100%;

	height: 30px;

	padding: 5px;

	text-align: center;

	line-height: 20px;

	display: none;

	margin: 0px 0 auto auto;

	position: absolute;

	top: 0px;

	right: 0;

	color: #fff;

	font-size: 14px;

	box-sizing: border-box;

	z-index: 10001;

	transition-property: all;

    transition-duration: 0s;

    transition-timing-function: ease;

    -webkit-transition-property: all;

    -webkit-transition-duration: 0s;

    -webkit-transition-timing-function: none;

}

#ldng img {

	float: right;

}

#msgs {

	display: block;

	overflow: auto;

	text-align: center;

    width: 400px;

	height: 200px;

	position: absolute;

	top: calc(50% - 100px);

	right: calc(50% - 200px);

	color: #fff;

    padding: 40px;

    direction: ltr;

    box-sizing: border-box;

    background-color: rgba(0,0,0,0.7);

	backdrop-filter: blur(5px);

	border-radius: 5px;

	box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5);

	opacity: 1;

	transition-property: all;

    transition-duration: 0.4s;

    transition-timing-function: ease;

}

#msgs:empty {

	right: 50%;

	width: 0px;

	top: 100%;

	opacity:0;

	display: none;

}

#notification {

	width: 360px;

	height: 64px;

	overflow: hidden;

	position: absolute;

	top: -90px;

	right: 50%;

	margin-right: -180px;

	z-index: 10001;

	box-shadow: 0 10px 35px 0 rgba(0,0,0,0.25);

	-moz-box-shadow: 0 10px 35px 0 rgba(0,0,0,0.25);

	-webkit-box-shadow: 0 10px 35px 0 rgba(0,0,0,0.25);

}

#notification .thumb {

	background-position: right center;

	width: 64px;

	height: 64px;

	position: absolute;

	top: 0;

	right: 0;

	background-repeat: no-repeat;

	z-index: 100;

}

#notification .txt {

	font-size: 14px;

	padding: 10px;

	height: 44px;

	margin-right: 64px;

	background-color: #ffffff;

}

#notification .close {

	font-family: 'Material Icons';

	width: 16px;

	height: 16px;

	padding: 2px;

	position: absolute;

	top: 0px;

	left: 0;

	color: rgba(0,0,0,0.3);

	display: none;

	cursor: pointer;

}

#notification .close:hover {

	color:#5AB2CD;

}

.add_new {

	width: 56px;

	height:100px;

	position: fixed;

	bottom: 32px;

	left: 32px;

	z-index: 350;

}

.add_new a {

	text-align: center;

	overflow: hidden;

	border-radius: 40%;

	-webkit-border-radius: 40%;

	-moz-border-radius: 40%;

	position: absolute;

}

.add_new a:first-child {

	line-height: 56px;

	color: #fff;

	background-color: #abcc6e;

	height: 0;

	width: 0;

	bottom: 0;

	left: 0;

	box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);

	transition: all 0.3s , opacity 0s;

	z-index: 100;

}

.add_new a:nth-child(n+2){

    line-height: 40px;

    font-size: 20px;

    color: #fff;

    text-align: center;

    background-color: #757575;

    height: 40px;

    width: 40px;

    bottom: 20px;

    left: 8px;

    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);

	transition: all 0.3s;

	opacity: 0;

}

.add_new:hover a:nth-child(n+2) {

	opacity: 1;

    bottom: 66px;

}

.add_new a:first-child:hover,

form#menuadd input[type=submit]:hover {

	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.3);

}

.shadow {

	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);

	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);

	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);

}

header {

	background: linear-gradient(45deg, #5AB2CD 0%, #2FB39D 100%);

	color: #fff;

	height: 100px;

	line-height: 90px;

	padding: 0 100px;

}

header h2 {

	margin-right: 25px;

	line-height: 66px;

}

header#body.inner-head h2 {

	margin-right: 15px;

	line-height: 58px;

}

header#body {

	text-align: right !important;

	padding: 0 1px 0 5px;

	cursor: auto;

	position: relative;

}

header#body.inner-head {

	height: 66px;

}

header#body a {

	color: #FFFFFF;

}

header#body .icons {

	position: absolute;

	left: 10px;

	top: 16px;

	direction:ltr;

	display: flex;

}

header#body .icons a,

header#body form input[type=submit] {

	line-height:normal;

	display:inline-block;

	padding: 5px;

	border-radius: 40%;

	-webkit-border-radius: 40%;

	-moz-border-radius: 40%;

}

header#body .icons a[href='#'] {

	opacity: 0.2;

}

header#body .icons a:hover,

header#body form  input[type=submit]:hover {

	background-color: rgba(0,0,0,0.1);

}

header#body form {

	border-width: 1px;

	border-color: rgba(255,255,255,0.5);

	margin: 0px 0px 0px 5px;

	border-left-style: solid;

	padding-left: 5px;

	display: flex;

	direction:rtl;

}

header#body form input[type=submit] {

	border-style: none;

	border-width: 0px;

	color: #fff;

	background-color: transparent;

	cursor: pointer;

}

header#body input[type=search] {

	font-family: 'DIN Next LT Arabic Light';

	color: #fff ;

	border-style: none;

	margin: 2px 5px 1px 5px;

	width: 160px;

	background-color: rgba(255,255,255,0.2);

	height: 30px;

	padding: 5px;

	border-radius: 6px;

}

header#body input[type=search]::-webkit-input-placeholder {

	color: #fff;

}

header#body input[type=search]:focus {

	width: 200px;

	box-shadow: 0 0 0 0 #fff;

}

header#body input[type=checkbox] {

	margin-right: 1px;

	margin-left: 6px;

	cursor: pointer;

}

header .notifications {

	background-color: rgba(0,0,0,0.8);

	color: #fff;

	height: 100vh;

	width: 300px;

	position: fixed;

	top: 0px;

	left: -100%;

	z-index: 300;

    transition-property: left;

    transition-duration: 0.8s;

    transition-timing-function: ease;

    -webkit-transition-property: left;

    -webkit-transition-duration: 0.8s;

    -webkit-transition-timing-function: ease;

}

header .notifications.sided {

	background-position: center top;

	left: 0px;

	background-repeat: no-repeat;

}

header .notifications .contents {

	height: 100%;

	margin: 54px 0 10px 0;

	overflow-x: hidden;

	overflow-y: auto;

}

header .notifications .contents div {

	margin: 0 0 5px 0;

	overflow: hidden;

	padding: 10px;

	font-size: 14px;

}



header .notifications .contents div:hover {

	background-color: rgba(255,255,255,0.05);

}

header .notifications .contents div.new {

	border-right-style: solid;

	border-width: 5px;

	border-color: #abcc6e;

}



header .notifications .contents div .avatar {

	margin: 6px;

}

header .notifications .contents div p {

	line-height: 26px;

	margin: 0;

}

header .notifications .contents div p time {

	display: block;

	font-size: 10px;

	color: #b3b3b3;

}

header .bell {

	position: relative;

	z-index: 350;

}

header .bell.sided {

	background-color: #5AB2CD;

}

header.user_statics {

	height: auto;

	overflow: auto;

	padding: 4px 20px 20px 20px;

	margin-top: 0px;

}

header.user_statics .avatar {

	width: 90px;

	height: 90px;

	float: right;

	position: relative;

	overflow: visible;

}

header.user_statics .avatar i {

	width: 16px;

	height: 16px;

	background-color: #999;

	display: block;

	position: absolute;

	left: 2px;

	top: 2px;

	border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

}

header.user_statics h2 {

	line-height: 20px;

	padding: 10px 84px 0 0;

	text-transform: uppercase;

}

header.user_statics h4 {

	padding: 0 110px 0 0;

	font-size: 13px;

	height: 20px;

}

header.user_statics h4 a {

	color: #fff !important;

	font-weight: bold;

}

section.user_statics {

	height: auto;

	margin: 0 30px;

	display: flex;

	flex-wrap: wrap;

	font-size: 14px;

	overflow: auto;

	padding-bottom: 18px;

}

section.user_statics h4 {

	color: #abcc6e;

	font-size: 22px;

	padding: 5px 0;

	height: 30px;

	flex-grow: 1;

}

section.user_statics h4 b {

	float: left;

}

section.user_statics > div.hlf {

	padding: 10px;

	flex-basis: 40%;

	flex-grow: 1;

	justify-content: space-between;

	text-align: center;

	background-color: rgba(0,0,0,0.05);

	margin: 1px;

	border-radius: 3px;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

}

section.user_statics > div {

	flex-basis: 100%;

	background-color: transparent;

	padding: 0;

}

section.user_statics > div:last-child {

	display: flex;

	flex-wrap: nowrap;

	justify-content: space-between;

}

section.user_statics > div b {

	display: block;

	font-size: 22px;

}

section.user_statics > div a {

	display: block;

	width: 30px;

	flex-shrink: 1;

	height: 60px;

	background-color: rgba(0,0,0,0.05);

	position: relative;

}

section.user_statics > div a:hover i {

	color: #abcc6e;

}

section.user_statics > div a u {

	display: block;

	width: 100%;

	background-color: #abcc6e;

	position: absolute;

	bottom: 0px;

	right: 0px;

	transition-property: height;

    transition-duration: 1s;

    transition-timing-function: ease;

    -webkit-transition-property: height;

    -webkit-transition-duration: 1s;

    -webkit-transition-timing-function: ease;

}

section.user_statics > div i {

	width: 30px;

	font-style: normal;

	font-size: 12px;

	text-align: center;

	color: #999999;

	position: absolute;

	top: 60px;

	right: 0px;

}

main {

	background-color: #eee;

	background-position: center center;

	background-repeat: no-repeat;

	overflow-y: scroll;

	overflow-x: hidden;

	transition-property: height;

    transition-duration: 0s;

    transition-timing-function: ease;

    -webkit-transition-property: height;

    -webkit-transition-duration: 0s;

    -webkit-transition-timing-function: ease;

}

header#body + main {

	/* for main in windows */

	overflow-y: hidden;

}

main #list_header, 

main nav {

	width: 100%;

	box-sizing: border-box;

	height: 30px;

    top: 65px;

	left: 0;

	padding-left: 16px;

	position: absolute;

	display: flex;

	color: #FFFFFF;

	line-height: 20px;

	white-space: nowrap;

	z-index: 200;

}

main #list_header .spacer {

	flex-grow: 2;

	white-space: nowrap;

}

main #list_header span {

	border-radius: 6px;

	padding: 0 15px;

	height: 30px;

	line-height: normal;

	text-align: center;

	min-width: 60px;

	flex-shrink: 1;

}

main #list_header span a {

	display: block;

	position: relative;

}

main #list_header span a img[alt=ordr] {

	position: absolute;

	top: 12px;

	left: 0;

}

main #list_header span i {

	font-style: normal;

	cursor: not-allowed;

}

main #list_header span:hover {

	background-color: rgba(0,0,0,0.1);

}

main #list_header a {

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	text-decoration: none;

	color: #FFFFFF !important;

}

main .list_filter {

    display: inline-block;

    margin-top: 6px;

    padding-right: 20px;

    font-size: 12px;

	overflow: hidden;

	height: 24px;

    background-color: rgba(0,0,0,0.1);

	border-top-left-radius: 3px;

	border-bottom-left-radius: 3px;

}

main .list_filter:empty {

    display: none;

}

main .list_filter a {

	position: relative;

	overflow: hidden;

	display: inline-block;

    color: #fff !important;

	padding: 0 15px 4px 15px;

	border-radius: 0 !important;

}

main .list_filter a:hover,

main .list_filter a.current {

    background-color: rgba(0,0,0,0.2);

}

main .list_filter a:not(:first-child):hover,

main .list_filter a.current:not(:first-child) {

	padding: 0 22px 4px 8px;

}

main .list_filter a i {

	position: absolute;

    right: -16px;

    font-size: 15px;

    line-height: 24px;

	transition-property: right;

    transition-duration: 0.3s;

}

main .list_filter a:hover i,

main .list_filter a.current i {

    right: 4px;

}

main nav {

	display: flex;

	padding: 0 0 0 10px;

	height: 0;

	overflow: hidden;

	background-color: #5AB2CD;

	z-index: 1001;

	transition-property: all;

    transition-duration: 0s;

    transition-timing-function: none;

    -webkit-transition-property: all;

    -webkit-transition-duration: 0s;

    -webkit-transition-timing-function: none;

}

main nav label,

main nav a {

	color: #fff;

	height: 26px;

	display: block;

	line-height: 22px;

	padding: 0 6px;

	margin-top: 6px;

	margin-left: 6px;

	white-space: nowrap;

	cursor: pointer;

	border-radius: 2px;

	-webkit-border-radius: 2px;

	-moz-border-radius: 2px;

}

main nav a {

	background-color: rgba(0,0,0,0.1);

	padding-right: 20px;

	color: #fff !important;

}

main nav a:hover,

main nav label:hover {

	background-color: rgba(0,0,0,0.1);

}

#contents {

	padding: 0;

	margin: 0;

}

#contents .loader {

	position: absolute;

	top: 200px;

	right: 50%;

	display: block;

	margin-right: -66px;

}

#contents.listing {

	max-height: 100%;

	margin-bottom: 0;

	transition-property: height;

    transition-duration: 0s;

    transition-timing-function: none;

    -webkit-transition-property: height;

    -webkit-transition-duration: 0s;

    -webkit-transition-timing-function: none;

}

#contents.listing.trash,

#contents.listing.logs {

	min-height: 60px; 

	max-height: 88vh; 

	overflow-y: auto;

}

#contents.listing.logs {

	height: 100%; 

	background-color: #ededed;

}

#list_header.logs {

	display: none;

}

#contents.listing.photos,

#contents.listing.attachs {

	display: flex;

    flex-wrap: wrap;

   	align-content: flex-start;

    margin: 2px;

}

#contents a {

	color: #333333;

}



/* --- Items List --- */

.block {

	background-position: right bottom;

	border-width: 1px;

	border-color: #e9e9e9;

	line-height: 35px;

	color: #333;

	background-color: #fafafa;

	display: flex;

	flex-wrap: nowrap;

	border-bottom-style: solid;

	background-repeat: no-repeat;

	margin-top: 20px;

	opacity: 0;

	transition-property: height;

	transition-duration: 0s;

	transition-timing-function: none;

	-webkit-transition-property: height;

	-webkit-transition-duration: 0s;

	-webkit-transition-timing-function: none;

}

.block.highlight{

	background-color:rgba(0,0,0,0) !important;

}

.block:nth-child(2n) {

	background-color: #fdfdfd;

}

.block > a:first-of-type {

    padding: 0 0 0 10px;

}

.block:hover {

	background-color: #f2f2f2;

}

.block:hover .tools {

	color: #5AB2CD;

}

.block a.title {

	font-family: 'DIN Next LT Arabic';

	flex-grow: 2;

	white-space: nowrap;

	flex-basis: 100px;

	min-width: 120px;

	overflow-x: hidden;

	font-weight: normal;

}

.block a:first-child{

	padding-right:15px;

}

.block a sub{

	display: block;

    line-height: 20px;

    color: #6c98a5;

	margin-bottom: 5px;

}

.block a.title ~ span {

	padding: 0 15px;

	text-align: center;

	min-width: 60px;

	flex-shrink: 2;

	white-space: nowrap;

	max-width: 160px;

	position: relative;

	overflow: hidden;

}

.block a.title ~ span i {

	font-style: normal;

}

.block a.title ~ span.geo {

	width: 40px !important;

	min-width: 0;

	padding-top: 2px;

}

.block span a.ext_link {

	color: #abcc6e !important;

	font-weight: bold;

}

.block a.title ~ span.thumb {

	padding: 2px 0 0 0;

	min-width: 40px;

	width: 40px;

	height: 36px;

}

.block a.title ~ span.thumb a {

	position: relative;

	display: block;

}

.block a.title ~ span.thumb a img {

	width: 30px;

	height: 30px;

	border: 2px solid rgba(0,0,0,0.1);

	margin: 1px;

	border-radius: 40%;

}

.block a.title ~ span.thumb a u {

	width: 32px;

	height: 32px;

	color: #fff;

	background-color: #abcc6e;

	position: absolute;

	top: 2px;

	right: 14px;

	line-height: 30px;

	text-decoration: none;

	opacity: 0;

	border-radius: 40%;

}

.block a.title ~ span.thumb a:hover u {

	opacity: 1;

}

.block a.title:hover ~ span.thumb a img,

.block a.title ~ span.thumb a:hover img {

	border-color: #abcc6e;

}

.block a.title ~ span img {

	height: 24px;

	margin-top: 8px;

}

.block a.title ~ b.lang-icon {

	background-color: rgba(0,0,0,0.05);

    border-radius: 40%;

    margin: 8px 4px;

    box-sizing: border-box;

    width: 24px;

    height: 24px;

	font-size: 12px;

    text-align: center;

    line-height: 24px;

	color: #5d5d5d;

}

.block a:hover {

	color: #5AB2CD !important;

}

.block input.title {

	flex-grow: 2;

	width: 100%;

	margin-top: 7px;

}

.block span .chart {

	display: block;

	width: 32px;

	height: 32px;

	margin-top: 4px;

	overflow: hidden;

	background-color: rgba(0,0,0,0.1);

	border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

}

.block span .chart u {

	display: block;

	color: #fff;

	text-align: center;

	text-decoration: none;

	height: 100vh;

	font-style: normal;

	font-size: 12px;

}

.block a.avatar {

	width: 28px;

    height: 28px;

	margin: 5px 0 0 5px;

	border-radius: 50%;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center center;

	border: 2px solid #ccc;

}

.block a.avatar.Y {

	border-color: #68cce0;

}

.block .trans {

    width: 40px;

	height:40px;

	line-height:40px;

    text-align: center;

    border-radius: 50%;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

}

.block .trans:hover {

    background-color: rgba(0,0,0,0.05);

    color: #5AB2CD;

}

div.tools {

	color: rgba(0,0,0,0.7);

    position: relative;

    width: 40px;

	line-height: 40px;

    text-align: center;

    cursor: pointer;

	border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

}

div.tools:hover {

	color: #5AB2CD;

	background-color: rgba(0,0,0,0.05);

}

div.tools:before {

    content: 'more_vert';

}

div.tools:focus p.menu,

div.tools:hover p.menu {

	display: block;

    min-width: 100px;

	max-height: 200px;

}

div.tools p.menu {

	font-family: 'DIN Next LT Arabic Light';

	font-size: 14px;

	color: rgba(0,0,0,1);

	background-color: rgba(255,255,255,1);

	position: absolute;

	z-index: 1;

	display: block;

	left: 10px;

	top: -15px;

	padding: 5px 0;

	max-height: 0;

	width: 0;

	min-width: 0;

	overflow: hidden;

	direction: rtl;

	border-radius: 6px;

	-moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15);

	-webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15);

	box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15);

	transition-property: min-width, width, max-height;

	transition-duration: 0.5s;

	transition-timing-function: ease;

	-webkit-transition-property: min-width, width, max-height;

	-webkit-transition-duration: 0.5s;

	text-align: right;

}

div.tools p.menu a {

	display: block;

	line-height: normal;

	padding: 5px 10px;

}

div.tools p.menu a[href='#lock'] {

	border-top-style: solid;

	border-width: 1px;

	border-color: rgba(0,0,0,0.1);

}

div.tools p.menu a:hover {

	background-color: rgba(0,0,0,0.05);

}

.block .list-icon {

    text-align: center;

    line-height: 40px;

}

.block .list-icon:empty {

	width: 20px !important;

}

main.statics {

	background:#FDFDFD;

	margin-top:20px;

	min-height: 100px;

	max-height: calc(100vh - 520px);

}

main.statics .block {

	opacity: 1;

	padding-right: 10px;

}

main.statics .block span.date {

	padding-left: 10px;

}



/* --- Photo Album --- */

#contents.listing.photos div,

#contents.listing.attachs div {

	margin: 5px;

	border-radius: 10px;

	max-width: 200px;

	flex-basis: 22%;

	flex-grow: 1;

	box-sizing: border-box;

	height: 120px;

	overflow: hidden;

	position: relative;

}

#contents.listing.photos div > a,

#contents.listing.attachs div > a {

	height: 120px;

	display: block;

	background-position: center center;

	background-size: cover;

	box-sizing: border-box;

	background-color: #F5FFEA;

	background-repeat: no-repeat;

}

#contents.listing.photos div .tools,

#contents.listing.attachs div .tools {

	background-position: center bottom;

	padding: 20px 6px 0px 6px;

	width: 100%;

	height: 40px;

	display: flex;

	flex-wrap: nowrap;

	justify-content: space-around;

	direction: rtl;

	text-align: center;

	position: absolute;

	text-align: right;

	bottom: 0px;

	right: 0;

	opacity: 0;

	background-image: url('images/photos_bg.png');

	background-repeat: repeat-x;

}

#contents.listing.photos div .tools a,

#contents.listing.attachs div .tools a {

	line-height: 40px;

	flex-grow: 1;

	color: #fff;

}

#contents.listing.photos div .tools a:hover,

#contents.listing.attachs div .tools a:hover {

	line-height: 30px;

}

#contents.listing.photos div:hover .tools,

#contents.listing.attachs div:hover .tools {

	opacity: 1;

}

/* Trash Style */

.trash_block {

	margin: 5px;

	flex-grow: 1;

	max-width: 200px;

	float: right;

	padding: 20px 10px 10px 10px;

	text-align: center;

	font-size: 14px;

	color: #FFFFFF;

	display: flex;

	flex-wrap: wrap;

	position: relative;

	border-radius: 4px;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	background-color: #abcc6e;

}

.trash_block.mrN {

	background-color: #2FB39D;

}

.trash_block:hover {

	background-color: #00C4D9;

}

.trash_block span {

	width: 100%;

	display: block;

	margin-bottom: 20px;

}

.trash_block a.title {

	display: block;

	font-size: 24px;

	line-height: 40px;

	width: 100%;

	flex-shrink: 0;

}

.trash_block a {

	color: #FFFFFF !important;

}

.trash_block a.title ~ a {

	background-color: rgba(0,0,0,0.1);

	display: block;

	flex-grow: 2;

}

.trash_block a.title ~ a:hover {

	background-color: rgba(0,0,0,0.2);

}



/* right menus */

aside {

	direction: rtl;

	padding-top: 130px;

	/*background-color: #ededed;*/

	background-color: #363636;

	color: #fff;

}

aside header {

	text-align: right;

	padding: 6px 20px 0 20px;

	height: 80px;

	color: #fff;

	background: #363636;

	position: fixed;

	top: 0px;

	right: 0px;

	width: 100%;

	z-index: 1000;

	box-sizing: border-box;

}

aside header h2 {

	height: 28px;

	line-height: 40px;

	text-transform: uppercase;

}

aside header h4 {

	font-size: 14px;

	color: #ccc;

}

header .avatar {

	background-size: cover;

	float: right;

	margin-left: 10px;

	margin-top: 10px;

	background-position: center center;

	width: 48px;

	height: 48px;

	background-image: url('images/profile/1.svg');

	background-repeat: no-repeat;

	border-style: solid;

	color: #777;

	border-radius: 40%;

}

header .avatar:hover {

	color: #abcc6e;

}

aside nav {

	height: 36px;

	padding-bottom: 10px;

	color: #fff;

	background-color: #363636;

	display: flex;

	justify-content: space-around;

	position: fixed;

	top: 80px;

	right: 0px;

	width: 100%;

	z-index: 1000;

}

aside nav a {

	display: block;

	font-size: 12px;

	width: 36px;

	height: 36px;

	line-height: 36px;

	text-align: center;

	border-radius: 40%;

}

aside nav a:hover,

aside nav a.red {

	color: #fff !important;

	background-color: #5AB2CD;

}

aside section h3 {

	font-size: 14px;

    color: #a7a7a7;

    padding: 10px 25px;

    margin-top: 15px;

}

aside section:first-child h3 {

    margin-top: 0;

}

aside section hr {

	color: rgba(255,255,255,0.1);

    margin-top: 20px;

}

aside section .row {

	position: relative;

	display: flex;

	height: 40px;

	padding: 0 20px;

}

aside section .row > a {

	position: relative;

	flex-grow: 3;

	height: 40px;

	line-height: 40px;

}

aside section .row a ~ span {

	line-height: 40px;

}

aside section .row:hover {

	background-color: rgba(0,0,0,0.2);

}

aside section .row:hover div.tools {

	opacity: 1;

}

aside section .row div.tools {

	margin-left: -16px;

	line-height: 40px;

	opacity: 0;

	color: rgba(255,255,255,0.9);

}

aside section .row i {

	float: right;

    color: #5AB2CD;

    margin-left: 12px;

}

aside section .row:hover i {

	color: #2FB39D;

}

.form {

	display: none;

	transition-property: all;

    transition-duration: 0s;

    transition-timing-function: none;

    -webkit-transition-property: all;

    -webkit-transition-duration: 0s;

    -webkit-transition-timing-function: none;

}

form#menuadd {

	background-color: rgba(255,255,255,0.9);

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	padding: 10px;

}

form#menuadd input[type=text],

form#menuadd input[type=url] {

	height: 26px;

	padding: 0 5px;

	margin: 2px 4px;

	flex-grow: 2;

}

form#menuadd input[type=number],

form#menuadd select {

	height: 26px;

	margin: 2px 4px;

	width: 70px;

}

form#menuadd select[name=cat] {

	flex-grow: 2;

}

form#menuadd textarea {

	margin: 3px 4px;

	flex-grow: 2;

	min-height:80px;

	border-width: 1px;

	border-color: #e5e5e5;

	border-style: none none solid none;

}

form#menuadd input[type=submit] {

	background-position: center center;

	border-style: none;

	margin: 18px 6px;

	width: 50px;

	height: 50px;

	cursor: pointer;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

	border-radius: 50%;

	line-height: 56px;

	color: #fff;

	text-align: center;

	background-color: #5AB2CD;

	box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);

	-moz-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);

	background-image: url('images/save.png');

	background-repeat: no-repeat;

}

form#menuadd .elmnts {

	color: #333;

    padding: 5px;

    margin: 2px 4px;

    background-color: rgba(0,0,0,0.05);

    width: 100%;

}

form#menuadd .elmnts * {

	cursor: pointer;

}



/* right menu holder */

.placeholder {

	background-color: #5AB2CD;

	display: inline-block;

	margin:5px 7px;

	border-radius: 10px;

}

.mongid_logo {

	background-size: 300px;

	background-image: url('images/Mable-logo.svg');

	background-position: center center;

	width: 100%;

	height: 333px;

	position: absolute;

	margin: auto;

	top: 25%;

	text-align: center;

	background-repeat: no-repeat;

}

/* - in form - */

form#entry,form#report {

	text-align: right;

	width: 100%;

	margin: 0;

	padding: 10px 15px;

	vertical-align: top;

	direction: rtl;

	position: relative;

	box-sizing: border-box;

	background-color: #ededed;

}
.row-full {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    column-gap: 10px;
}
form#entry h3 {

    display: flex;

    width: 100%;

    padding: 10px 0;

}

form#entry a.auth {

	background-position: right center;

	background-color: #5AB2CD;

	float: left;

	background-image: url('images/auth.png');

	background-repeat: no-repeat;

	padding: 0 20px 0 10px;

	height: 36px;

	line-height: 30px;

	width: 148px;

	color: #fff;

	display: block;

	text-align: end;

	margin-left: 5px;

	text-shadow: 1px 1px 0px rgba(0,0,0,0.3);

	border-radius: 6px;

}

form#entry a.auth:hover {

	background-color: #2FB39D;

}

form#entry[name=auth] input[type=text] {

	margin: 20px 50px 0 0;

	background-position: right center;

	width: 200px;

	height: 40px;

	text-align: center;

	font-size: 24px;

	background-image: url('images/auth.png');

	background-repeat: no-repeat;

}

form#entry[name=auth] h4 {

	padding: 10px 5px;

}

form#entry[name=auth] h4:before {

	content: 'phone_iphone';

	font-family: 'Material Icons';

	line-height: 30px;

	font-size: 26px;

	float: right;

}

form#entry[name=auth] a {

	background-position: center center;

	display: block;

	width: 142px;

	height: 44px;

	float: right;

	margin-right: 10px;

	background-image: url('images/download_google.png');

	background-repeat: no-repeat;

}

form#entry[name=auth] a.apple {

	background-image: url('images/download_apple.png');

}

form#entry .ovrflw {

	overflow: auto;

	overflow-x: hidden;

	width: 100% !important;

	height: auto !important;

	display: flex;

	flex-wrap: nowrap;

	justify-content: space-between;

}

.wrp {

	flex-wrap: wrap !important;

}

form#entry .ovrflw:not(:first-child) {

	visibility: hidden;

	background-color: #ededed;

	position: absolute;

    top: 0;

    right: 0px;

    width: 980px;

    padding: 10px;

    box-sizing: border-box;

}

form#entry .ovrflw.current {

	visibility:visible;

}

form#entry .lang-tabs {

    position: fixed;

	display: flex;

    top: 66px;

    right: 312px;

    height: 34px;

    line-height: 34px;

    text-align: center;

    cursor: pointer;

}

form#entry .lang-tabs span {

	display: block;

    width: 100px;

    background-color: rgba(0,0,0,0.2);

    color: #fff;

    height: 34px;

	margin: 0 1px 0 0;

	border-top-left-radius: 3px;

	border-top-right-radius: 3px;

}

form#entry .lang-tabs span.current {

    background-color: #ededed;

    color: #000;

}

form#entry .lang-tabs span:not(.current):hover {

    background-color: rgba(0,0,0,0.4);

}

form#entry .lang-tabs span:nth-child(2) {

    right: 412px;

}

form#entry .lang-tabs span:nth-child(3) {

    right: 512px;

}

form#entry .ovrflw .right {

	align-content: flex-start;

    width: 30%;

    padding-left: 5px;

    margin-left: 10px;

    border-left-style: solid;

    border-width: 1px;

    border-color: #ccc;

    display: flex;

    flex-wrap: wrap;

	flex-grow: 0;

}

form#entry .ovrflw.flp .right {

    width: 70%;

}

form#entry .ovrflw.fxd .right {

	position: fixed;

	height: 100vh;

}

form#entry .ovrflw .right input[type=text] {

	flex-grow: 1;

}

form#entry .ovrflw .right label {

    width: 100%;

	display: block;

	line-height: 30px;

    padding-bottom: 4px;

}

form#entry .ovrflw .left {

	width: 70%;

}

form#entry .ovrflw.flp .left {

	width: 30%;

}

form#entry .ovrflw.fxd .left {

	margin-right: 315px;

	background-position: center center;

	background-image: url('images/loader.gif');

	background-repeat: no-repeat;

}

form#entry img.preview {

	margin-top: 1px; 

	max-width:30px; 

	max-height:18px; 

	float: right

}

form#entry img.thumb {

	padding: 5px;

	border: 1px solid #CCCCCC;

	max-width: 100px;

	max-height: 60px;

	position: absolute;

	left: 0px;

	top: 5px;

}

form#entry input[name$=name],

form#entry input[name$=url],

form#entry input[type=url],

form#entry input[name=link]  {

	flex-grow: 2;

	width: 70%;

}

form#entry input[type=email] {

	flex-grow: 1;

	width: 50%;

}

form#entry input[name$=url],

form#entry input[type=url],

form#entry input[type=email],

form#entry input[name^=link]  {

	direction: ltr;

}

form#entry input[name=img_cmnt] {

	width: 75%;

}

form#entry input[type=date] {

	text-align: center;

}

form#entry[name=carts] input[type=text]  {

	width: 99%;

}

form#entry textarea {

	width: 100%;

	height: 320px;

	direction: rtl;

	margin-bottom: 5px;

}

form#entry textarea[name=emailslist] {

	width: 290px;

	height: 260px;

	direction: ltr;

	margin-bottom: 5px;

}

form#entry textarea[name=field_options],

form#entry textarea[name=in_addon],

form#entry textarea[name^=info],

form#entry textarea[name=flds] {

	height: 116px;

	width: 98%;

	direction:rtl;

}

form#entry .attach-tools {

	background-color: rgba(0,0,0,0.1);

    border-radius: 6px;

    line-height: 44px;

    height: 44px;

    margin-top: 10px;

    padding: 0;

    width: 100%;

    justify-content: space-between;

	display: flex;

	position: relative;

}

form#entry .attach-tools b {

	padding: 0 15px;

	position: relative;

}

form#entry .attach-tools b u {

	right: auto !important;

	left:-11px;

}

form#entry .attach-tools a {

	font-size: 22px;

    line-height: 44px;

    width: 44px;

    height: 44px;

    flex-grow: 1;

    text-align: center;

}

form#entry .attach-tools a:hover,

form#entry .attach-tools a.current {

	color: #5AB2CD;

	background-color: rgba(0,0,0,0.1);

}

form#entry + #attached {

	padding: 4px;

	height: 510px;

	flex-wrap: wrap;

	align-content: flex-start;

    border-style: solid;

    border-color: #ccc;

    border-width: 1px 1px 2px 1px;

	background-color: #fff;

	overflow: auto;

	box-sizing: border-box;

	display: none;

	overflow-x: hidden;

	text-align: right;

	direction:rtl;

	position: absolute;

    width: 68%;

    z-index: 101;

    bottom: 65px;

    left: 10px;

}

form#entry + #attached .dz-preview {

	cursor: move;

}





form[name=books] legend {

	color: #64bccc;

	font-size: 20px;

	padding: 0 10px 10px 10px;

    text-align: center;

}

form[name=books] fieldset {

	 width: 100%;

	 display: block;

	 box-sizing: border-box;

	 margin-bottom: 5px;

}

form[name=books] label {

	display: block;

	width: 120px;

	float: right;

	white-space: nowrap;

}

form[name=books] input[type=date] {

	width: 160px;

}

form[name=books] input[type=text] {

	width: 70%;

}

form#report[name=books] input[type=text] {

	width: 60%;

}

form#entry[name=books] textarea {

	margin-top: 5px;

	width: 100%;

	height: 100px;

	box-sizing: border-box;

}

/* Pie Chart */
.pr-chart-ctrl {
  padding:0 !important;
}
.pr-chart-ctrl .pr-chart {
    display:block; 
    position:relative; 
    text-align:center; 
}
.pr-chart-ctrl .pr-chart canvas {
	display:block; 
	margin:0 auto; 
	padding:0; 
	vertical-align:center;
}
.pr-chart-ctrl .pr-chart {
	margin-top:4px;
}
.pr-chart-ctrl .pr-chart u {
	text-decoration: none;
	position: absolute;
	width: 32px;
	height: 32px;
	text-align: center;
	left: 0;
	font-size: 12px;
	line-height: 32px;
	font-style: normal;
	font-weight:bold;
}

/* in settings */

.btns a {

	display: block;

    margin: 5px;

    background-color: #dcdcdc;

    padding: 10px 10px 10px 20px;

    border-radius: 3px;

}

.btns a:hover {

    background-color: #5AB2CD;

	color: #fff;

}

.btns a:hover * {

	color: #fff;

}

.btns a i {

	float: right;

	margin-left: 5px;

}

form#entry[name=settings] {

	padding: 10px 10px 50px 10px;

}

form#entry[name=settings] .ovrflw {

	flex-wrap: wrap;

}

form#entry[name=settings] .ovrflw > div {

	margin-right: 10px;

	width: 49%;

	display: flex;

	flex-wrap: nowrap;

}

form#entry[name=settings] select {

	width: 70% !important;

    min-width: auto !important;

	flex-basis: auto !important;

    height: 35px;

    border-style: solid;

    border-color: #ccc;

    border-width: 1px 1px 2px 1px;

    box-sizing: content-box;

}

form.mr-love select {

	flex-grow: 1;

	width: 138px;

    height: 38px;

    border-style: solid;

    border-color: #ccc;

    border-width: 1px 1px 2px 1px;

}

form.mr-love select.min {

	width: 45%;

}

form#entry.mr-love label.title,form#report.mr-love label.title  {

	display: block;

    width: 80%;

    min-width: 200px;

    white-space: nowrap;

	line-height: 40px;

	color: #333;

	font-family:'DIN Next LT Arabic';

}

form#entry.mr-love[name=settings] label.title {

    width: auto;

    min-width: 200px;

}

form.mr-love .row-full {

	display: flex;

	flex-wrap: nowrap;

	width: 100%

}

form.mr-love input[type=text],

form.mr-love input[type=search],

form.mr-love input[type=email],

form.mr-love input[type=number],

form.mr-love input[type=password],

form.mr-love input[type=date],

form.mr-love input[type=url],

form.mr-love input[type=tel] {

	border-width: 1px 1px 2px 1px;

	height: 25px;

	width: 50%;

	flex-grow: 1;

	padding: 5px 5px 5px 5px;

	background-color: #fff;

	color: #333;

	border-style: solid;

	border-color: #ccc;

	box-sizing: content-box;

}

form[name=settings] textarea,

form[name=adminpages] textarea{

	padding: 10px;

	width: 50%;

	height: 200px;

	border-style: solid;

	border-color: #ccc;

	border-width: 1px 1px 2px 1px;

}

form[name=settings] input[type=text],

form[name=settings] input[type=url],

form[name=settings] input[type=email],

form[name=settings] input[type=tel],

form[name=settings] input[type=password],

form[name=settings] input[type=date],

form[name=settings] input[type=number],

form[name=settings] textarea,

form[name=settings] select {

	margin: 0;

}

form[name=settings] input.ltr {

	width:46% !important;

	text-align:center;

	direction:ltr;

}

form#entry[name=settings] textarea {

	height: 60px;

	box-sizing: border-box;

	width: 99%;

}

form#entry[name=settings] .submit-btns {

	position: fixed;

    bottom: 0;

    right: 0;

    padding: 10px 20px;

    background-color: #ededed;

    width: 100%;

    border-top-style: solid;

    border-width: 1px;

    border-color: #ccc;

}

form#entry .textbox {

	width: 47%;

	float: right;

	margin: 0 0 5px 15px;

	display: flex;

	flex-wrap: wrap;

}

form#entry .textbox label {

	display: block;

	flex-grow: 1;

}

form#entry .textbox input[type=number] {

	max-width: 64px;

}

form#entry .adminpages {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    width: 100%;

}

form#entry .adminpages h4 {

	display: block;

	flex-basis: 26%;

	min-width: 125px;

	margin: 2px 0;

	line-height: 30px;

}

form#entry .adminpages label {

	margin-top: 6px;

	float: right;

	width: auto !important;

	line-height: 10px !important;

	padding-bottom: 2px !important;

}

form#entry .switch {

	position: relative;

	display: inline-block !important;

	width: 52px !important;

	margin: 10px 0;

	padding: 0 !important;

    height: 24px;

}

form#entry .switch input { 

	opacity: 0;

	width: 0;

	height: 0;

}

form#entry .slider {

	position: absolute;

	cursor: pointer;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: #bbb;

	-webkit-transition: .4s;

	transition: .4s;

}

form#entry .slider:before {

	position: absolute;

	content: '';

	height: 16px;

	width: 16px;

	left: 4px;

	bottom: 4px;

	background-color: white;

	-webkit-transition: .4s;

	transition: .4s;

}

form#entry input:checked + .slider {

	background-color: #abcc6e;

}

form#entry input:focus + .slider {

	box-shadow: 0 0 1px #2196F3;

}

form#entry input:checked + .slider:before {

	-webkit-transform: translateX(26px);

	-ms-transform: translateX(26px);

	transform: translateX(26px);

}

form#entry .slider.round {

	border-radius: 14px;

}

form#entry .slider.round:before {

	border-radius: 50%;

}

form#entry .tools {

	display: flex;

	position: absolute;

	bottom: 5px;

    left: 5px;

    height: 46px;

    padding: 5px;

    box-sizing: border-box;

    direction: rtl;

    justify-content: flex-start;

}

form#entry .tools a {

	font-family: inherit;

	height: 36px;

	width: 36px;

	font-size: 18px;

	text-align: center;

	line-height: 36px;

	display: block;

	background-color: rgba(0,0,0,0.1);

	color: rgba(0,0,0,0.87);

	margin-right: 8px;

	position: relative;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

	border-radius: 50%;

}

form#entry .tools a u,

form#entry .attach-tools b u {

	background-color: #5AB2CD;

	height: 18px;

	min-width: 18px;

	text-align: center;

	font-size: 10px;

	display: block;

	margin: 1px 5px 0 1px;

	color: #FFFFFF;

	position: absolute;

	top: -5px;

	right: -5px;

	line-height: 18px;

	z-index: 101;

	border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

	text-decoration: none;

}

form#entry .tools a:hover, 

form#entry .tools a.current {

	background-color: #abcc6e;

	color: #fff;

}

form#entry input[type=submit],

form#report input[type=submit],

form#entry button {

	border-style: none;

	min-width: 100px;

	height: 36px;

	padding: 0px 16px 10px 16px;

	background-color: #abcc6e;

	font-size: 16px;

	color: #FFFFFF;

	cursor: pointer;

	border-radius: 5px;

}

form#entry button {

	margin-right: 8px;

	color: rgba(0,0,0,0.87);

	background-color: transparent;

	font-weight: bold;

}

form#entry button:hover {

	background-color: rgba(0,0,0,0.1);

}

form#entry input[type=submit]:disabled {

	border-color: #484848;

	background-color: #484848;

	opacity:0.5;

	cursor:not-allowed;

}

form#entry input[type=submit]:disabled:hover {

	background-position: right bottom;

}

form#entry input[name=upload] {

	width: 106px;

}

form#entry input[type=submit]:hover,

form#report input[type=submit]:hover {

	background-color: #5AB2CD;

}

form#entry .icn {

	line-height: 38px;

    float: left;

    margin-left: 22px;

}



/* STATICS */

form.mr-love[name='statics'] {

	padding: 10px 20px;

	background: rgba(0,0,0,0.05);

}

form.mr-love[name='statics'] input[type=submit] {

	padding: 0px 16px 6px 16px;

}

.dashboard {

	padding: 0 10px 0 0;

}

.dashboard h1 {

	width: 100%;

	margin: 5px 10px;

	font-weight: normal;

}

.dashboard .tables {

	display: flex;

	flex-wrap:wrap;

}

.dashboard .tables > section {

	flex-basis: 300px;

    flex-grow: 1;

	max-width: 50%;

    margin: 10px;

    padding: 0 10px 10px 10px;

    background-color: rgba(0,0,0,0.05);

    border-radius: 6px;

}

.dashboard .tables > section h2 a {

	display: block;

    margin: 5px 0;

    padding: 0 5px 5px 5px;

    background-color: rgba(0,0,0,0.05);

	position: relative;

    border-radius: 6px;

}

.dashboard .tables > section h2 a span {

	top: 8px;

	left: 10px;

	position: absolute;

}

.dashboard .tables > section h2 a:hover {

	color: #fff;

    background-color: #abcc6e;

}

.dashboard .tables > section .row-nums {

	display: flex;

}

.dashboard .tables > section .row-nums div {

	width: 30%;

	text-align: center;

	flex-grow: 1;

	border-radius: 6px;

}

.dashboard .tables > section .row-nums div b {

	display: block;

	font-size: 36px;

	font-weight: normal;

}

.dashboard .tables > section .row-nums div span {

	display: block;

    margin: 5px;

    padding: 0 5px 5px 5px;

    border-radius: 6px;

	background-color: rgba(0,0,0,0.05);

}

#all-counters {

    display: flex;

    justify-content: center;

    height: 40px;

}

#all-counters div {

	margin: 10px 5px;

	height: 26px;

}

#all-counters i {

	font-style: normal;

	padding: 0 10px 4px 10px;

	color: #333;

	background: #ccc;

    border-radius: 0 3px 3px 0;

}

#all-counters span {

	padding: 0 10px 4px 10px;

	color: #fff;

    border-radius: 3px 0 0 3px;

}



/* addons */

div.avatars {

	display: flex;

    flex-wrap: wrap;

}

div.avatars img {

	border-style: solid;

	border-width: 3px;

	border-color: transparent;

	width: 48px;

	height: 48px;

	cursor: pointer;

	margin:6px;

	border-radius: 50%;

	-moz-border-radius: 50%;

	-webkit-border-radius: 50%;

}

div.avatars img.selected,

div.avatars img:hover {

	border-color: #abcc6e;

	transform: scale(1.1);

}

#preview {

	margin: auto 10px 10px 10px;

	padding: 5px;

	box-sizing: border-box;

	direction: rtl;

	text-align: center;

	border-color: rgba(0,0,0,0.12);

}

#preview img{

	max-height: 260px;

	max-width: 100%;

}



/* Pagination */

div.pagination {

	color: #48b9ef;

	display: flex;

	justify-content: flex-start;

	align-items: flex-start;

	position: fixed;

	white-space: nowrap;

	left: 100px;

	bottom: 32px;

	width: 15%;

	direction: ltr;

	padding: 10px 0;

}

div.pagination * {

	border-radius: 18px;

	-webkit-border-radius: 18px;

	-moz-border-radius: 18px;

}

div.pagination a,

div.pagination span.current {

	color: #fff;

	background-color: #abcc6e;

	margin: 0 4px;

	width: 36px;

	height: 36px;

	display: block;

	text-decoration: none;

	text-align: center;

	line-height: 36px;

}

div.pagination a:first-child,

div.pagination a:last-child {

	opacity: 0;

	font-family: 'Material Icons';

	font-size: 20px;

	text-align: center;

	margin-left: -44px;

}

div.pagination input.first_page:after {

	content: '1';

}

div.pagination input[type=number]::-webkit-inner-spin-button, 

div.pagination input[type=number]::-webkit-outer-spin-button { 

  -webkit-appearance: none; 

  margin: 0; 

}

div.pagination:hover a,

div.pagination u {

	opacity: 1;

	margin-left: 4px;

}

div.pagination:hover u {

	opacity: 0;

	margin-left: -90px;

}

div.pagination a:hover, 

div.pagination a:active {

	background-color: #484848;

}

div.pagination span.current {

	background-color: #484848;

}

div.pagination input {

	margin: 0 4px;

	background-color: #484848;

	width: 36px;

	height: 36px;

	padding: 0;

	border-style: none;

	color: #fff;

	text-align: center;

	z-index: 100;

}

div.pagination u {

	margin-left: -40px;

	background-color: #C0C0C0;

	width: 74px;

	height: 36px;

	line-height: 32px;

	padding: 0 10px;

	color: #fff;

	text-align: right;

	text-decoration: none;

}

div.pagination input:focus {

	background-color: #5AB2CD;

}

.hide {

	opacity: 1 !important;

	margin-top: 0;

}

.Y {

	display:inherit !important;

}

#fancybox-close {

	background-color: #abcc6e;

}

#fancybox-close:hover {

	background-color: #5AB2CD;

}

table.stripe thead tr{

	background-color: #abcc6e;

	color:#fff;

}

table.stripe thead th{

	padding:5px 2px;

	min-width:54px;

	font-size:13px;

}

table.stripe{

	margin-bottom:10px;

	border-collapse: collapse;

	width: 100%;

}

table.stripe tr:nth-child(even){

	background-color:#fefefe;

}

table.stripe tbody td{

	padding:10px;

	font-size:14px;

}

table.stripe thead th:first-child{

	border-radius:0 3px 3px 0;

	padding-right:10px;

}

table.stripe thead th:last-child{

	border-radius:3px 0 0 3px;

}

table.stripe tr td:not(:first-of-type),table.stripe tr th:not(:first-of-type) {

	text-align:center;

}

table.stripe input[type=radio] {

	width: 20px;

    height: 20px;

    cursor: pointer;

}

.exam-info{

	position:relative;

	overflow:hidden;

	border-radius: 6px;

    width: 100%;

    background: #fff;

    padding: 10px 15px;

    box-sizing: border-box;

    border-right: 6px solid #2FB39D;

}
.doc-info{
	margin-bottom:30px;
}
.doc-info small{
	flex-shrink: 0;
}
.doc-info > i {
	transform:rotate(-20deg) !important;
}
.exam-info h3{

	padding:0 !important;

	font-size:16px;

	font-weight:bold;

}

.exam-info p{

	display:block;

	color:#363636;

	margin:0;

}

.exam-info > i{

	position: absolute;

    bottom: -10px;

    left: -18px;

    font-size: 100px;

    opacity: 0.15;

    transform: rotate(45deg);

	color:#5AB2CD;

}

.exam-info div{

	display:flex;

	justify-content:space-between;

	align-items:center;

	margin-bottom:5px;

	font-weight:bold;

}

progress[value] {

	-webkit-appearance: none;

	 appearance: none;

	width:100%;

	margin:10px 0;

	height:7px;

}

progress[value]::-webkit-progress-bar {

	background-color: #fefefe;

	border-radius:3px;

	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15) inset;

}

progress[value]::-webkit-progress-value {

	background-color:#5AB2CD;

	border-radius:3px;

	transition: width 0.5s ease;

}

.tokenize-standards + .tokenize{

	height:100px;

}
.token{
	overflow:hidden;
}
.chk-list{

	margin-top:20px;

}

.chk-list label.title{

	float:none !important;

	margin-bottom:10px;

	margin-right:10px;

	font-weight:bold;

}

.chk-list h4{

	min-width:100px !important;

	display:inline-flex !important;

}

.evlovrflw{

	overflow:auto;

	max-height:60vh;

	padding-right:10px;

}

canvas {

	transition: none;

}

.google-login{

    display: block;

    background-color: #c94130;

    color: #fff;

    text-decoration: none;

    text-align: center;

    padding: 15px;

    border-radius: 4px;

    line-height: 20px;

    position: relative;

    padding-right: 53px;

}

.info-txt{
	position: relative;
    top: -6px;
    color: #363636;
    font-weight: 600;
    font-size: 15px;
}
.info-txt i{
	vertical-align: middle;
}
.access-alert i{

	display: block;

    text-align: center;

    font-size: 42px;

}

.google-login:hover span {

    width: 100%;

}

.google-login span{

    background-image: url(../images/google.svg);

    width: 40px;

	height: 100%;

    display: inline-block;

    background-size: 25px;

    background-position: right 7px center;

    vertical-align: middle;

    background-color: rgb(0 0 0 / 10%);

    margin-left: 15px;

    position: absolute;

    right: 0;

    top: 0;

    background-repeat: no-repeat;

    padding: 5px;

    box-sizing: border-box;

    border-radius: 0 4px 4px 0;

}
.items-list{
    width: 100%;
    overflow-y: auto;
}
.item_name{
	min-width:300px;
}
.round-icon{
    color: #a9a9a9;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 36px;
    border-radius: 50%;
    margin-top: 5px;
}
.round-icon.selected {
    background-color: rgba(0,0,0,0.1);
	color:#c2453f;
}
.round-icon:hover {
    background-color: rgba(0,0,0,0.1);
}
form[name=apps] .item_row input, form[name=apps] .item_row select {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    padding: 5px;
    height: 38px;
    box-sizing: border-box;
}
@media screen and (max-width: 720px) {

	header {

		height: 60px;

		line-height: 55px;

	}

	header#body .icons {

		left: 5px !important;

		top: 12px !important;

		line-height: normal !important;

	}

	main nav {

	    top: 24px !important;

	}

	main nav label, 

	main nav a {

	    margin-top: 6px !important;

	}

	#list_header {

		display: none !important;

	}

	header#body form {

		display: none !important;

	}

	header .notifications {

		display: none !important;

	}

	header .bell {

		display: none !important;

	}

}

@media screen and (max-width: 520px) {

	section#login {

		width: 80%;

		max-height: 100%;

		top: 20%;

		right: 10%;

		flex-wrap: wrap;

	}

	section#login aside {

		width: 100% !important;

		display: flex;

		position: relative;

	}

	section#login aside .avatar {

		height: 60px;

		width: 60px;

		margin: 25px 25px 25px auto;

	}

	section#login aside .avatar:after {

		width: 64px;

		height: 64px;

		right: -6px;

		top: -6px;

		border-width: 4px;

	}

	section#login div:last-child {

		width: 100%;

		box-sizing: border-box;

		padding: 20px 20px 0 20px;

	}

	section#login h1 {

		display: none;

	}

	section#login h3 {

		width: calc(100% - 110px);

		margin-top: 32px;

		text-align: justify;

	}

	section#login input[type=text],

	section#login input[type=password] {

		width: 100%;

	}

	section#login input[type=submit] {

		margin: 10px calc(100% - 48px) 16px 0;

	}

	section#login span {

		bottom: 30px;

		left: 84px;

	}

	section#login a#btn {

		right: auto;

		left: 15px;

		bottom: 15px;

		display: none;

	}

	#clock {

		display: none;

	}

	#logo {

		width: 100%;

		height: 80px;

		top: 20px;

		left: 0;

	}

	#rights {

		border-style: none;

		height: auto;

		position: absolute;

		bottom: 15px;

		left: 0;

		text-align: center;

	}

	#rights .icon {

		width: 48px;

		height: 48px;

		line-height: 48px;

		font-size: 36px;

		margin: 10px;

	}

	#rights hr {

		margin-top: 0;

	}

	.add_new {

		bottom: 0;

	}

	.add_new a:first-child{

		bottom: 20px;

		right: 20px;

		left: auto;

	}

	.add_new a:nth-child(n+2) {

		bottom: 34px;

		left: -12px;

	}

	.add_new:hover a:nth-child(n+2) {

		bottom: 86px;

	}

	header#body form {

		display: none;

	}

	.block {

		width: 100%;

	}

	.block a.title ~ span {

		display: none;

	}

	.logs .block a.title ~ span {

		display: block;

	}

	.trash_block {

		max-width: 100%;

		float: none;

	}

	form#entry textarea {

		max-height: 200px;

	}

	form#entry #attached {

		height: 207px;

	}

	form#entry input[type=submit],

	form#entry button {

		min-width: 30%;

	}

	div.pagination {

		left: 10px;

		bottom: 20px;

		width: 50%;

	}

}

@media screen and (max-width: 400px) {

	header {

		height: auto;

		line-height: 40px;

	}

	header#body {

		padding: 0 0 16px 5px !important;

	}

	form#entry input[type=text],

	form#entry input[type=password],

	form#entry input[type=email] {

		width: 96% !important;

	}

}

@media screen and (max-width: 300px) {

	header#body .icons {

		display: none;

	}

	header#body {

		padding: 0 0 5px 5px !important;

	}

}