/*//////////////////////////////////////////////////////////////////////////////
// ##########################################################################///
// # DM System 1.0                                                          # //
// ########################################################################## //
// #                                                                        # //
// #               --  DM SYSTEM IS NOT FREE SOFTWARE  --                   # //
// #                                                                        # //
// #  ============ Programming & Designing By Dilovan Matini =============  # //
// #      Copyright © 2013 - 2014 Dilovan Matini. All Rights Reserved.      # //
// #------------------------------------------------------------------------# //
// #------------------------------------------------------------------------# //
// # Website: www.qkurd.com                                                 # //
// # Contact us: contact@qkurd.com                                          # //
// ########################################################################## //
//////////////////////////////////////////////////////////////////////////////*/

/**************  The custum css classes  ************/

/*
	The main 2 div layer after body tag
*/
.main-layer{
	width: 100%;
	text-align: center;
}
.block-layer.computer-device, .block-layer.tablet-device{
	width: 960px;
	display: inline-block;
	border: #999 1px solid;
	border-width: 0 1px 1px;
	background-color: #e5e5e5;
	-webkit-box-shadow: 0 5px 60px rgba(0,0,0,0.8);
	-moz-box-shadow: 0 5px 60px rgba(0,0,0,0.8);
	box-shadow: 0 5px 60px rgba(0,0,0,0.8);
	-webkit-border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}
.block-layer.phone-device{
	position: relative;
	display: inline-block;
	text-align: center;
}
.block-layer > .shutdown-message{
	padding: 4px;
	border: 1px solid #d38200;
	background-color: #f7e0bb;
	font: bold 12px 'Droid Arabic Kufi', tahoma,arial;
}

/*
	Header bar
*/
.main-header.computer-device, .main-header.tablet-device{
	position: relative;
	width: 960px;
	height: 90px;
	background-color: #fff;
}
.main-header.phone-device{
	min-width: 300px;
	height: 40px;
	border: #999 1px solid;
	border-width: 0 1px 1px;
	background: #c9c9c9 url(layout/menu-gray-back.jpg?x=98) repeat-x;
	z-index: 100;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-box-shadow: 0 1px 12px rgba(0,0,0,0.3);
	   -moz-box-shadow: 0 1px 12px rgba(0,0,0,0.3);
			box-shadow: 0 1px 12px rgba(0,0,0,0.3);
	-webkit-border-radius: 0 0 4px 4px;
	   -moz-border-radius: 0 0 4px 4px;
			border-radius: 0 0 4px 4px;
}
.main-header.phone-device > .welcome{
	float: right;
	padding: 11px 12px 0 4px;
	white-space: nowrap;
}
.main-header.phone-device > .welcome > span{
	text-shadow: 1px 1px 1px #f0f0f0;
}
.main-header.phone-device > .menu-bar{
	float: left;
	padding: 8px 4px 0 12px;
	white-space: nowrap;
}
.main-header.phone-device > .menu-bar > a{
	margin: 0;
	padding: 0;
	font: bold 12px 'Droid Arabic Kufi', arial, tahoma;
	text-shadow: 1px 1px 1px #eee;
	text-decoration: none;
	color: #333;
}
.main-header.phone-device > .menu-bar > a:hover{
	color: #777;
	text-decoration: none;
}
.main-header.phone-device > .menu-bar > a.active{
	color: #246bb2;
}
.main-header.phone-device > .menu-bar > a.active:hover{
	color: #2e8ae6;
}
.main-header.phone-device > .menu-bar > div{
	display: inline-block;
	padding: 0 3px;
	font-size: 13px;
}

/* Login Bar */
.login-bar{
	position: absolute;
	top: 13px;
	/* right: 8px; in nodir file */
}
.login-bar > div{
	display: inline-block;
}

.mini-area{
	width: 200px;
	vertical-align: top;
	padding: 10px 7px;
	border: #888 1px solid;
	border-width: 0 0 1px 1px;
}
.big-area{
	vertical-align: top;
	padding: 15px 7px 10px;
	border: #888 1px solid;
	border-width: 0 0 1px 0;
}

/* main-menu */
.main-menu{
	margin: 0;
	padding: 5px 0;
	min-width: 40px;
	list-style: none;
}
.main-menu > li{
	margin: 0;
}
.main-menu li > a{
	width: 200px;
	position: relative;
	display: block;
	padding: 7px 5px;
	clear: both;
	background-color: #f7f7f7;
	font: bold 12px 'Droid Arabic Kufi', tahoma,arial;
	line-height: 16px;
	color: #333;
	white-space: nowrap;
	text-align: right;
	border-style: solid;
	border-width: 1px 1px 0;
	border-color: #999;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
	overflow: hidden;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	webkit-transition: all 0.2s ease-in-out;
	   moz-transition: all 0.2s ease-in-out;
		 o-transition: all 0.2s ease-in-out;
		ms-transition: all 0.2s ease-in-out;
		   transition: all 0.2s ease-in-out;
}
.main-menu li.vip > a{
	color: #193587;
	text-shadow: 1px 1px 1px #fff;
}
.main-menu > li:last-child > a{
	border-bottom-width: 1px;
}
.main-menu li > a > div{
	position: absolute;
	top: 7px;
	left: 8px;
	padding: 0px 4px;
	border: #888 1px solid;
	background-color: #f0f0f0;
	color: #555;
	font: normal 12px arial,tahoma;
	text-shadow: 1px 1px 1px #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.main-menu li > a > span{
	position: absolute;
	top: 8px;
	left: 8px;
	color: #555;
	font: normal 12px tahoma,arial;
}
.main-menu li > a:hover{
	text-decoration: none;
	border-right-color: #2665a8;
	border-right-width: 8px;
	background-color: #fff;
	color: #0b427c;
}
.main-menu li.vip > a:hover{
	color: #0b427c;
}
.main-menu li > a:hover > div{
	border-color: transparent;
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.main-menu li > a:hover > span{
	color: #fff;
}

/* mini-box */
.mini-box{
	position: relative;
	margin: 14px 0 0;
	-webkit-box-shadow: 0 1px 8px rgba(0,0,0,0.3);
	   -moz-box-shadow: 0 1px 8px rgba(0,0,0,0.3);
			box-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.mini-box > .title{
	padding: 7px;
	background-color: #337ab7;
	font: bold 12px 'Droid Arabic Kufi', tahoma,arial;
	line-height: 16px;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	border: #1b629b 1px solid;
	border-width: 1px 1px 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.mini-box > .body{
	padding: 4px;
	border: #999 1px solid;
	background-color: #fbfbfb;
}

/* big-box */
.big-box{
	position: relative;
	margin: 0 0 14px 0;
	-webkit-box-shadow: 0 1px 8px rgba(0,0,0,0.3);
	   -moz-box-shadow: 0 1px 8px rgba(0,0,0,0.3);
			box-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.big-box > .title{
	padding: 7px;
	background-color: #337ab7;
	font: bold 12px 'Droid Arabic Kufi', tahoma,arial;
	line-height: 16px;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	border: #1b629b 1px solid;
	border-width: 1px 1px 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.big-box > .body{
	padding: 4px;
	border: #999 1px solid;
	background-color: #fbfbfb;
	text-align: right;
}

/*
	The login box
*/
.login-main .login-loading{
	display: none;
	position: absolute;
	top: 41px;
	left: 12px;
}

.pro-title{
	margin: 10px 0 5px 0;
	font: bold 24px 'Droid Arabic Kufi', tahoma,arial;
}
body.phone-device .pro-title{
	font-size: 16px;
}

.simple-photos > img{
	margin: 0 5px;
	border: 5px solid rgba(255, 255, 255, 0);
	cursor: pointer;
	webkit-transition: all 0.2s ease-in-out;
	   moz-transition: all 0.2s ease-in-out;
		 o-transition: all 0.2s ease-in-out;
		ms-transition: all 0.2s ease-in-out;
		   transition: all 0.2s ease-in-out;
}
.simple-photos > img:hover{
	border: 5px solid rgba(255, 255, 255, 0.7);
}
.simple-photos > img.selected{
	margin: 0 5px;
	border: 5px solid rgba(70, 159, 228, 0.8);
	cursor: pointer;
}
body.phone-device .simple-photos > img{
	margin: 0 2px;
	width: 50px;
	height: 50px;
}

.upload-error-place{
	font: normal 13px tahoma,arial;
	color: red;
}
.upload-place{
	display: inline-block;
	width: 800px;
	min-height: 140px;
	border: dashed 1px #333;
	margin: 5px 0;
	padding: 20px 5px;
	text-align: center;
}
body.phone-device .upload-place{
	width: 300px;
}

.loading-place > div{
	width: 500px;
	height: 20px;
}
body.phone-device .loading-place > div{
	width: 260px;
}

.photo-place{
	display:inline-block;
	width:820px;
	min-height:140px;
	border:dashed 1px #333;
	margin: 5px 0;
	padding:10px 5px;
	text-align:center;
}
body.phone-device .photo-place{
	width: 300px;
}
body.phone-device .photo-place > a:after{
	content: "\A";
	white-space: pre;
	font-size: 17px;
}
.photo-place > img{
	max-width: 800px;
	max-height: 1000px;
	border: 3px solid rgba(255, 255, 255, 0.7);
}
body.phone-device .photo-place > img{
	max-width: 290px;
	max-height: 400px;
}

.number0{background:url(layout/numbers.gif) no-repeat 0px 0px;width:14px;height:20px}
.number1{background:url(layout/numbers.gif) no-repeat -15px 0px;width:14px;height:20px}
.number2{background:url(layout/numbers.gif) no-repeat -30px 0px;width:14px;height:20px}
.number3{background:url(layout/numbers.gif) no-repeat -44px 0px;width:14px;height:20px}
.number4{background:url(layout/numbers.gif) no-repeat -59px 0px;width:14px;height:20px}
.number5{background:url(layout/numbers.gif) no-repeat -75px 0px;width:14px;height:20px}
.number6{background:url(layout/numbers.gif) no-repeat -89px 0px;width:14px;height:20px}
.number7{background:url(layout/numbers.gif) no-repeat -105px 0px;width:14px;height:20px}
.number8{background:url(layout/numbers.gif) no-repeat -119px 0px;width:14px;height:20px}
.number9{background:url(layout/numbers.gif) no-repeat -135px 0px;width:14px;height:20px}

.picture-upload-preview{
	display: inline-block;
}
.picture-upload-preview > .progress{
	display: none;
	margin: 20px 5px;
}
.picture-upload-preview > .preview{
	position: relative;
}
.picture-upload-preview > .preview > .remove-picture{
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	color: #fff;
	text-shadow: 0 0 10px #000;
	cursor: pointer;
}
.picture-upload-preview > .preview:hover > .remove-picture{
	display: block;
}
.picture-upload-preview > .preview:hover > .remove-picture.hidden{
	display: none;
}
.picture-upload-preview > .preview > img{
	max-width: 335px;
	border: #ddd 3px solid;
}
.picture-upload-preview > .preview > img:hover{
	border-color: #999;
}

.video-url-preview{
	display: inline-block;
	padding: 10px;
}
.video-url-preview > .video{
	display: none;
}
.video-url-preview > .preview{
	position: relative;
}
.video-url-preview > .preview > i.video-play{
	position: absolute;
	left: 43%;
	top: 37%;
	font-size: 70px;
	font-weight: normal;
	color: #fff;
	cursor: pointer;
	text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.7), 0 0 0.2em rgba(0, 0, 0, 0.7), 0 0 0.2em rgba(0, 0, 0, 0.7);
	opacity: 0.6;
}
.video-url-preview > .preview > i.video-play.hidden{
	display: none;
}
.video-url-preview > .preview > img{
	max-width: 335px;
	cursor: pointer;
}

.slider-position{
	position: relative;
}
.slider-position > img{
	position: absolute;
	top: 6px;
	right: 9px;
	z-index: 100;
	opacity: 0.8;
}

.keyboard-shortcuts > div{
	display: inline-block;
	border: #bbb 1px solid !important;
	padding: 3px 5px !important;
	margin: 1px 2px !important;
	background-color: #fafafa !important;
	color: #444 !important;
	font-size: 13px !important;
	text-shadow: 1px 1px 1px #ccc !important;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
}
.keyboard-shortcuts > div > span{
	font-size: 12px !important;
	color: #333;
	direction: ltr;
}

.photo-viewer{
	cursor: pointer;
}
.photo-viewer-place{
	position: relative;
	width: 600px;
	height: 480px;
}
.photo-viewer-place > img{
	width: 600px;
	height: 480px;
}
.photo-viewer-place > div{
	position: absolute;
	bottom: 3px;
	left: 3px;
	width: 594px;
	padding: 7px 5px;
	color: #f5f5f5;
	text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8), 0 0 0.3em rgba(0, 0, 0, 0.8), 0 0 0.3em rgba(0, 0, 0, 0.8);
	filter: dropshadow(color=#000000, offx=1, offy=1, Positive=1);
	text-align: right;
	background-color: rgba(0, 0, 0, 0.3);
	font: bold 15px arial, tahoma;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
.photo-viewer-place > i.download-photo{
	position: absolute;
	bottom: 4px;
	left: 8px;
	font-size: 24px;
	color: #fff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	cursor: pointer;
	z-index: 10;
}
.photo-viewer-place > i.download-photo:hover{
	text-shadow: 0 0 12px rgba(0, 0, 0, 1);
}

.row-notice{
	margin: 1px;
	padding: 2px 3px;
	text-align: right;
	background-color: #cccccc;
	font-size: 13px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
}
.row-notice.black{
	background-color: #000;
	color: #fff;
}
.row-notice.orange{
	background-color: #e08733;
	color: #fff;
}
.row-notice.red{
	background-color: #d63e3e;
	color: #fff;
}
.row-notice.green{
	background-color: #3aa33a;
	color: #fff;
}
.row-notice.yellow{
	background-color: #aaaa27;
	color: #fff;
}
.row-notice.blue{
	background-color: #5353c1;
	color: #fff;
}
.row-notice.purple{
	background-color: #8c3f8c;
	color: #fff;
}

.select-box{
	display: inline-block;
	position: relative;
	border: solid 1px #888;
	margin: 1px;
	padding: 4px 4px 4px 21px;
	font-size: 13px;
	font-weight: normal;
	line-height: 13px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
}
.select-box > i{
	position: absolute;
	top: 2px;
	left: 4px;
	font-size: 18px;
	color: #222;
	cursor: pointer;
	opacity: 0.8;
}
.select-box > i:hover{
	opacity: 1;
}
.select-box.block{
	display: block;
}
.select-box.bold{
	font-size: 12px;
	font-weight: bold;
}
.select-box.info{
	border-color: #2e6e8c;
	background-color: #d9edf7;
	color: #2e6e8c;
}
.select-box.info > i{
	color: #2e6e8c;
}
.select-box.success{
	border-color: #317231;
	background-color: #ceeac2;
	color: #317231;
}
.select-box.success > i{
	color: #317231;
}
.select-box.alert{
	border-color: #996600;
	background-color: #ffffc4;
	color: #996600;
}
.select-box.alert > i{
	color: #996600;
}
.select-box.warning{
	border-color: #996600;
	background-color: #ffdba6;
	color: #996600;
}
.select-box.warning > i{
	color: #996600;
}
.select-box.error{
	border-color: #b94a48;
	background-color: #f2dede;
	color: #b94a48;
}
.select-box.error > i{
	color: #b94a48;
}
.select-box.delete{
	border-color: #555;
	background-color: #ccc;
	color: #555;
}
.select-box.delete > i{
	color: #555;
}
.select-box.inverse{
	border-color: #222222 #222222 #000000;
	background-color: #030202;
	color: #fff;
}
.select-box.inverse > i{
	color: #fff;
}


/*
	for drag drop elements 
*/
.drag-drop{
	display: inline-block;
	position: relative;
	width: 410px;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
		 -o-user-select: none;
			user-select: none;
}
.drag-drop > .ss-placeholder-child{
	background-color: transparent;
	border: #888 1px dashed;
}

.table-list  > tbody > tr > td.text-delete > *{
	background-color: #ccc !important;
	color: #555 !important;
}