@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
 
/* 
	=================================
	=================================
	DEFAULT CSS
	=================================
	=================================
	font-family: 'Open Sans', sans-serif;
	font-family: 'Poppins', 'Open Sans', sans-serif;
*/
*{
	box-sizing:border-box;
	position:relative;
	text-rendering: optimizeLegibility;
}
body{
	margin:0px auto;
	padding:0px;
    font-family: 'Poppins', 'Open Sans', sans-serif;
	font-size:14px; letter-spacing:0.3px;
	color:#1c1c1c;
	overflow:hidden;
	overflow-y:scroll;
	background:#f9f9f9;
	direction:ltr;
	border-top:5px solid #2368cb;
}
header, footer, menu, nav, article, section, aside{
	display:block;
    margin:0px;
	padding:0px;
}
h1, h2, h3, h4, h5, h6{
	margin:0px;
	padding:0px;
	font-family: 'Poppins', 'Open Sans', sans-serif;
}
form{
	margin:0px;
	padding:0px;
}
p, ul, li, a{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
a, span, label, dt, dl, i{
	display:inline-block;
}
a{
	outline:none;
	border:none;
	text-decoration:none;
	-webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
			color:#246acc;
}
img{
	outline:none;
	border:none;
}
input[type="submit"], 
input[type="button"]{
	-webkit-appearance: none;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
    outline:none;
    cursor: pointer;
}
input, select, textarea, button{
    outline:none;
	font-family: 'Poppins', 'Open Sans', sans-serif;
    margin: 0px;
    border: none;
	font-size:14px;
	background:#ffffff;
	filter: none;
}
textarea {resize: none;}

:-moz-autofill, :-moz-autofill-preview {
  filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
}

.input{
    border: 1px solid #e7e7e7;
	border-radius:6px;
    padding: 10px 10px;
	transition: all 0.3s ease-out;
}
.input:focus{border:1px solid #466999;}

.inputLoaderWrapper{display:inline-block;}
.inputLoaderWrapper .input{width:100%;}
.inputLoaderWrapper .inputLoader{right:-35px; top:10px;}

input[type='number']{ -moz-appearance:textfield; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
input[type='number']{
    -moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
}
.input:disabled{background-color:#f7f7f7!important;}


/* For Layouts */
main{min-height: 100vh; display:grid; grid-template-columns:250px calc(100% - 250px);}
.pageContent{padding:30px 25px 0px;}
.contentWrapper{padding-bottom:100px;}
.clr{clear:both;}


/* card */
.card{
	background:#ffffff;
	box-shadow: 0px 1px 6px 0px rgba(1, 1, 1, 0.08);
	border-radius:5px;
}

/* ============= For Menu */
.activeView{
	-webkit-transform: translate3d(0,0,0)!important;
	-moz-transform: translate3d(0,0,0)!important;
	transform: translate3d(0,0,0)!important;
}
.menuOverlay{
	background:rgba(0,0,0,0.8);
	position:fixed;
	top:0px; left:0px; z-index:20000;
	width:105%; height:105%;	
}
/* ============= */
.button{
	border-radius:8px;	
	background:rgb( 35, 104, 203 );
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	box-shadow: 0px 7px 7px 0px rgba(17,92,199,0.3);
	
	color:#fff;
	display:inline-block;
	padding:12px 30px;
	font-size:16px;
	font-weight:600;
	text-transform:uppercase;
	margin:10px;
}
.button.small{padding:8px 18px;}
.button.green{	
	background:rgb( 36, 219, 133 );
	background-image: -moz-linear-gradient( 0deg, rgb( 36, 219, 133 ) 0%, rgb( 19, 196, 113 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 36, 219, 133 ) 0%, rgb( 19, 196, 113 ) 100%);	
	box-shadow:0px 7px 7px 0px rgba(172, 223, 167, 0.3);
}
.button.red{
	background:rgb( 242, 150, 150 );
	background-image: -moz-linear-gradient(0deg, rgb( 242, 150, 150 ) 0%, rgb( 215, 117, 117 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 242, 150, 150 ) 0%, rgb( 215, 117, 117 ) 100%);	
	box-shadow:0px 7px 7px 0px rgba(223, 167, 167, 0.3);
}
.buttonGroup .btnLoader{
	background:rgba(255,255,255,0.8);
	position:absolute;
	top:0px; left:0px; width:100%; height:100%; z-index:100;
}
.buttonGroup .btnLoader span{top:25px;}

/* ============= */
.submitBtn{max-width:400px; position:relative; margin:0px auto;}
.submitBtn .btn{
	border-radius:8px;	
	background:rgb( 35, 104, 203 );
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	box-shadow: 0px 7px 7px 0px rgba(17,92,199,0.3);
	
	color:#fff;
	width:100%;
	padding:12px 30px;
	font-size:16px;
	font-weight:600;
	text-transform:uppercase;
}
.submitBtn .btn:hover{transform:translateY(-10px);}
.submitBtn .btn.disable{background-color:rgba(0,0,0,0.3);}
.submitBtn .btnLoader{
	background:rgb( 35, 104, 203 );
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	position: absolute;
	top:0px; left:0px; z-index:1;
	width:100%; height:100%;
	text-align:center;
	border-radius:8px;
	cursor:wait;
}
.submitBtn .btnLoader span.spinLoader{
	width:25px; height:25px;
	border-width:4px; top:12px;
	position: relative;
	border-color:#2062a4;
	border-top-color:#fff;
}

.submitBtn.green .btn{background:rgb(99, 193, 79); box-shadow:0px 7px 7px 0px rgb(199, 217, 196);}
.submitBtn.green .btnLoader{background:rgb(99, 193, 79);}

/* ============= */
.borderButton{
	border:1px solid #0ab7c5;
	background:#fff;
	box-shadow: 0px 3px 3px 0px rgba(10, 183, 197, 0.23);
	padding:6px 12px;
	border-radius:3px;
	color:#119ea9;
	font-size:13px;
	font-weight:600;
	vertical-align:top;
}
.borderButton:hover{background:#0ab7c5; color:#fff;}
.borderButton[data-color="green"]{border-color:#45cd7f; color:#38bc70; box-shadow: 0px 3px 3px 0px rgba(26, 172, 88, 0.23);}
.borderButton[data-color="green"]:hover{background:#45cd7f; color:#fff;}

.borderButton[data-color="blue"]{border-color:#59b4ee; color:#59b4ee; box-shadow: 0px 3px 3px 0px rgba(26, 148, 226, 0.23);}
.borderButton[data-color="blue"]:hover{background:#59b4ee; color:#fff;}

.borderButton[data-color="red"]{border-color:#efa3a3; color:#e08c8c; box-shadow: 0px 3px 3px 0px rgba(239, 163, 163, 0.23);}
.borderButton[data-color="red"]:hover{background:#efa3a3; color:#fff;}

/* ============= icon button */
.iconButton{
	background:url('../../images/icon_btn_sprite.png') no-repeat;
	background-size:251px;
	background-color:#0ab7c5;
	border-radius:100%;
	font-size:13px; color:#fff;
	width:32px; height:32px;
	vertical-align:top;
}
.iconButton:hover{transform: translateY(-3px);}

.iconButton[data-color="purple"]{background-color:#a88add;}
.iconButton[data-color="blue"]{background-color:#1a94e2;}
.iconButton[data-color="green"]{background-color:#49b778;}

.iconButton.email	{background-position:0px 0px;}
.iconButton.print	{background-position:-39px 0px;}
.iconButton.clone	{background-position:-78px 0px;}
.iconButton.back	{background-position:-119px 0px;}

/*
	=======================
	ringLoader
	=======================
*/
.spinLoader{
  border:3px solid #2e8cd8;
  border-radius:50%;
  border-top:16px solid #ffffff;
  width:30px; height:30px;
  -webkit-animation: spin 0.5s linear infinite;
  animation:spin 0.5s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinLoader.small{ width:22px; height:22px; border-width:4px; }


.button{
	border-radius:8px;	
	background:rgb( 35, 104, 203 );
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	box-shadow: 0px 7px 7px 0px rgba(17,92,199,0.3);
	
	color:#fff; cursor:pointer;
	padding:12px 30px;
	font-size:16px;
	font-weight:600;
	text-transform:uppercase;
	transition: transform 0.3s ease-out;
}
.button:hover{transform:translateY(-10px); }

/* ============= Custom CheckBox */
.checkbox{
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkbox input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkbox .checkmark{
    position: absolute;
    top: 3px;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #eee;
	border-radius:3px;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox:hover input ~ .checkmark	{ background-color: #ccc; }
.checkbox input:checked ~ .checkmark{ background-color: #0052cc; }
.checkbox input:checked ~ .checkmark:after{ display: block; }
.checkbox .checkmark:after{
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ============= Custom Radio */
.radioBtn{
    display: block;
    position: relative;
	 margin-bottom: 12px;
    padding-left: 25px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.radioBtn input{position:absolute; opacity:0; cursor:pointer;}
.radioBtn .checkmark{
    position: absolute;
    top:3px; left:0;
    height:17px; width:17px;
    background-color:#eee;
    border-radius:50%;
}
.radioBtn .checkmark:after{
    top:4px; left:4px;
	width:9px; height:9px;
	border-radius:50%;
	background:white;
}

.radioBtn:hover input ~ .checkmark{background-color: #ccc;}
.radioBtn input:checked ~ .checkmark{background-color: #0052cc;}
.radioBtn input:checked ~ .checkmark:after{display: block;}

.verticalField{padding-top:10px;}
.horizontalField{padding-top:10px;}
.horizontalField label{float:left; margin-right:20px;}

/* ============= SEGMENT CONTROLL */
.segment{	
	border:1px solid #e7e7e7;
	border-radius:6px;
	font-size:14px;
	display:grid; grid-template-columns:50% 50%;
	overflow:hidden;
}
.segment:after{
	content:"";
	width:100%;
	clear:both;
	display:block;
}
.segment label{
	border-right:1px solid #e7e7e7;
	text-align:center;	
	box-sizing:border-box;	
	cursor:pointer;
	position:relative;
	overflow:hidden;
}
.segment label:last-child{border:none;}
.segment label input{
	position:absolute;
	visibility:hidden;
	width:15px!important;
	left:5px;
	z-index:1;
}
.segment label .selection{
	padding:9px 10px!important;
	display:block;
	-webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.segment label .selection:hover{ background:rgba(0,0,0,0.05); }
.segment label input:checked ~ .selection{
	background:#3e83e6;
	color:#ffffff;
}
.segment.grid3 label{width:calc(100%/3);}
.segment.grid4 label{width:calc(100%/4);}
.segment.grid5 label{width:calc(100%/5);}

/*  ===== Controll 5 */
.passwordField{}
.passwordField a{
	position:absolute;
	top:0px;
	right:0px;
	width:auto;
	height:100%;
	padding:0px 10px;
}
.passwordField input{padding-right:50px!important; width:100%;}
.passwordField a span{top:calc(50% - 13px)}
.passwordField a img{vertical-align:middle;}

.imp{background:#ffffda!important;}

/*
	################################ 
	Switch Control    
	################################ 
	How to Use
	<input type="checkbox" class="switch" name='sound' id="sound" checked/>
*/

input.switch {
	position: relative;
	-webkit-appearance: none;
	outline: none;
	width: 50px;
	height: 30px;
	background-color: #fff;
	border: 1px solid #D9DADC;
	border-radius: 50px;
	box-shadow: inset -20px 0 0 0 #fff;
}
input.switch:after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	background: transparent;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}
input.switch:checked {
	box-shadow: inset 20px 0 0 0 #4ed164;
	border-color: #4ed164;
}
input.switch:checked:after{
	left: 20px;
	box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
}

/* 
    #######################
    ######### Listing Filter By
    #######################
*/
.filterBy{
	font-size:14px;
	padding:7px 0px 15px;
	margin:0px auto;
	color:#424242;
}
.filterBy label{
	font-weight:500;
	margin-right:10px;
	display:inline-block;
}
.filterBy .left{
	float:left;
	width:40%;
	vertical-align:middle;
}
.filterBy .right{
	float:right;
	width:50%;
	text-align:right;
	font-size: 13.5px;
	vertical-align:middle;
}
.filterBy .left button, .filterBy .right button{
	color:#5c5c5c;
	background: none;
}
.filterBy .right a:hover,
.filterBy .right a.active{
	color:#000000;
	text-decoration:underline;
}
.filterBy .right select { padding:4px; }

/* 
    =======================
    ====== Table Listing
    =======================
*/
.tableListing, table.dataTable{
	background:#ffffff;
	border:1px solid rgba(0,0,0,0.08);
	border-radius:4px;	
	font-size:14px;	
    margin: 0px auto;
	margin-bottom:25px;
}
.tableListing th a{	color:#4784b6;}
.tableListing th, table.dataTable th{
	padding:9px 10px;
	text-align:left;
	vertical-align:top;
	font-size:13px;
	font-weight:600;
	letter-spacing:0.2px;	
	border-bottom: 2px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	color:#4784b6;
}
.tableListing td, table.dataTable td{
	padding:11px 13px;
	color:#1f1f1f;
	border-bottom:1px solid #ebebeb;
	vertical-align:top;
	position:relative;
	font-size:13px;
	border-right: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb;
}
.tableListing tbody tr:nth-child(even), table.dataTable tbody tr:nth-child(even){background:rgba(0,0,0,0.01);}
.tableListing tbody tr:hover, table.dataTable tbody tr:hover{background:#fffdf5;}
.tableListing td:before {content: attr(data-title); display:none;}
table.dataTable tbody tr.selected td{background:#fffdf5;}
/*.dataTables_processing{display:none!important;}*/

/* =============== */
.listStatus{border-radius:4px; padding:2px 10px; color:#fff; font-weight:500; font-size:12px;}

.listStatus.active{background:#6ccd97;}
.listStatus.inactive{background:#b8b8b8;}
.listStatus.pending{background:#b8b8b8;}

.listStatus.draft{background:#b8b8b8;}
.listStatus.submitted{background:#6ccd97;}

.listStatus.edited{background:#b8b8b8;}
.listStatus.edit_submitted{background:#6ccd97;}
.listStatus.edit_signed{background:#f29466;}

/* =============== */

.dotStatus{
	padding-left:14px;	
	/* Default :: Gray */
	color:#9c9b9b;
}
.dotStatus:before{
	content:" "; display:block; 
	width:9px; height:9px; 
	border-radius:100%;
	position:absolute;
	top:6px; left:0px;
	
	/* Default :: Gray */
	background:#b8b8b8;
}

/* Green */
.dotStatus.active{color:#52ba80;}
.dotStatus.active:before{background:#b8b8b8;}

/* Green */
.dotStatus.submitted{color:#52ba80;}
.dotStatus.submitted:before{background:#b8b8b8;}

/* Green */
.dotStatus.completed{color:#52ba80;}
.dotStatus.completed:before{background:#6ccd97;}

/* Gray */
.dotStatus.inactive{color:#9c9b9b;} 
.dotStatus.inactive:before{background:#b8b8b8;}

/* Gray */
.dotStatus.pending{color:#9c9b9b;}
.dotStatus.pending:before{background:#b8b8b8;}

/* Orrange */
.dotStatus.in_progress{color:#e18051;}
.dotStatus.in_progress:before{background:#f29466;}

/* Gray */
.dotStatus.draft{color:#9c9b9b;}
.dotStatus.draft:before{background:#b8b8b8;}

/* Green */
.dotStatus.submitted{color:#52ba80;}
.dotStatus.submitted:before{background:#6ccd97;}

/* Gray */
.dotStatus.edited{color:#9c9b9b;}
.dotStatus.edited:before{background:#b8b8b8;}

/* Green */
.dotStatus.edit_submitted{color:#52ba80;}
.dotStatus.edit_submitted:before{background:#6ccd97;}

/* Orrange */
.dotStatus.edit_signed{color:#e18051;}
.dotStatus.edit_signed:before{background:#f29466;}

/* =============== */
.btn-group{display:inline-block;}
.btn-group .btn{
	background:url('../../images/action_more.png') no-repeat #fff; 
	background-position:center;
	background-size:22px;
	color:#635ebe;
	padding:0px;
	width:30px; height:25px;
	cursor:pointer;	
	border-radius:5px;
}
.btn-group .btn:after{
	font-family: 'FontAwesome';
	content: "\f0dd";
	display:inline-block;
	position:relative;
	top: 12px; right: -10px;
	width: 20px; height: 20px;
	font-size: 18px;
	opacity:0;
	color:#2e8cd8;
}
.btn-group .dropdown{
	background:#fff;
	border:1px solid rgba(0,0,0,.15);
	border-radius:5px;
	position:absolute;
	top:33px; right:0px; z-index:100;
	opacity:0;
	overflow:hidden;
	transform:scale(1,0);
	transform-origin:top center;
	box-shadow:0px 5px 10px rgba(0,0,0,0.2);
	width:170px;
	transition: all 0.3s ease-out;
}
.btn-group .dropdown a{
	padding:10px 15px 10px 40px; 
	display:block; 
	border-bottom:1px solid rgba(0,0,0,0.05);
	color:#646e7c;
	font-weight:500;
}
.btn-group .dropdown a i{
	width:25px; height:25px; position:absolute; top:9px; left:5px;
	text-align:center; line-height:25px;
}
.btn-group .dropdown a:hover{background:#f9f9f9}
.btn-group .dropdown .divider{background: #e9ecef; width:100%; height:2px; padding:0px;}
.btn-group .dropdown a.del{color:#e36666;}

i.fa-exchange{color:#2877d0;}
i.fa-pencil{color:#6ac9a4;}
i.fa-trash{color:#e36666;}
i.fa-user{color:#f07a7a;}
i.fa-eye{color:#09c0ea;}
i.fa-book{color:#38d5a6;}

.btn-group:hover .btn{
	background:url('../../images/action_more_active.png') no-repeat #fff; 
	background-position:center;
	background-size:22px;
	background-color:#2e8cd8;
}
.btn-group:hover .btn:after{opacity:1;}
.btn-group:hover .dropdown{height:auto; opacity:1; transform:scale(1,1);}


/* =============== */
.inlineActonLink{}
.inlineActonLink a{color:#646e7c; font-weight:500; margin-right:5px;}
.inlineActonLink a i{margin-right:7px;}

.inlineActonLink.bordericon a{margin:0px; border:1px solid rgba(0,0,0,0.1); text-align:center; margin-right:10px;}
.inlineActonLink.bordericon a i{margin:4px 4px;}
.inlineActonLink.bordericon a:last-child{margin:0px;}

/* 
    #######################
    ######### data Table
    #######################
*/
/*
.dataTable table{background:#fff; border:1px solid rgba(34,36,38,.15); border-radius:4px; overflow:hidden; clear:both;}
.dataTable table thead th{text-align:left; font-size:14px;}

.dataTable table tbody tr td{border-top:1px solid rgba(34,36,38,0.09); font-size:14px;}
.dataTable table tbody tr:nth-child(even) td{	background:#f9fafb; }
.dataTable table tbody tr:hover td{background:#fdf9f2;}
*/

/* =========== */
.tableAction{
	border:1px solid #e2e2e2;
	display:inline-block;
	background: rgb(236,243,254);
	background: linear-gradient(0deg, #efefef 0%, rgba(255,255,255,1) 65%);	
	/*position:absolute;
	top:0px; left:0px; z-index:1;*/
}
.tableAction input[type="button"]{
	border:none;
	border-right:1px solid #e2e2e2;
	padding:5px 10px;
	background:none;
	display:inline-block;
	cursor:pointer;
	font-size:13px;
}
.tableAction input[type="button"]:last-child{border-right:none;}
.tableAction input[type="button"]:disabled{
	cursor:not-allowed;
	background: #f4f4f4!important;
	color:#999;
}
.tableAction input[type="button"]:hover{
	background:#fff;
}

/* =========== */
.dt-buttons{
	border:1px solid #d4dce9;
	display:inline-block;
	background: rgb(236,243,254);
	background: linear-gradient(0deg, rgba(236,243,254,1) 0%, rgba(255,255,255,1) 65%);
	float:right;
	margin-bottom:15px;
}
.dt-buttons button{
	border:none;
	border-right:1px solid #d4dce9;
	padding:5px 10px;
	background:none;
	display:inline-block;
	cursor:pointer;
	font-size:13px;
}
.dt-buttons button:last-child{border-right:none;}
.dt-buttons button:disabled{
	cursor:not-allowed;
	background: #f4f4f4!important;
	color:#999;
}
.dt-buttons button:hover{ background:#fff; }

.buttons-csv:before, .buttons-pdf:before, .buttons-print:before, .buttons-excel:before{
	display:inline-block;
	font-family:"FontAwesome";
	content:"\f1c1";
	margin-right:5px;
}
.buttons-csv:after{
	display:inline-block;
	content:"C";
	position:absolute;
	top:12px; left:13px; font-size:7px; font-weight:600;
	color:#3f9b31;
}

.buttons-csv:before{content:"\f016"; color:#3f9b31;}
.buttons-excel:before{content:"\f1c3"; color:#3f9b31;}
.buttons-pdf:before{content:"\f1c1"; color:#f0663b;}
.buttons-print:before{content:"\f02f"; color:#2f75e1;}

/* =========== Hover Top */
.dt-buttons .dt-button-collection{	
	position:absolute;
	left:auto!important;
	top:0px; right:0px;
	z-index:10000;
	width:150px;
	background:#fff;
	border:1px solid #d4dce9;	
}
.dt-buttons .dt-button-collection button{width:100%; border:none; text-align:left; border-bottom:1px solid #d4dce9; padding:8px 10px;}
.dt-buttons .dt-button-collection button:hover{background: rgba(236,243,254,1);}

/* =========== */
.userWithPic .avtar{width:35px; height:35px; border-radius:100%; overflow:hidden; vertical-align:top; margin-right:10px;}
.userWithPic .avtar img{vertical-align:top; object-fit:cover; width:35px; height:35px;}
.userWithPic label{width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  vertical-align:middle;}

/* =============== */
.ui-widget-content{overflow-y:auto!important;}
.ui-menu-item{display:block!important;}
.ui-menu-item a{
	border:0px!important; 
	border-bottom:1px solid rgba(0,0,0,0.1)!important; 
	padding:8px 10px!important;
	display:block;
}
.ui-menu-item a:hover{background-color:rgba(0,0,0,0.04);}
.ui-state-active{background-color:#fffadb!important;}

/*
	==========
	No record
	==========
*/
.noRecord{text-align:center; padding:50px 0px 100px 0px;}
.noRecord img{ max-width:200px;}
.noRecord label{display:block; font-weight:500; font-size:22px;}
.noRecord p{font-size:16px; color:rgba(0,0,0,0.5); margin-bottom:25px;}
.noRecord a{border:1px solid rgba(0,0,0,0.1); border-bottom:2px solid rgba(0,0,0,0.1); padding:10px 15px; border-radius:5px;}

/* =========== */
.dataTable .bottom{font-size:13px; padding-top:15px;}
.dataTable .bottom:after{clear:both; content:" "; display:block;}
.dataTable .bottom .dataTables_length, .dataTable .bottom .dataTables_info{
	float:left;
	display: inline-block;	
	vertical-align: top;
	padding: 0px 20px 0px 0px;
	clear:unset;
}
.dataTable .bottom .dataTables_length select{ border-top:1px solid rgba(34,36,38,0.1); margin:0px 5px; }
.dataTable .bottom .dataTables_info{ padding-top:3px; }

.dataTable .bottom .dataTables_paginate{float:right;}
.dataTable .bottom .dataTables_paginate a{margin:0px 10px; cursor:pointer;}
.dataTable .bottom .dataTables_paginate a.disabled{color:#888;}
.dataTable .bottom .dataTables_paginate span{margin:0px 10px;}
.dataTable .bottom .dataTables_paginate span a{		
	border:none!important;
	padding:5px 15px;
	border-radius:45px;
	display:inline-block;
	cursor:pointer;
	font-size:13px;
	margin:0px 2px;
	color:#1c1c1c;
}
.dataTable .bottom .dataTables_paginate span a:hover{background:#f0f0f0;}

.dataTable .bottom .dataTables_paginate span a.current{
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	box-shadow: 0px 7px 7px 0px rgba(17, 92, 199, 0.26);
	color:#fff;
}
.dataTable .bottom .dataTables_paginate span a:last-child{
	border-left:1px solid #d4dce9;	
}
.dataTable .bottom .dataTables_paginate span span{border:none;}
.dataTable .bottom .dataTables_paginate a.next:after{
	font-family:"FontAwesome";
	content:"\f105";
	margin-left:5px;
}
.dataTable .bottom .dataTables_paginate a.previous:before{
	font-family:"FontAwesome";
	content:"\f104";
	margin-right:5px;
}

/* =========== Tag */
.tag{
	display:inline-block!important; 
	background:#f17b7b; 
	color:#fff; 
	font-weight:600;
	font-size:11px;
	text-transform:uppercase;
	border-radius:2px;
	padding:2px 4px;
	vertical-align:top;
	text-align:center;
	min-width:50px;
}
/* == Lead */
.closed{background:#f17b7b;}
.archived{background:#7c999b;}

/* == Lead Status*/
.new{background:#00bcd4;}
.assigned{background:#45cd7f;}
.quoted{background:#fcb800;}
.not_interested{background:#bfbfbf;}
.unsuccessful{background:#f17b7b;}
.follow_up{background:#a88add;}

/* == Quote Status*/
.sent{background:#a88add;}
.Opened{background:#1a94e2;}
.quote{background:#fcb800;}
.accepted{background:#45cd7f;}

/* 
    #######################
    ######### Listing Pagging
    #######################
*/
.paggingMain
{
	text-align:center;	
	padding:0px 0px 10px 0px;
	position:relative;
	height:47px;
	margin:0px auto 0px auto;	
}
.paggingMain .pagingLeft
{
	position:absolute;
	top:24px;
	left:0px;
	font-size:13px;
}
.paggingMain .pagingright
{
	position:absolute;
	top:13px;
	right:0px;
	font-size:13px;
}
.paggingMain .pagginMiddle
{
	padding:0px 50px;
	text-align:center;
}
.paggingMain .pagginMiddle .viewer
{
	display:inline-block;
	background:#ffffff;
	border:1px solid #e3e3e3;
	border-bottom:2px solid #e3e3e3;
	border-radius:5px;
}
.paggingMain .pagginMiddle .viewer a:hover
{
	background-color:#f2f2f2!important;
}
.paggingMain .pagginMiddle .viewer a,
.paggingMain .pagginMiddle .viewer span
{
	padding:11px 10px 10px 10px;
	width:42px;
	height:42px;
	border-right:1px solid #e3e3e3;
	float:left;
	text-align:center;
	overflow:hidden;
}
.paggingMain .pagginMiddle .viewer span.awhite
{
	background:#e9e9e9;
	color:#000000;
}
.paggingMain .pagginMiddle .viewer a.next,
.paggingMain .pagginMiddle .viewer a.last,
.paggingMain .pagginMiddle .viewer a.prev,
.paggingMain .pagginMiddle .viewer a.first,
.paggingMain .pagginMiddle .viewer span.firstDisable,
.paggingMain .pagginMiddle .viewer span.prevDisable,
.paggingMain .pagginMiddle .viewer span.nextDisable,
.paggingMain .pagginMiddle .viewer span.lastDisable
{
	background:url("../../images/pagging.png") no-repeat;
	text-indent:-5000px;
}
.paggingMain .pagginMiddle .viewer a.next{	background-position:-174px 17px;}
.paggingMain .pagginMiddle .viewer a.last{	background-position:-242px 17px;}

.paggingMain .pagginMiddle .viewer span.nextDisable{	background-position:-172px -45px;}
.paggingMain .pagginMiddle .viewer span.lastDisable{	background-position:-242px -45px;}

.paggingMain .pagginMiddle .viewer a.prev { background-position:-52px 17px; }
.paggingMain .pagginMiddle .viewer a.first{	background-position:17px 17px;  }

.paggingMain .pagginMiddle .viewer span.prevDisable{ background-position:-52px -45px;}
.paggingMain .pagginMiddle .viewer span.firstDisable{ background-position:17px -45px;}

/* 
    #######################
    ######### view
    #######################
*/
.ulListing{}
.ulListing li{border-bottom:1px solid #f5f5f5; display:grid; grid-template-columns:40% 15% 15% 15% 15%;}
.ulListing li:last-child{border-bottom:0px;}
.ulListing li div{padding:15px 0px;}
.ulListing li.title {font-weight:600;}

/* 
    #######################
    ######### FROM
    #######################
*/
.card.form{margin-bottom:15px; padding:25px;}
.form li{display:grid; grid-template-columns:39% 61%; grid-column-gap:0%;}
.form li .lbl{padding-top:10px;}
.form li .lbl span{
    font-size:14px; color:red;
    position:absolute;
    top:13px; right:5px;
}
.form li .value .input{width:100%;}
.inputLoader{position:absolute; top:0px; right:0px;}
.formButtonPanel{text-align:center; margin:40px 0px;}
.formButtonPanel .submitBtn{/*margin:0px 15px;*/ display:inline-block;}
.formButtonPanel:after{content:" "; display:block; clear:both}

.formButtonPanel .prev{float:left; width:120px!important;}
.formButtonPanel .prev .btn{
	background-image:url("../../images/button_image.png")!important;
	background-color:rgb(62, 131, 230)!important;
	background-size:35px;
	background-repeat:no-repeat;
	background-position:15px -37px;
	padding:12px 30px 12px 50px;
}
.formButtonPanel .prev.disable .btn{background-color:rgba(0,0,0,0.3)!important; pointer-events:none!important;}

.formButtonPanel .next{float:right; width:120px!important;}
.formButtonPanel .next.disable .btn{background-color:rgba(0,0,0,0.3)!important; pointer-events:none!important;}

.formButtonPanel .submit{float:right; width:224px!important;}
/*.formButtonPanel .submit .btn{
	background-image:url("../../images/button_image.png")!important;
	background-color:rgb(62, 131, 230)!important;
	background-size:35px;
	background-repeat:no-repeat;
	background-position:100% 14px;
	padding:12px 50px 12px 30px;
}*/
.formButtonPanel .submit.disable .btn{background-color:rgba(0,0,0,0.3)!important; pointer-events:none!important;}

.formButtonPanel .save{width:120px!important;}
.formButtonPanel .save .btnLoader{background:#3cbe8c;}
.formButtonPanel .save .btn{
	background-image:url("../../images/button_image.png")!important;
	background-color:#3cbe8c!important;
	background-size:30px;
	background-repeat:no-repeat;
	background-position:15px -78px;
	padding:12px 30px 12px 55px;	
	box-shadow: 0px 7px 7px 0px rgba(52, 165, 121, 0.26);
}
.formButtonPanel .save.disable .btn{background-color:rgba(0,0,0,0.3)!important; pointer-events:none!important;}

.validation{
	height:20px; font-size:12px;
    color:red; clear:both;
}

/*  ===== Controls 1 */
.inputMaxValue{display: inline-block;}
.inputMaxValue .input{width:100%!important; padding-right:35px;}
.inputMaxValue span.max{
	background:#f4f4f4;
	font-size:12px;
	position:absolute;
	top:1px; right:1px; z-index:1;
	height:35px; width:30px;
	line-height:35px;
	text-align:center!important;
	color:#9b9b9b;
}

/*  ===== Controls 2 */
.textareaMaxValue{
	display: inline-block;
	border:1px solid #e7e7e7;
	padding-bottom:35px;
	border-radius:6px;
}
.textareaMaxValue .input{
	width:100%!important;
	border:none;
	min-height:100px;	
}
.textareaMaxValue .max{
	background:#fbfafa;
	font-size:12px;
	position:absolute;
	bottom:0px; right:0px; z-index:1;
	width:calc(100% - 2px); height:30px;
	text-align:right;
	line-height:30px;
	color:#99a6b9;	
	padding-right:10px;
	box-sizing:border-box;
	border-radius:0px 0px 7px 7px;
}

/*  ===== Controls 3 */
.multiSuggestion{
    display: inline-block;
	vertical-align:top;
	background:#f4f4f4;
	border-radius:4px;	
}
.multiSuggestion .inputLoader{z-index:1; top:11px; right:10px;}
.multiSuggestion .input{width:100%!important;}
.multiSuggestion .selectedValue span{
	background:#ffffff;
	border-radius:45px;
	padding:8px 40px 8px 15px;
	margin:10px 5px;
	font-size:13px;
	position:relative;
	z-index:5000;
}
.multiSuggestion .selectedValue span strong{font-weight:normal;}
.multiSuggestion .selectedValue span a{
	position:absolute;
	top:0px;
	right:0px;
	height:33px;
	padding:0px 10px;
	line-height:30px;
}
.multiSuggestion .selectedValue span a:before{
	font-family:"FontAwesome";
	content:"\f00d";
}
.multiSuggestion .remove{
	position: absolute;
	top:9px; right:0px;
	width:25px;
	height:20px;
	color:#e9a1a1;
}
.multiSuggestion .remove:before{
	font-family:"FontAwesome";
	content:"\f00d";
}

/*  ===== Controls 4 */
.dateSelections{
	display:inline-block;
	vertical-align:top;
	position:relative;
}
.dateSelections input{
	width:100%!important;
	padding-right:35px;
	background:url("../../images/date_ico.png") no-repeat scroll 95% 12px #ffffff;
}
.dateSelections .dateIco:before{ color:#f03454; }
.dateSelections .dateIco{
	position:absolute;
	top:1px; right:5px; z-index:2;
	width:100%; height:35px;
	padding:0px 10px;
	line-height:34px;	
}
.dateSelections span{display:block; width:100%;}
.calenderHolder{position:relative;}

/*  ===== Controls 4 */
.timeSelections{
	display:inline-block;
	vertical-align:top;
	position:relative;
}
.timeSelections input{
	width:100%!important;
	padding-right:30px;
	background:url("../../images/time_ico.png") no-repeat scroll 95% 12px #ffffff;
}

.ui-timepicker{box-shadow:none!important; overflow:hidden!important;}
.ui-timepicker-standard{
	font-family: 'Poppins', 'Open Sans', sans-serif!important; 
	border:1px solid #E8E8E8!important; 
	border-radius:5px;
}



/*  ===== Controls 4 */
.ol{padding:0px; margin:0px 0px 0px 25px;}
.ol, .ol li{list-style-type:number!important;}
.ol li{margin-bottom:10px;}


/* ============== */
.ui-widget-content{max-height:190px; overflow:hidden; overflow-y:scroll;}
.ui-widget-content li div{
	padding:10px 15px;
	border-bottom:1px dashed #edf1f7!important;
	background:none;
	transition: all 0.3s ease-out;
}
.ui-widget-content li div.ui-state-active{border:none; background:#edf1f7; padding:10px 20px;}


/*
	========================
	Light Box Model
	========================
*/
.overlay{
	background:rgba(1,3,23,0.8);
	position:fixed;
	top:0px; left:0px; z-index:100;	
	width:100%; height:110%;
}
.model{
	position:fixed;
	top:0px; left:0px; 	z-index:125;
	width:100%;
	-webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;
}
.activeModel{
	-webkit-transform: translate3d(0,0,0)!important;
	-moz-transform: translate3d(0,0,0)!important;
	transform: translate3d(0,0,0)!important;
}
.outerClickDiv{
	position:fixed;
	top:0px; left:0px; z-index: 100;
	width:100%; height:110%;
}
.modelWrapper{
	margin:4% auto 0px auto;
	width:90%;
	width:90%;
	max-width: 800px;
	background: #fff;
	z-index:105;
}
.modelWrapper h4{
	background:rgb(35,104,203); 
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	color:#fff; 
	padding:15px; 
	font-weight:300; font-size:20px;
	letter-spacing:0.5px;
}
.close{
	position:absolute;
	top:0px; right:0px; z-index:10;
	width:42px; height:100%;	
	background:url('../../images/close.png') no-repeat center;	
	background-color:rgba(0,0,0,0.07);
	background-size:12px;
	overflow:hidden;
}
/* ======== */
.ui-menu, .ui-datepicker{z-index: 10000!important;}



/*
	========================
	User Display Message
	========================
*/
.userDisplayMessaege{
	text-align:center;
	background:#dcfef3; 
	border:1px solid #a6dfcd;
	font-size:16px!important;
	padding:10px 20px;
	border-radius:6px;
	margin-bottom:15px;
	text-align:center;
}
.userDisplayMessaege.success {background:#dcfef3; border-color:#a6dfcd;}
.userDisplayMessaege.warning {background:#fff8e2; border-color:#e9dbb0;}
.userDisplayMessaege.error {background:#fdeeee; border-color:#f1d0d0;}

/*
	========================
	Date Picker
	========================
*/
.ui-datepicker{width:230px!important; height:240px!important; max-height:240px; overflow-y:auto;}


/*
	========================
	Date Picker
	========================
*/
.noListingData{text-align:center; padding:40px 20px 20px 20px; letter-spacing:0.5px;}
.noListingData h4{font-size:28px; font-weight:400;}
.noListingData p{font-size:16px; color:#657384;}
.noListingData .img{padding-top:25px;}
.noListingData .img img{vertical-align:top;}
.noListingData .button{margin:25px 0px 15px;}
.highlightDistrictRow {
    background-color: #f7f7f7 !important;
    font-weight: bold;
}
.highlightTotalCompanyRow {
    background-color: #fdf8e6 !important;
    font-weight: bold;
}