::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
::-webkit-scrollbar {width: 6px;background-color: #F5F5F5;}
::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #62A8D1;}

hr{margin:0px;}
p {text-align: justify;}
h2 {font-weight: 400;font-size: 16px;color:#1796E3;}
.widget-box {margin: 10px 5px;}
h1, .h1, h2, .h2, h3, .h3 {margin-top: 10px; margin-bottom: 10px;}
.lblMsg, .lblmsg, .reqd {color:#DD5A43 !important;}
.textsmall {font-size: .9em;color: #666;}
.textred {color:#DD5A43 !important;}
.textgreen {color:#69AA46 !important;}
.lblejid {font-weight: bold; letter-spacing: 1px; font-size: 14px; color: #1796e3;}
.figures {font-size:22px; text-decoration:none;}
.cnt {display:block; text-align:center; font-size:22px; text-decoration:none;}
.cnt:hover {text-decoration:none;}
.footer .footer-inner .footer-content {line-height: 20px; color: #585858;}
.footerloading {display:none; margin: 0px auto; top:0px; width:100%; z-index: 1053; position:fixed;}
.footerloadingbox {margin:0px 40%; padding:4px;	text-align:center;	width:200px; background: #fff; border-radius:5px; line-height: 36px; color: rgb(67, 142, 185);}

.infobox {margin:2px; width: 160px;}
.infobox .infobox-content:first-child {font-weight: normal;}
.menu-search-input {
    padding: 5px !important;
    width: 185px;
    height: 25px;
    margin: -3px;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
}

.hideme {display:none !important;}
.borderme {border: solid 1px #438EB9; border-radius:5px;}

.width50 {width:60px !important;}
.width100 {width:100px !important;}
.width120 {width:120px !important;}
.width130 {width:130px !important;}
.width150 {width:150px !important;}
.width180 {width:180px !important;}
.width200 {width:200px !important;}
.width250 {width:250px !important;}
.width300 {width:300px !important;}

.btn-success, .btn-info, .btn-warning, .btn-danger {border-radius: 5px; margin: 1px; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; transition: all 0.6s ease 0s; cursor: pointer; text-align: center; width: 40px; height: 32px; padding: 0px; line-height: 30px;}
input.text, input.textbox, input[type='text'], input[type='password'], input[type='number'], input[type='date'], input[type='email'], input[type='color'], input[type="file"], .textbox, .ejtextbox {border-radius: 5px !important; width: 353px;}
textarea {border-radius: 5px !important; width: 353px; height:100px;}
.txtsmall {width:150px !important;}
select, .cmb, select[multiple], select[size] {cursor: pointer; width: 353px; height:33px; border-radius: 5px !important; color: #666; border: solid 1px #dadad8; padding: 5px 4px 6px; font-size: 13px; font-family: inherit;}
select:focus, .cmb:focus {background:#fff; border: #878787 1px solid;}
.dgcmb {width: 150px;}
input[readonly], input[disabled], textarea[disabled], input[readonly]:hover, input[disabled]:hover, textarea[disabled]:hover {background: #CCC !important; border: 1px solid #878787 !important; color: #878787 !important;}
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; -moz-appearance: textfield;}
input[type=number] {-moz-appearance: textfield;}

.txtlarge, .ddllarge {width: 240px !important; text-align: center; text-align-last: center;}
.txtsmall, .ddlsmall {width: 110px !important; text-align: center; text-align-last: center;}
.txttiny, .ddltiny {width: 50px !important; text-align: center; text-align-last: center; padding: 6px !important;}

.btn, .dgbtn, .lnkbtn {cursor: pointer; border-radius: 5px; height: 36px; margin: 3px; min-width: 230px; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent;	transition: all 0.6s; border: solid 1px #B8D2E1; background-color:#B8D2E1; text-decoration:none;}
.dgbtn, .lnkbtn {min-width: 100px; padding: 6px 12px;}
.btn:hover, .dgbtn:hover, .lnkbtn:hover {color: #fff !important; background-color: #62A8D1 !important; text-decoration:none;}

.btnactive, .dgbtnactive {cursor: pointer; margin: 3px; background-color: #62A8D1;  color: #fff !important; min-width: 230px; border-radius: 5px; height: 36px; text-align: center; display: inline-block; white-space: nowrap; vertical-align: middle; -moz-user-select: none; background-image: none; border: 1px solid transparent;	transition: all 0.6s; text-decoration:none;}
.dgbtnactive {min-width: 100px; padding: 6px 12px;}
.btnactive:hover, .dgbtnactive:hover {color:#fff !important; background-color: #438EB9 !important; text-decoration:none;}

/*
.radio, .checkbox {display: inline-block; white-space:pre-line; min-height: 20px; margin-top: 5px; margin-bottom: 5px; padding-left: 2px; padding-right: 2px;}
.its-radio  {width: 25px; height: 32px; position: relative; display: inline-block; white-space:pre-wrap; margin-right: 10px; margin-left: 5px; vertical-align:middle; background: url('../../imgs/1436/radio.png') no-repeat; background-size: 25px 32px;}
.its-radio:hover{ background: url('../../imgs/1436/radio_hover.png') no-repeat; background-size: 25px 32px; }
.its-radio.selected { background: url('../../imgs/1436/radio_checked.png') no-repeat; background-size: 25px 32px; }
.its-radio input[type="radio"] { margin-left: 0px; margin-top: 4px; position: absolute; z-index: 2; cursor: pointer; outline: none; opacity: 0; width: 24px; height: 25px; _noFocusLine: expression(this.hideFocus=true); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0;}
.its-radio input[type="radio"][disabled]  {cursor: not-allowed !important;}   
.its-checkbox { width: 26px; height: 28px; margin-left:5px; margin-right:5px; display: inline-block; white-space:pre-wrap; vertical-align:middle;  position: relative; z-index: 1; background: url('../../imgs/1436/checkbox.png') no-repeat; background-size: 26px 28px;}
.its-checkbox:hover{ background: url('../../imgs/1436/checkbox_hover.png') no-repeat; background-size: 26px 28px; }
.its-checkbox.selected{ background: url('../../imgs/1436/checkbox_checked.png') no-repeat; background-size: 26px 28px; }
.its-checkbox input[type="checkbox"]{margin: 0; cursor: pointer; outline: none; opacity: 0; z-index: 2; width: 23px; height: 24px; _noFocusLine: expression(this.hideFocus=true); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); 	-khtml-opacity: 0;	-moz-opacity: 0; _noFocusLine: expression(this.hideFocus=true);  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; }
.its-checkbox input[type="checkbox"][disabled]  {cursor: not-allowed !important;}
*/

/*photo*/
.img-circle {border-radius: 50%; background: url('../../imgs/1436/loading.gif') no-repeat center;}
img {border:none !important;}
.photo-original, .photo-mhp, .photo-small, .photo-dg-big, .photo-dg-small, .photo-dg-xsmall , .loading {border:none; background: url('../../imgs/1436/loading.gif') no-repeat center; border-radius:5px;}
.photo-original {width:295px; height:354px;}
.photo-mhp {width:147px; height:177px;}
.photo-small {width:98px; height:118px;}
.photo-dg-big {width:73px; height:88px;}
.photo-dg-small {width:59px; height:70px;}
.photo-dg-xsmall {width:40px; height:48px;}
.photo-profile-small {width:53px; height:53px;}
.photo-profile-xsmall {width:30px; height:30px;}

/* table & datagrid css */
table {border-collapse: separate; border-spacing: 0; margin-bottom: 5px; width:100%;}
td {border: solid 1px #ddd; border-style: none solid solid none; padding: 5px;}
tr:first-child td:first-child { border-top-left-radius: 5px !important; }
tr:first-child td:last-child { border-top-right-radius: 5px !important; }
tr:first-child th:first-child { border-top-left-radius: 5px !important; } /*for GridView*/
tr:first-child th:last-child { border-top-right-radius: 5px !important; } /*for GridView*/
tr:last-child td:first-child { border-bottom-left-radius: 5px !important; }
tr:last-child td:last-child { border-bottom-right-radius: 5px !important; }
tr:first-child td { border-top-style: solid;}
tr td:first-child { border-left-style: solid;}

table.no-border td, .no-border {border:none thin #fff !important;}
.textbg {background: rgb(247, 247, 247) none repeat scroll 0% 0%; padding:3px;}

.dg {width: 100%; margin: 5px auto; border-width:0px;}
.dg th, .dgHeader td {background-color: #438EB9; padding:3px; color:#fff; text-align:center; font-family:inherit; font-weight:400; border:0px;}
.dgFooter td {background-color:#F7F7F7; padding:3px; color:#438EB9; text-align:center; font-family:inherit; font-weight:400; font-size:16px;}
tr.dgItem:hover, tr.dgAlt:hover {background-color: #d8eaf9; transition: all 0.3s ease 0s;}
tr.dgPager td {text-align:left; padding: 5px;}
tr.dgPager td table tr td {Border:none;}
tr.dgPager td span {border:solid 1px #ddd; background-color:#438EB9; color:#fff; padding:3px 10px; cursor:pointer; border-radius:3px; text-decoration:none;}
tr.dgPager td a {border:solid 1px #ddd; color:#428BCA; padding:3px 10px; cursor:pointer; border-radius:3px; text-decoration:none;}
.dgItem {background-color:#F7F7F7;}
.dgItem, .dgAlt, .dgEdit {text-align:left;}
.dgSelect {background: #fae1ca url('../../imgs/1436/bgselect.png') 0 0 repeat; transition: all 0.6s ease 0s;}
.dgbtn-panel {width:250px; max-width:250px !important; text-align:center;}
.tblHead {background-color: rgb(247, 247, 247); color: #000; border: solid 1px #ddd; border-radius: 5px; padding: 5px; margin: 2px;}
.tblContent {border: solid 1px #ddd; border-radius: 5px; padding: 5px; margin: 2px;}


.cmbAr {padding: 3px; direction:rtl; font: 18px/18px 'lisan-ud-dawat', 'AL-FATEMI-Lisaan-ud-Dawat', 'Al-Fatemi(lisaan-ud-Dawat)', 'AL-KANZ', 'colaborate-lightregular', arial, serif !important; color: #333; background: #fff; border: #dadad8 1px solid; width: 300px; height: 30px; text-align: right; }
.textAr {font: 18px/18px 'lisan-ud-dawat', 'AL-FATEMI-Lisaan-ud-Dawat', 'Al-Fatemi(lisaan-ud-Dawat)', 'AL-KANZ', 'colaborate-lightregular', arial, serif !important; text-align: right; direction: rtl;}
.textAr24 {font: 24px/34px 'lisan-ud-dawat', 'AL-FATEMI-Lisaan-ud-Dawat', 'Al-Fatemi(lisaan-ud-Dawat)', 'AL-KANZ', 'colaborate-lightregular', arial, serif !important; text-align: right; direction: rtl;}
.textArALKANZ {font: 18px/18px 'AL-KANZ', 'lisan-ud-dawat', 'AL-FATEMI-Lisaan-ud-Dawat', 'Al-Fatemi(lisaan-ud-Dawat)', 'colaborate-lightregular', arial, serif !important; text-align: right; direction: rtl;}
.textArALKANZ24 {
    font: 24px/36px 'AL-KANZ', 'lisan-ud-dawat', 'AL-FATEMI-Lisaan-ud-Dawat', 'Al-Fatemi(lisaan-ud-Dawat)', 'colaborate-lightregular', arial, serif !important;
    text-align: right;
    direction: rtl;
}

/* Radio */
.radio {display: inline-block; white-space: pre-line; margin: 0px !important; padding: 0px !important; vertical-align: middle; padding-right: 10px !important; min-width: 100px;}
.its-radio {position: relative; display: inline-block; white-space: pre-wrap; vertical-align: middle; padding-right: 10px;}
.its-radio:after {content: "\f1db"; font-family: 'FontAwesome'; font-size: 26px; color: #62A8D1; vertical-align: middle;}
.its-radio.selected:after {content: "\f058";color: #62A8D1;}
.its-radio:hover:after {color: #2b7dbc;}
.its-radio input[type="radio"] {margin-left: 5px; margin-top: 12px; position: absolute; z-index: 2; cursor: pointer; outline: none; opacity: 0;}

/* Checkbox */
.checkbox {display: inline-block; white-space: pre-line; margin: 0px !important; padding: 0px !important; vertical-align: middle; min-width: 100px;}
.its-checkbox {position: relative; display: inline-block; white-space: pre-wrap; vertical-align: middle; padding: 5px;}
.its-checkbox:after {content: "\f096"; font-family: 'FontAwesome'; font-size: 26px; color: #62A8D1; vertical-align: middle;}
.its-checkbox.selected:after {content: "\f14a"; color: #62A8D1;}
.its-checkbox:hover:after {color: #2b7dbc;}
.its-checkbox input[type="checkbox"] {margin-left: 5px; margin-top: 12px; position: absolute; cursor: pointer; outline: none; opacity: 0; z-index: 2;}

/* Sorting */
thead tr .dgHeader:after {content: "\f0dc"; font-family: 'FontAwesome'; font-size: 15px; color: #ffb752; vertical-align: middle; cursor: pointer; border-radius: 2px; padding: 2px; display: inline-block; clear: both; display: inline-block; float: right; margin-top: -22px; padding-right: 5px;}
thead tr .headerSortUp:after {content: "\f0de"; font-family: 'FontAwesome'; font-size: 15px; color: #ffb752; vertical-align: middle; cursor: pointer;}
thead tr .headerSortDown:after {content: "\f0dd"; font-family: 'FontAwesome'; font-size: 15px; color: #ffb752; vertical-align: middle; cursor: pointer;}
div.tablesorter-header-inner div.checkbox span.its-checkbox:after, .dgHeader th div.checkbox span.its-checkbox:after {color: #fee6b2 !important;}
.dgHeader .sorter-false:after {content: "";}

/*Multiselect*/
span.multiselect-native-select{position:relative}
span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px;}
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0; background-color: rgb(247, 247, 247); width: 353px; text-align:left;}
.multiselect-container .input-group{margin:5px !important;}
.multiselect-container>li{padding:0;}
.multiselect-container>li>a.multiselect-all label{font-weight:700}
.multiselect-container>li.multiselect-group {background-color: #62A8D1;}
.multiselect-container>li.multiselect-group label{margin:0 !important; padding:3px 10px 3px 10px !important;height:100%;font-weight:700; color: #fff;}
.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}
.multiselect-container>li>a{padding:0; line-height: 30px; border-bottom:solid 1px #ccc;}
.multiselect-container>li>a>label{margin:0 !important;height:100%;cursor:pointer !important;font-weight:400;}
.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin: 0px 0px 0px 10px !important;}
.multiselect-container>li>a>label>input[type=checkbox]{margin: 8px 10px 5px 10px !important;}
.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px;}
.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px !important}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}
.glyphicon-search::before {content: "\f002"; font-family: 'FontAwesome'; font-size: 15px; color: #62A8D1; vertical-align: middle; cursor: pointer;}
ul.multiselect-container.dropdown-menu li a label {font-size:13px;}

/*purr*/
#purr-container {position: fixed; top: 20%; right: 0px;z-index: 1072;}
.notice {position: relative; width: 453px; min-height: 100px; background-color: #444343; border-radius: 5px; transition: all 1s; margin: 10px;}
.notice:hover {background:#000;}
.notice .icon {float: left; font-size: 75px; padding: 1px 10px 1px 5px;}
.notice .close{position: absolute; top: 2px; right: 2px; display: inline-block; color: #fff;}
.notice .close:after{content: "\f00d"; font-family: 'FontAwesome'; font-size: 18px; vertical-align: middle; cursor: pointer;}
.notice .close:hover {color:#e90f14; padding: 0px; border-radius: 10px; text-shadow:none;}
.notice-body {min-height: 50px; padding: 10px 10px 20px 10px; color: #f9f9f9;}
.notice h3 {margin: 0; font-size: 24px; color: #fff; text-align: left; border:none; font-family: 'Source Sans Pro', sansita; font-style:normal;}
.notice p {margin: 0px;}
.notice .info {color:#FFFF00;} 
.notice .done {color:#0fe91e;}
.notice .error {color:#e90f14;}


/*Visible Property & meaning
.visible-lg = Large Desktop & HD Screen (Large)
.visible-md = Desktop (Medium)
.visible-sm = Tablets (Small)
.visible-ml = Mobile Large
.visible-ms = Mobile Small
.visible-mxs = Mobile Extra Small
*/
.visible-mxs, .visible-ms, .visible-ml {display: none !important;}
.indicator {color:#fff; text-align:center; padding-left: 5px; padding-right: 5px; line-height:normal;}
@media (max-width : 320px)  {
    .indicator {background-color:red;}
	.indicator:after{content: " Mobile- Very Small (less than 320px) ";}
	
	th.visible-mxs, td.visible-mxs {display: table-cell !important;}
    .visible-mxs {display: block !important;}
    
    .notice {width: 300px;}

	.photo-dg-small {width:40px; height:48px;}
	.lblejid {font-weight: normal; font-size: 12px;}
    .page-content {padding-right: 5px; padding-left: 5px;}
    input.text, input.textbox, input[type='text'], input[type='password'], input[type="file"], .textbox, .ejtextbox {width: 100% !important;}
    select, .cmb, select[multiple], select[size], .multiselect-native-select {width: 100% !important;}
    textarea {width: 100% !important;}
    .btn, .btnactive{min-width: 72% !important;}
    .txtlarge, .ddllarge {width: 110px !important; max-width: 110px !important;}
    .txtsmall, .ddlsmall {width: 110px !important; max-width: 110px !important;}
}
@media (min-width: 321px) and (max-width: 480px) {
	.indicator {background-color:green;}
	.indicator:after{content: " Mobile-Small (321px to 480px) ";}
	
	th.visible-ms, td.visible-ms {display: table-cell !important;}
    .visible-ms {display: block !important;}

    .notice {width: 350px;}

	.photo-dg-small {width:40px; height:48px;}
	.lblejid {font-weight: normal; font-size: 12px;}
    .page-content {padding-right: 5px; padding-left: 5px;}
    input.text, input.textbox, input[type='text'], input[type='password'], input[type="file"], .textbox, .ejtextbox {width: 100% !important;}
    select, .cmb, select[multiple], select[size], .multiselect-native-select  {width: 100% !important;}
    textarea {width: 100% !important;}
    .btn, .btnactive{min-width: 72% !important;}
    .txtlarge, .ddllarge {width: 150px !important; max-width: 150px !important;}
    .txtsmall, .ddlsmall {width: 150px !important; max-width: 150px !important;}
}
@media (min-width: 481px) and (max-width: 768px) {
	.indicator {background: blue;}
	.indicator:after{content: " Mobile-Large (481px to 768px) ";}
		
	th.visible-ml, td.visible-ml {display: table-cell !important;}
    .visible-ml {display: block !important;}
}
@media (min-width: 769px) and (max-width: 992px) {
	.indicator {background: green;}
	.indicator:after{content: " Tablets (769px to 992px)";}

}
@media (min-width: 993px) and (max-width: 1199px) {
	.indicator {background: orange;}
	.indicator:after{content: " Desktop (993px to 1199px)";}
	
}
@media (min-width: 1200px) and (max-width: 1499px) {
	.indicator {background: purple;}
	.indicator:after{content: " Desktop-Large (1200px to 1499px)";}
	
}
@media (min-width: 1500px) {
	.indicator {background: brown;}
	.indicator:after{content: " Desktop - HD Screen (greater than 1500px)";}
	
}