body{color: #333 !important;}

#datatable-buttons tr th,
#datatable-buttons tr td{ font-size:12px;}

div.dataTables_wrapper div.dataTables_processing{
	position: fixed !important;
    height: auto !important;
    bottom: 0px;
    top: auto !important;
}

.prm_tbl_click{ color: @333; text-decoration: underline}
.dropdown-menu>li>a{padding: 9px 20px 7px;}
.dropdown-menu .divider{ margin:0px;}
.nav .dropdown-toggle {background-color: #eee;}
.nav .dropdown-toggle:hover{background-color: #e7e7e7;}

footer{ font-size: 12px;}
footer a{ color:#333}

.color{
	background-color:#fd4e4e !important;
	color: #fff;
}

table.dataTable{ width:100% !important}
table.dataTable td span {
    line-height: 14px;
}

.Closed{opacity: 0.6;}

.stdiv{border-left: solid 3px #bfcad3; padding-left: 9px;}

.task-due{ margin:0px !important; border-radius:0 !important; text-align:center; font-size:12px;}

.intersts{
	font-weight: 500;
	padding-top:1px !important; 
	font-size:10px;
	color: rgba(0,0,0,.8);
    background-color: #fff;
    border-color: #E6E6E6;
	padding:1px 3px;	
}

.task-due strong{ font-size:14px;}

.stprm{     
	font-size: 13px;
    width: 70% !important;
    float: left;
}

.stlnk{    
	padding: 7px;
    float: left;
    margin-left: 2px;
}

.High{    
	width: 2px;
    height: 100%;
    border: solid 1px #ff0000;
	position: absolute;
	top: 0px;
	left: 0px;
}

.Medium{   
	width: 2px;
    height: 100%;
	border: solid 1px #fbe319;
	position: absolute;
	top: 0px;
	left: 0px;
}
	
.Low{
	width: 2px;
    height: 100%;
	border: solid 1px #30c503;
	position: absolute;
	top: 0px;
	left: 0px;
}

.btn-dim {
	color: rgba(0,0,0,.8);
    background-color: #E6E6E6;
    border-color: #E6E6E6;
	letter-spacing: 1px;
}

.btn-success{border:none !important}

.btn-lightred {
	color: #fff;
    background-color: #e84855;
	letter-spacing: 1px;
	border:none !important
}

.btn-red {
    background-color: #f7150a;
    border:none !important;
	letter-spacing: 1px;
	color:#fff;
}

.btn-lightred.focus, 
.btn-lightred:focus, 
.btn-lightred:hover {
	color: #fff;
	text-decoration: none;
	background-color: #d43b47;
}

.btn-dim.focus, 
.btn-dim:focus, 
.btn-dim:hover {
	color: rgba(0,0,0,.8);
	text-decoration: none;
	background-color: #d6d3d3;
}

.btn-customer {
	color:#fff;
    background-color: #1f8dd6;
    border:none
}
.btn-customer.focus, 
.btn-customer:focus, 
.btn-customer:hover {
	color:#fff;
	text-decoration: none;
}

/* notifer on crm */
.new_lead_box{ 
        position:fixed; 
        max-height:432px; 
        width:330px; 
        background:#0770FF; 
        z-index:99; 
        bottom:0px; 
        right:30px;
        -webkit-border-top-left-radius: 30px;
		-webkit-border-top-right-radius: 30px;
		-moz-border-radius-topleft: 30px;
		-moz-border-radius-topright: 30px;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
        box-shadow:0px 0px 0px 0px rgba(0,0,0,0.25), -1px 3px 20px rgba(0,0,0,0.22);
    }
    .lead_box_content::-webkit-scrollbar {
      width: 5px;
    }.lead_box_content::-webkit-scrollbar-track {
      background: #ddd;
    }
    .lead_box_content::-webkit-scrollbar-thumb {
      background: #c1c0c0; 
    }
    .lead_box_head{padding:2px 10px 10px; border-bottom: solid 1px #f3eeee; height:40px;}
    .lead_box_head span{color:#fff; display:block; padding:10px; font-weight:bold;}
    .lead_box_footer{padding:10px; border-top: solid 1px #f3eeee; height:50px;}
    .lead_box_content{height:410px;background: #fff;overflow: auto; position:relative}
	.lead_box_content div.inner .list {padding: 10px 30px 10px;}
	.lead_box_content hr{border-bottom: solid 1px #f3eeee; margin:0px; padding:0px;}
	.lead_box_content .name{font-weight:normal; margin-bottom:0px; font-size:13px;}
	.lead_box_content .loc{font-weight:normal; display:block; color:#a7a7a7; font-size:11px;}
	.lead_box_content .product{font-weight:bold; display: inline-block; color:#333; font-size:12px; padding:8px 0px; float:left}
	.lead_box_content .date{display:inline-block; font-size:12px; font-weight:normal; padding:8px 0px; color:#a7a7a7; float:right}
	.lead_box_content a{ float:right; margin:0 0 0 7px; height: 30px;}
	.btn-minimize{    
		position: absolute;
		right: 20px;
		top: 14px;
		color: #f5f5ff;
		font-size: 12px;
		display: block;
		width: 16px;
		height: 16px;
	}
	.btn-minimize.focus, 
	.btn-minimize:focus, 
	.btn-minimize:hover {
		color: #fff;
		text-decoration: none;
	}
/* view page */
.crm-view-field{
	display: inline;
    font-size: 13px;
    font-weight: 400;
    background-color: #f5f5f5;
    color: #534d64;
        padding: 9px 10px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
    min-height: 38px;
    vertical-align: baseline;
    white-space: inherit;
}
.crm-view-lable{
	display: inline;
    font-size: 12px;
    font-weight: 700;
	/*padding-top: 10px !important;*/
    color: #534d64;
    text-align: left;
    vertical-align: baseline;
    white-space: pre-wrap;
}

.btn-light{ background:#ccc; color:#333}

.x_title h2{letter-spacing: 2px; text-transform: uppercase;}
.marginTop7px{margin-top: 7px;}

.tab-pane{ padding-top:10px;}

.lead_view_page .form-horizontal .control-label, 
.profile .form-horizontal .control-label{ padding-top: 11px !important;}
.lead_edit_page .form-horizontal .control-label{ padding-top:5px !important}

.lead_staff_page .control-label,
.manager_view_page .control-label{ padding-top: 11px !important;}
.manager_view_page .form-group .btn{ margin-bottom: 2px;}

.form-group{ margin-bottom: 4px !important;}

.cv-lead-area-h4{
	margin: 0px !important;
    padding: 0px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

/* Tabs */
ul.bar_tabs{ background:none !important; padding:0px!important; margin: 21px 0 0px!important;}
ul.bar_tabs>li{ margin-right: 3px !important; margin-left:0px !important; background:none !important; border:none  !important;margin-top: -16px!important;}
ul.bar_tabs>li.active{ border-right: none !important;}
ul.bar_tabs>li.active a{ border-bottom:1px solid #ddd !important; border-radius: 4px 4px 0 0;}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover{ background-color: #778591 !important; color:#fff; border:none}
ul.bar_tabs>li.active{ margin-top: -15px !important;}
ul.bar_tabs>li a{ border-radius: 4px 4px 0 0 !important;padding: 10px 12px !important;}

ul.bar_tabs>li a {
	font-size: 12px;
	font-weight: 400;
	border-radius: 4px 4px 0 0;
	background-color: #bfcad3 !important;
	color: #fff;
	cursor: pointer;
	border-color: transparent;
	letter-spacing: 2px; 
	text-transform:uppercase;
}

.prm_tab_action{    
	position: absolute;
    top: 6px;
    z-index: 1;
    left: 380px;
}

.prm_tab_action .btn {
    padding: 8px 12px!important;
}


.round {
  border-radius: 50%;
}

.checkbox{
	padding: 3px;
    display: block;
    margin: 4px 0px !important;
    width: 20px;
    height: 14px;	
}

.avatar_sec info{float: left;padding: 0px 0px 5px 13px;}
.avatar_sec img{ float: left}
.prm_comments{ margin-left:72px; margin-top:10px;color: #504d4d; font-size: 14px;}
.prm_comments img{ max-width:80%}

.prm_com_date{ font-size:11px;color: #9e9c9c;}
.prm_com_name{ font-size: 13px; font-weight: bold;}
.prm_com_status{ font-size: 12px;color: #9e9c9c;}

.page-title h3{text-transform: capitalize;font-size: 20px;}

.filter-cc-list{ cursor:auto !important;    margin: 13px;}

.login{ background:#fff !important}  
.login .invalid-feedback{ color:#fff}


.tile_count .tile_stats_count {
    margin-bottom: 0px!important;
     padding-bottom: 0px!important; 
}

/** chart loader  **/

.chart_overlay{
	width: 100%;
	height: 350px;
    z-index: 1;
	background: #fff;
	position: absolute;
    opacity: 0.4;
	top:60px;
	display:none
}

.notifier-loader {
	padding-top: calc(45vh - 25px); 
	position: absolute;
    left: 34%;
    z-index: 2;
	bottom: 108px;
	display:none
}
.mawazna-loader {
	padding-top: calc(45vh - 25px); 
	position: absolute;
    left: 44%;
    z-index: 2;
	bottom: 100px;
	display:none
}

/** loader **/
.sh1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #0c72b9 transparent transparent transparent;
  margin: 0 auto;
  animation: shk1 1s ease-in-out infinite normal;
}

.sh2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent  transparent #09bff3 transparent ;
  margin: -50px auto 0;
  animation: shk2 1s ease-in-out infinite alternate;
}

/** animation starts here **/
@keyframes shk1 {
  0% {
    transform: rotate(-360deg);
  }  
  
  100% {
  }
}

@keyframes shk2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
  }
}


.lt {
  color: #3a3333;
  font-family: 'Roboto', sans-serif;
  margin: 30px auto;
  text-align: center;
  font-weight: 100;
  letter-spacing: 10px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ vertical-align: middle;}

/* email template */
.clearall{ float:none; clear:both}
.email_variable{}

.email_variable ul{ margin:0px; padding:0px;}
.email_variable ul li{ list-style-type:none; list-style:none; float:left; padding:5px;}
.mail_loader{position: absolute; width: 92%; opacity: 0.7; display:none}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 57px;
  height: 40px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 31px;
  height: 31px;
  margin: 2px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}