/*
Theme Name: SM Theme
Theme URI: http://shamweb.net
Author: Shamweb
Author URI: http://netsoftbd.com
Version: 1.0
Description: Welcome to chose my theme.
Tags: No tags available
License: Unlimited
License URI: http://www.fb.com/shamolsudakar
Text Domain: Default English(USA) and Bangla
=====================================
font-family: 'Lato', sans-serif;
=====================================
*/
@font-face {
	font-family: 'Lato', sans-serif;
	src: url('../fonts/lato/Lato-Regular.ttf');
	src: local('☺'), 
		 url('../fonts/lato/Lato-Bold.ttf') format('ttf'), 
		 url('../fonts/lato/Lato-Black.ttf') format('truetype'),
		 url('../fonts/lato/Lato-Light.ttf') format('truetype');
}
@font-face {
	font-family: Lato;
	src: url(../fonts/lato/Lato-Regular.ttf);
}

.preloader{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; left: 0;
	z-index: 9999;
	background-color: #FFF;	
}

.preloader::before{
	position: absolute;
	content: "";
	top: -20%; right: 0; bottom: 0; left: 0;
	margin: auto;
	border: 1px solid #ececec;
	border-radius: 50%;
	border-top: 1px solid #adadad;
	width: 40px;
	height: 40px;
	-webkit-animation: spin 0.7s linear infinite; /* Safari */
	animation: spin 0.7s 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); }
}


.loader {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 997;
	background-color: #fff;
}
.loader::before{
	position: absolute;
	content: "";
	top: 0; right: 0; bottom: 0; left: 0;
	margin: auto;
	border: 1px solid #ececec;
	border-radius: 50%;
	border-top: 1px solid #adadad;
	width: 40px;
	height: 40px;
	-webkit-animation: spins 0.7s linear infinite; /* Safari */
	animation: spins 0.7s linear infinite;
}

@-webkit-keyframes spins {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spins {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

body,h1,h2,h3,h4,ul,p,*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Lato', sans-serif;	
	overflow-x: hidden;		
}
body:not(.bg-white){
	background-color: #D3D6E6 !important;
}
.bg-white{
	background-color: #FFF;
}
footer{
	border: none !important;
	background-color: #D3D6E6 !important;
}
img{
	max-width: 100%;
}
ul{
	list-style: none;
}
.note-editable ul,
.note-editable ol{
	margin-left: 30px;
	list-style: square;
}
a:link,a,a:focus{
	text-decoration: none;
	outline: none;
}
a.linkTxt{
	color: #333;
}
a.linkTxt:hover{
	text-decoration: underline;
}
.w-full{
	width: 100%;
	box-sizing: border-box;
}
.wrapper{
	padding: 0 15px 0 220px;
}
[sitebar=false] .wrapper{
	padding: 0 15px 0 65px;
}
#area-headertop{
	padding: 8px 0;
}

.navmenu > ul{
	float: right;

}
.navmenu > ul > li{
	float: left;
}
.navmenu > ul > li > a img{
	width: 23px;
	height: 23px;
	margin-right: 2px;
	border-radius: 100%;
}
.navmenu > ul > li{
	padding-left: 15px;
}
.navmenu > ul > li:first-child{
	margin-left: 0;
}
.sitetitle {
	font-size: 22px;
	/* font-weight: 600; */
	margin-left: 15px;
	line-height: 20px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
[sitebar=false] .sitetitle{
	margin-left: 0;
}
.noti{
	position: relative;
	margin-right: 8px;
}
.noti .count-noti {
	position: absolute;
	top: -5px;
	right: -4px;
	width: 15px;
	height: 15px;
	background-color: #FBCA11;
	color: #000;
	text-align: center;
	line-height: 15px;
	font-size: 10px;
	border-radius: 100%;
	animation-name: notify;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes notify {
	0%   {background-color:#FBCA11;}
	50% {background-color:#00F77C;}
	100% {background-color:#FBCA11;}
}
@-moz-keyframes notify {
	0%   {background-color:#FBCA11;}
	50% {background-color:#00F77C;}
	100% {background-color:#FBCA11;}
}
@keyframes notify {
	0%   {background-color:#FBCA11;}
	50% {background-color:#00F77C;}
	100% {background-color:#FBCA11;}
}
ul.menu-horizontal > li{
	float: left;
	text-align: center;
	border-left: 1px solid #d6d6d6;
}
ul.menu-horizontal > li:first-child{
	border-left: none;
}
[sitebar=false] ul.menu-horizontal > li:first-child{
	border-left: 1px solid #d6d6d6;
}
ul.menu-horizontal > li > a {
	float: left;
	min-width: 90px;
	height: 100%;
	color: #b2afaa;
	padding: 5px 10px;
	position: relative;
}
ul.menu-horizontal > li > a::before{
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	width: 0;
	margin: 0 auto;
	border-bottom: 3px solid transparent;
}
ul.menu-horizontal > li:hover > a,ul.menu-horizontal > li.active > a{
	color: #383838;
}
ul.menu-horizontal > li:hover > a::before,ul.menu-horizontal > li.active > a::before{
	width: 100%;
}
ul.menu-horizontal > li > a .mnu-ico{	
	width: 24px;
	height: 24px;
	font-size: 21px;
	display: table;
	margin: 0 auto;
}
ul.menu-horizontal > li > a span{
	position: relative;
	top: -2px;
}
header{
	position: fixed;
	width: 100%;
	z-index: 999;
	left: 0;
	top: 0;
}
#area-sidebar {
	position: fixed;
	width: 220px;
	height: 100%;
	z-index: 999;
	left: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
#closeMenus {
	position: absolute;
	top: 4px;
	right: 0;
	color: #FFF;
	padding: 5px 10px;
	cursor: pointer;
	display: none;
}
/* [sitebar=false] #area-sidebar{
	left: -250px;
} */
#MyClockDisplay {
	padding: 10px 15px;
    background-color: #0480B7;
    color: #FFF;
}
.logo {
	float: left;
	width: 100%;
	height: 59px;
	/* background: #b59090; */
	box-sizing: border-box;
	padding: 8px 15px;
}
.logo img{
	width: 100%;
	height: 100%;
}
.main-menu{
	float: left;
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;	
}
.main-menu > ul > li{
	float: left;
	width: 100%;
	position: relative;
}
.main-menu > ul > li > a{
	float: left;
	width: 100%;
	padding: 10px 0 13px 33px;
	font-size: 14px;
	box-sizing: border-box;	
}

.main-menu > ul > li a > span.nav-ico {
	position: absolute;
	color: #000;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	top: 8px;
	left: 0;
	border-radius: 3px;
	z-index: 1;
}
.main-menu > ul > li > a > i  {
	float: right;
	margin-top: 3px;
}
.main-menu > ul ul > li > a{
	border: none;
}
.main-menu > ul ul > li{
	padding-left: 33px;
}
.main-menu > ul ul > li > a{
	width: 100%;
	float: left;
	padding: 3px 0;
}
.main-menu > ul ul{
	float: left;
	width: 100%;
	padding: 3px 0;
	display: none;
	box-shadow: inset 0 11px 7px -7px rgba(0,0,0,0.2);
}
/* main{
	padding: 118px 0 30px 15px;
} */
main {
	padding: 115px 0 40px 15px;
	display: block;
	box-sizing: border-box;
	float: left;
	width: 100%;
}
#area-menu{
	border-bottom: none !important;
}
[sitebar=false] main{
	padding: 115px 0 40px 0;
}

.card,.card-header,.card-body,.card-footer{
	float: left;
	width: 100%;
	box-sizing: border-box;
}
.card {
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
	box-shadow: 0 8px 20px -10px rgba(0,0,0,0.2);
}
.card .card-header{
	padding: 5px 15px 5px 5px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;	
	box-shadow: 0 2px 4px -4px rgba(0,0,0,0.6);

}
.card-title {
	font-size: 14px;
	padding: 0 15px;
	position: relative;
	top: -2px;
	min-height: 35px;
	font-weight: bold;
}
.card-title i {
	width: 18px;
	text-align: center;
	position: relative;
	left: -4px;
}
.card .card-header, .card .card-footer {
	border: none !important;
	background: #fff !important;	
	position: relative;
	z-index: 2;
}
.card .card-header h2,.header-controls {
	font-size: 16px;
	padding: 3px 10px;
	float: left;
	border-radius: 10px;	
}
.card .card-header h2, .header-controls{
	background: transparent !important;
	text-shadow: none !important;
}
.header-controls{
	float: right;
}
.header-controls.left{
	float: left;
}
.header-controls ul{
	list-style: none;

}
.header-controls ul li{
	float: left;
	padding: 0 5px;	
}

.header-controls ul li a{
	float: left;
	font-size: 16px;
	line-height: 16px;
	position: relative;	
}
.header-controls ul li a::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	width: 0;
	margin: 0 auto;
	border-bottom: 3px solid transparent;
}
.header-controls ul li:last-child{
	border-right: none;
}
.card .card-body{
    position: relative;
	padding: 15px;
	border: none !important;
	border-radius: 0 !important;
}

.card .card-header,.card .card-footer{
	border-radius: 0;
}

.card .card-footer{
	position: relative;
	top: -2px;
	padding: 0 15px;
	text-align: right;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
.card .card-footer a{
	font-size: 12px;
}
.card .card-body + .card-footer{
	top: -3px;
}
.card .card-header,.card .card-footer{
	border-radius: 0;
}

footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 99;
	padding: 5px 15px 5px 235px;
}
footer p{
	font-size: 12px;
}

[sitebar="false"] footer {
	padding: 5px 15px 5px 65px;
}

/*==========================
    INPUT FIELD SMALL
==========================*/

.input-small input, .input-small select, .input-small textarea,.input-small .select2-container .select2-selection--single,
.input-large input, .input-large select, .input-large textarea,.input-large .select2-container .select2-selection--single
{
	display: block;
	width: 100%;
	height: 26px;
	padding: 6px 8px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #cecece;
	border-bottom-color: #ddd;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 10px 10px -4px rgba(136, 136, 136, 0.3);
	box-shadow: inset 0 10px 10px -4px rgba(136, 136, 136, 0.3);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	outline: none !important;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple
{
	display: block;
	width: 100%;
	min-height: 29px;
	padding: 0;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #cecece;
	border-bottom-color: #ddd;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 10px 10px -4px rgba(136, 136, 136, 0.3);
	box-shadow: inset 0 10px 10px -4px rgba(136, 136, 136, 0.3);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	outline: none !important;	
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	position: relative;
	top: 4px;
	padding: 0 4px;
}
.select2-container .select2-search--inline .select2-search__field{
	margin-top: 0;
	height: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin-right: 2px;
	margin-top: 0;
	font-size: 13px;
	padding: 0 3px;
	margin-bottom: 3px;
}
.select{
	opacity: 0;
}

.input-large input, .input-large select, .input-large textarea{
	height: 29px;
}
.input-small input:focus,.input-small select:focus,.input-small textarea:focus,
.input-large input:focus,.input-large select:focus,.input-large textarea:focus
{
	border-bottom-width: 2px;
}
.input-small .form-group,
.input-large .form-group
{
	/* float: left;
	width: 100%; */
	box-sizing: border-box;
	margin-bottom: 15px;
}
.input-small .form-group:last-child,
.input-large .form-group:last-child
{
	margin-bottom: 0;
}
.input-small label > span,
.input-large label > span
{
	color: red;
	font-weight: normal;
}
.input-small select,
.input-large select
{
	padding: 2px 3px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	background: #fff url(../images/dropdown-arrow-down.png) no-repeat top 10px right 6px;
	background-size: 8px 6px;
	outline: none !important;
}
select.arrow-less{
	background: transparent;
}
.input-small input[type=number],
.input-large input[type=number]
{
	padding: 2px 8px;
	outline: none !important;
}
.input-large input[type=file]
{
	padding: 2px 2px;
}
.input-large input[type="checkbox"],.input-large input[type="radio"]{
	height: auto !important;
	box-shadow: none;
}
.tooltips{
	float: right;	
}
.tooltips i{
	color: #626262;
}
.input-small label,
.input-large label
{
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.input-small.label-right label,
.input-large.label-right label
{
	text-align: right;
}
.tooltips span{
	display: none;
	position: absolute;
	top: 18px;
	max-width: 200px;
	right: 0;
	background-color: #333;
	color: #FFF;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	box-shadow: 0 6px 10px -2px rgba(0,0,0,0.4);
}
.tooltips:hover span{
	display: block;
}
.input-small textarea,
.input-large textarea
{
	min-height: 80px;
	resize: vertical;
}
.input-small.label-right label .tooltips,
.input-large.label-right label .tooltips
{
	margin-left: 5px;
}

.input-large .select2-container .select2-selection--single{
	height: 29px;
	padding: 0;
}
.input-small .select2-container .select2-selection--single{
	height: 27px;
	padding: 0;
}
.input-large .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: -1px;
}
.input-small .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: -2px;
}
.input-large .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 28px;
}
.input-small .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 27px;
}



.button {
	padding: 5px 15px;
	border: 2px solid #455A64;
	background-color: #FFF;
	color: #455A64;
	font-weight: 400;
	font-size: 15px;
	box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.3);
	border-radius: 3px;
}
.button:hover{
	background-color: #455A64;
	color: #d1d1d1d1;
}
.button-default,.button-save,.button-edit,.button-search,.button-clear,.button-delete,.button-select,.button-add {
	background: #4CAF50 url(../images/save.png) no-repeat top 10px left 15px;
	background-size: 15px 15px;
	padding-left: 35px;
	padding-top: 7px;
	padding-bottom: 8px;
	padding-right: 20px;
	color: #fff !important;
	border-bottom-color: #19931E;
	border-bottom-width: 2px;
	outline: none !important;
	margin-bottom: 2px;
}
.button-save:hover{
	background-color: #449D44;
	color: #fff;
	border-bottom-color: #09771f;
}
.button-edit {
	background: #31B0D5 url(../images/edit.png) no-repeat center left 15px;
	border-bottom-color: #1D8FB0;
}
.button-edit:hover,.button-search:hover {
	background-color: #229CBF;
	border-bottom-color: #177E9B;
}
.button-search {
	background: #31B0D5 url(../images/find.png) no-repeat center left 15px;
	border-bottom-color: #1D8FB0;
}
.button-clear,.button-default,.button-add {
	background: #3B4B54 url(../images/reset.png) no-repeat center left 15px;
	border-bottom-color: #223037;
}
.button-clear:hover,.button-default:hover,.button-add:hover {
	background-color: #223037;
	border-bottom-color: #0b0c0d;
}
.button-add{
	background: #3B4B54 url(../images/plus.png) no-repeat top 10px left 15px;
	border-bottom-color: #223037;
}
.button-default{
	background-image: none;
	padding-left: 20px;
}
.button-delete {
	background: #d9534f url(../images/delete.png) no-repeat center left 15px;
	border-bottom-color: #c4231e;
}
.button-delete:hover {
	background-color: #c83f3b;
	border-bottom-color: #a60a05;
}
.button-select {
	background: #3B4B54 url(../images/select.png) no-repeat center left 15px;
	border-bottom-color: #223037;
}
.button-select:hover {
	background-color: #223037;
	border-bottom-color: #0b0c0d;
}
.btn-xs {
	padding: 4px 10px 3px 30px;
	background-position: 10px 5px;	
}
.btn-xs.button-default{
	padding: 4px 10px 3px 10px;
}
.btn-sm {
	background-position: 15px 9px;
}
.btn{
	position: relative;
}
.btn:active{
	top: 2px;
}
.btn .icon {
	width: 20px;
	display: inline-block;
	height: 20px;
	position: relative;
	right: -8px;
	z-index: 1;
}
.btn .icon::after {
	position: absolute;
	top: -2px;
	right: -3px;
	bottom: -2px;
	left: -3px;
	content: "";
	z-index: -1;
	background-color: rgba(255,255,255,0.15);
	border-radius: 3px;
}

.icon-less{
	background-image: none !important;
	padding-left: 10px;
}
.btn-sm.icon-less{
	padding-left: 15px;
    padding-right: 15px;
}
.btn-md.icon-less{
	padding-left: 20px;
    padding-right: 20px;
}
.btn-xs.icon-less{
	padding-left: 10px;
    padding-right: 10px;
}
.btn{
	outline: none !important;
}
    
table.dataTable thead th, table.dataTable thead td {
	border-bottom: 1px solid #c4c4c4;
}
.dataTables_wrapper .dataTables_filter input{
	border: 1px solid #ddd;
	position: relative;
	right: -2px;
	text-indent: 5px;
	font-weight: normal;
}
.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y {
	background-color: transparent !important;
}
.ps__thumb-y {
	background-color: rgba(0,0,0,0.5) !important;
}
.dropdown-menu {
	left: auto;
	right: 0;
}
.notify{
	width: 250px;
	max-height: 280px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 10px;
}
.notify li{
	border-bottom: 1px solid #ddd;
	
	word-wrap: break-word !important;
}
.notify li a{
	padding: 10px;
	white-space: normal !important;
}
.notify-readmore{
    margin-top: 5px;
	margin-bottom: 0 !important;
	border: none !important;	
}
.notify-readmore a{
	padding: 0 0 10px 0 !important;
	text-align: right;
	color: #0E658C !important;
}
.notify-readmore:hover a{	
	background: transparent !important;
}

/*==========================
    LOGIN START
==========================*/
.signin-theme {
	background: url(../images/blue-pattern.jpg) repeat;
}
.sign-panel{
	padding: 15px 50px 20px;
	margin-top: 25%;
	background-color: #FFF;
	box-shadow: 0 121px 112px -80px rgba(0,0,0,0.6);
}


.sign-panel .form-horizontal .key{
	padding: 6px 11px 6px 10px;
}
.sign-panel h1{
	font-weight: bold;
	color: #94a6ba;
}
.sign-panel p{
	color: rgba(0,0,0,0.4);
	margin-bottom: 10px;
}
[for=ckpassword]{
	color: rgba(0,0,0,0.4);
	font-weight: normal;
	cursor: pointer;
}
.ckmiddle{
	display: block;
	text-align: center;
}
.sign-panel .input-group-addon i {
	width: 10px;
}
.sign-panel .btn.btn-md.button-default {
	border-right: 1px solid #3e3e3e;
}
/*==========================
    LOGIN END
==========================*/
.navmenu {
	position: relative;
	top: 2px;
}
.themeConfig{
	position: fixed;
	width: 180px;
	height: 100%;
	top: 0;
	right: -250px;
	z-index: 999;
	background-color: #FFF;
	box-shadow: -7px 0 18px 0 rgba(0,0,0,0.2);
}
.themeConfig h2 {
	padding: 11px 15px;
	font-size: 16px;
	background-color: #eaeaea;
}
#colors{
	padding: 15px;
}
#colors ul li{
	float: left;
	width: 45%;
	height: 60px;
	margin-bottom: 15px;
	background-color: #03A9F4;
	border-bottom: 20px solid #0E658C;
	cursor: pointer;
}
#colors ul li:nth-child(even){
	float: right;
}
#closeConfig{
	cursor: pointer;

}

/*==========================
    THEME COLOR
==========================*/
#colors ul li.active{
	box-shadow: 0 0 1px 2px red;
}
#colors ul li[value=default]{
	background-color: #03A9F4;
	border-bottom-color: #0E658C;
}
#colors ul li[value=blue]{
	background-color: #0078FF;
	border-bottom-color: #2E3A7D;
}
#colors ul li[value=gray]{
	background-color: #F0F0F0;
	border-bottom-color: #D2D2D2;
}
#colors ul li[value=black]{
	background-color: #03A9F4;
	border-bottom-color: #1A1919;
}
#colors ul li[value=black-deep]{
	background-color: #34424A;
	border-bottom-color: #6C6C6C;
}
#colors ul li[value=red]{
	background-color: #392E2E;
	border-bottom-color: #AA1F1F;
}
#colors ul li[value=green]{
	background-color: #515050;
	border-bottom-color: #077D1B;
}
#colors ul li[value=purple]{
	background-color: #515050;
	border-bottom-color: #7D59EA;
}
#colors ul li[value=blue-deep]{
	background-color: #34424A;
	border-bottom-color: #0431B8;
}
#colors ul li[value=gray-deep]{
	background-color: #34424A;
	border-bottom-color: #001F3D;
}
.login-logo {
	margin-bottom: 10px;
}
.red{
	color: #ee4d4d;
}
.green{
	color: #10A629;
}
.footer-txt {
	margin-top: 200px;
	color: #979797;
	font-size: 12px;
	margin-bottom: 20px;
}
/* .table{
	margin-bottom: 0;
} */
.pagination {
	margin: 0;
}
.pagination > li > a, .pagination > li > span {
	font-size: 12px;
}
#alertOutter {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 999999999999;
}
#alert {
	width: 300px;
	border: 6px solid rgba(0,0,0,0.73);
	margin: 13% auto;
	background-color: #FFF;
}
.alert-body {
	padding: 20px 15px;
	text-align: center;
}
.alert-footer {
	padding: 10px 15px;
	text-align: right;
	border-top: 1px solid #e3e3e3;
}
.alert-footer .button{
	margin-left: 5px;
}
.alert-footer .button i, .btn-icon i {
	margin-right: 0;
}
.button.success {
	outline: none !important;
	color: #fff;
	border: none;
	background-color: #4bab60;
	border-bottom: 2px solid #22933b;
}
.button.success:hover {
	background-color: #5ab96f;
	border-bottom: 2px solid #31aa4b;
}
.button.danger{
	outline: none !important;
	color: #fff;
	border: none;
	background-color: #e65959;
	border-bottom: 2px solid #d52f2f;
}
.button.danger:hover {
	background-color: #ed7272;
	border-bottom: 2px solid #e74747;
}
.cs2 {
	width: 35px ;
	display: inline-block;
	text-align: right;
}
input{
	outline: none !important;
}
#label-bind{
	display: inline-block;
}
.modal-content{
	border-radius: 0;
}

.btn-input {
	padding: 3px 5px;
}
.input-large .btn-input{
	height: 29px;
}
.dynamicFields{
	margin-bottom: 5px;
}
.addedFields, .row_space_bottom,.row_space_bottom_des {
	margin-bottom: 10px;
}
.row_space_bottom_des > div{
	margin-bottom: 5px;
}
.select2-container{
	width: 100% !important;
}
.tooltip{
	max-width: 250px !important;
	width: 200px !important;
}
.tooltip-inner {
	padding: 8px 10px !important;
	background-color: #202224 !important;
	font-size: 14px;
}
.tooltip-arrow {
	border-top-color: #202224 !important;
}
.ico-box {
	width: 18px;
	text-align: center;
}
.dropdown.button-controller{
	position: relative;
	display: inline-block;
}
.button-controller .dropdown-menu {
	left: auto;
	right: 100%;
	margin-top: -60px;
}
.table.bottom-space {
	margin-bottom: 35px;
}
.thumb-box {
	float: left;
	position: relative;
	margin:0 10px 10px 0;
}

.thumb-box span {
	position: absolute;
	width: 25px;
	height: 25px;
	background: rgba(0,0,0,0.4);
	top: 0;
	right: 0;
	text-align: center;
	line-height: 25px;
	cursor: pointer;
}
.pr-5{
	padding-right: 3px;
}
.pl-5{
	padding-left: 3px;
}
ul.bullet li{
	display: inline-block;
}
.select2-dropdown {
	z-index: 998;
}
.relative{
	position: relative;
	z-index: 1;
}
.datepicker.dropdown-menu{
	max-width: 230px;
}
.table-bg {
	background-color: #6C6C6C;
	color: #FFF;
}
.modal-body {
	display: inline-block;
	width: 100%;
}
.modal-header.auto-height {
	min-height: 50px;
}
.input-group.addon-right input,.input-group.addon-right select{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group.addon-left input,.input-group.addon-left select{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.input-group.addon .input-group-addon i{
	width: 16px !important;
}
.table-label {
	margin-top: 4px;
	display: inline-block;
}
.modal-open .select2-dropdown{
	z-index: 99999;
}

.select-controller select{
	border: none;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 18px;
	outline: none !important;
}
.select-controller {
	position: relative;
	top: -1px;	
	z-index: 1;
}
.select-controller::after {
	content: "\f0d7";
	font-family: FontAwesome;
	color: #6a6a6a;
	border: 1px solid #b0b0b0;
	width: 16px;
	height: 19px;
	position: absolute;
	top: 3px;
	right: 0;
	font-size: 12px;
	text-align: center;
	line-height: 17px;
	z-index: -1;
}
.shorting{
	margin-bottom: 0;	
	margin-bottom: -1px;
}
.shorting .shorting {
	padding-left: 0;
	margin-top: 10px;
}
.collapserShorting {
	position: absolute;
	top: 0;
	right: 0;
	width: 28px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	z-index: 3;
	cursor: pointer;
}
.shorting .list-group-item{
	position: relative;
	padding-left: 49px;
	border-radius: 0;
	cursor: move;
}
.shorting img {
	position: absolute;
	top: 4px;
	left: 10px;
	width: 32px;
	height: 32px;
}
.label-top {
	position: relative;
	top: -7px;
	background-color: #FFD844;
	font-weight: 400;
	color: #333;
}
.shortableSerial {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 28px;
	height: 28px;
	text-align: center;
	line-height: 26px;
	border-radius: 50%;
	border: 1px solid #dedede;
}
.datepicker {
	padding-left: 12px;	
}
.datepicker.dropdown-menu{
	z-index: 99;
}
.modal-open .datepicker{
	z-index: 9999;
}
.from {
	margin-bottom: 15px;
	float: left;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}
.button-inside {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 35px;
	border: none;
	background-color: transparent;
	z-index: 2;
}
[data-target="#assingToPerson"]{
	display: none;
}
.space-row .row{
	margin-bottom: 5px;
}
.user-module section{
	float: left;
	width: 100%;
	box-sizing: border-box;
}
.user-main{
	float: right;
	width: -webkit-calc(100% - 220px);
	width: -moz-calc(100% - 220px);
	width: calc(100% - 220px);
	box-sizing: border-box;
}
.user-header{
	background-color: #E7E7E7;
	padding: 10px 15px;
	min-height: 40px;
	border-bottom: 1px solid #d5d5d5;
}
.user-nav-header {
	padding: 11px 15px;
	min-height: 38px;
}
.user-nav-header h3{
	font-size: 15px;
}
.user-body{
	padding: 15px;
	box-sizing: border-box;
}
.usernames{
	font-size: 18px;
}
.user-nav{
	position: fixed;
	width: 220px !important;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	border-right: 1px solid #ccc;
}
.user-nav ul.user-menu{
	float: left;
	width: 100%;
	padding: 0;
}
.user-nav ul.user-menu > li{
	float: left;
	width: 100%;	
}
.user-nav ul.user-menu > li a{
	float: left;
	width: 100%;
	padding: 5px 15px;
	box-sizing: border-box;	
	color: #686868;
	border-top: 1px solid #ececec;
}

@media(max-width: 767px){
	.user-main{
		width: 100%;
	}
	.user-nav{
		left: -250px;
	}
	.autoAdder{
		flex-wrap: wrap;
	}
	.autoAdder .items {
		flex: 0 0 100% !important;		
	}
	.autoAdder .items.action .btn {
		width: 100%;
		margin-top: 5px;
	}
}

.stockPopUp{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99999;
	background-color: rgba(0,0,0,0.6);
	display: none;
}
.stockPopUp .stockInner{
	position: fixed;
	width: 1000px;
	height: 100%;
	top: 0;
	right: -1300px;
	z-index: 999999;
	background-color: #FFF;
}
.stockPopUp .stockHeader {
	float: left;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
	min-height: 40px;
	background-color: #e8e8e8;
	color: #6f6f6f;
	position: relative;
}
.stockClose {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 40px;
	z-index: 99;
	font-size: 20px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
}
.stockPopUp .stockHeader h3 {
	font-size: 16px;
	margin-top: 10px;
}
.stockPopUp .stockSearch{
	padding: 20px;
	float: left;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}
.stockPopUp .stockBody{
	padding: 0 20px 20px 20px;
	float: left;
	width: 100%;
	box-sizing: border-box;
	height: -webkit-calc(100vh - 210px);
	height: -moz-calc(100vh - 210px);
	height: calc(100vh - 210px);
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
.stockPopUp .stockFooter {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 10px 20px 20px;
	z-index: 9999;
	display: none;
}
#listHeaders{
	opacity: 0;
}
@media(max-width: 999px){
	.stockPopUp .stockInner{
		width: 100%;
	}
}
.has-feedback .form-control-feedback {
	top: 7px;
	right: 0 !important;
	color: #5e5e5e;
}
.flex-list{
	display: flex;
	flex-wrap: nowrap;
}
.flex-list li {
	border: 1px solid #ddd;
	padding: 5px;
	min-height: 34px;
	color: #717171;
	width: 100%;
	margin-right: -1px;
	margin-bottom: -1px;
}
.flex-list li:first-child{
	flex: 0 0 40px;
	text-align: center;
}
.flex-list li:last-child{
	flex: 0 0 80px;
	text-align: right;
}
.flex-list li.center{
	text-align: center;
}
.flex-list li.right{
	text-align: right;
}
.flex-list.flex-list-heading li {
	color: #3e3b3b;
	font-weight: bold;
	font-size: 14px;
}
.flex-list li.sp-m{
	flex: 0 0 100px;
}
.flex-list li.sp-md{
	flex: 0 0 148px;
}
.flex-list-body {
	float: left;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px;
}
.datalistChart {
	max-height: 600px;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 1px;
	padding-right: 1px;
}
.separators {
	width: 100%;
	display: inline-block;
}
.card-title-box {
	float: left;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
	position: relative;
	min-height: 40px;
	z-index: 2;
}
.card-title-icon {
	width: 64px;
	height: 64px;
	border: 1px solid #d6d6d6;
	position: absolute;
	z-index: 2;
	background-color: #fff;
	top: -25px;
	left: 0;
	text-align: center;
	line-height: 64px;
	font-size: 41px;
	color: #9f9f9f;
	/* border-radius: 10px; */
}
.card-title-text {
	float: left;
	margin-left: 75px;
}

.flex-box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.flex-item {
	width: -webkit-calc(100% - 550px);
	width: -moz-calc(100% - 550px);
	width: calc(100% - 550px);
}
.orderModify {
	width: 550px;
	float: right;
	position: relative;
}
.productList {
	padding-right: 20px;
	box-sizing: border-box;
}
.proThumb {
	flex: 0 0 90px;
	max-height: 90px;
}
.proDes {
	padding-left: 15px;
}
.proBrand {
	color: #979797;
	font-size: 12px;
}
.proItem {
	display: inline-block;
	width: 35px;
	height: 25px;
	text-align: center;
	font-size: 16px;
	position: relative;
	top: 1px;
}
.proAddToCart {
	float: right;
}
.proAmount {
	float: right;
	width: 100%;
	text-align: right;
	margin-bottom: 10px;
	margin-top: 30px;
}
.proTk del{
	color: #a8a8a8;
}
.orderMtitle{
	margin-bottom: 10px;
}
.proAddtoInput {
	border: 5px solid transparent;
	text-align: center;
	outline: 1px solid #d5d5d5 !important;
	width: 100px;
}
.proTrash {
	position: absolute;
	top: -8px;
	right: 3px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	color: #a4a4a4;
}
.proTrash:hover{
	color: tomato;
}
.searchedProduct{
	display: flex;
	flex-wrap: wrap;
}
.proBox {
	width: 160px;
	text-align: center;
	margin-bottom: -1px;
	margin-right: -1px;
	border-radius: 0;
	padding-bottom: 10px;
}
.proBox img{
	margin-bottom: 5px;
}
.tks {
	margin: 5px 0 10px;
}
.tks del{
	color: #a8a8a8;
}
ul.storage{
	list-style-type: disc;
	list-style-position: inside;
}
.btn-input-large {
	height: 29px;
	padding: 0;
	width: 34px;
}
.blink,.blinking {	
	background-color: yellow;
	animation-name: offers;
	animation-duration: 1s;
	animation-iteration-count: infinite;		
}
.blink{
	position: relative;
	top: -8px;
	font-size: 10px;
	padding: 1px 3px 2px;
	border-radius: 2px;
	color: #fff;
}
@-webkit-keyframes offers {
	0%   {background-color:yellow;}
	100% {background-color:red;}
}
@-moz-keyframes offers {
	0%   {background-color:yellow;}
	100% {background-color:red;}
}
@keyframes offers {
	0%   {background-color:yellow;}
	100% {background-color:red;}
}

.noti .noti-alert{
    animation-name: alert;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes alert {
	0%   {transform: scale(1);}
	50% {transform: scale(1.5);}
	100% {transform: scale(1);}
}
@-moz-keyframes alert {
	0%   {transform: scale(1);}
	50% {transform: scale(1.5);}
	100% {transform: scale(1);}
}
@keyframes alert {
	0%   {transform: scale(1);}
	50% {transform: scale(1.5);}
	100% {transform: scale(1);}
}
.checkboxs input[type=checkbox]{
	position: relative;
	top: 1px;
	margin: 0;
}
.checkboxs label{
	color: tomato;
}
.bg-red{
	background-color: #D9534F;
	color: #fff;
}
.bg-green{
	background-color: #5CB85C;
	color: #fff;
}
.bg-warning{
	background-color: #df923b;
	color: #fff;
}
.bg-soft{
	background-color: #D5DEFF;
	color: #333;
}
.bg-gray{
	background-color: #979797;
}
.bg-info{
	background-color: #167aec;
}
.bg-primary{
	background-color: #00b0b6;
}
.modal-position{
    z-index: 99999;
}

.logo {
	box-shadow: inset 0 10px 15px -4px rgba(0, 0, 0, 0.3);
}

input[type="button"],input[type="submit"]{
    background-color: #4CAF50 !important;
	border: none !important;
	color: #fff;
	padding: 10px 15px;
	height: 40px;
	border-bottom: 2px solid #19931E !important;
}
.note-editor .modal-body {
	padding-left: 30px !important;
	padding-right: 30px !important;
}
.note-editor label{
    text-align: left !important;
}
.note-editor input[type="checkbox"]{
    width: auto !important;
    top: -8px;
}
.note-editor .dropdown-menu {
	right: auto;
}
.note-editor .modal-content {
	border-radius: 0;
	margin-top: 120px;
}
.modal-backdrop:not(.fade) {
	display: none;
}

.box-panel {
	border: 1px solid #ddd;
	float: left;
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	background-color: #fff;
	position: relative;
}
.orderlist {
	list-style-type: square;
	list-style-position: inside;	
}
.orderlist li {
	box-sizing: border-box;
	position: relative;
	padding: 8px 30px 8px 10px;
	border-bottom: 1px solid #f2f2f2;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.orderlist li::before {
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	background-color: #5b5b5b;
	left: 0;
	top: 17px;
}
.orderlist li:last-child{
	border-bottom: none;
}

.orderlist li input{
	text-align: center;
	width: 100px;
}

.removeExtn {
	position: absolute;
	top: 6px;
	right: 0;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
	color: #f94747;
	cursor: pointer;
}
.adminSearch {
	padding: 5px 0 0;
}
.filter-admin{
	position: relative;
}
.filter-admin i {
	position: absolute;
	top: 5px;
	right: 6px;
	color: #888;
}
.filter-admin input {
	border: none;
	background-color: rgba(0,0,0,0.2);
	color: #ddd;
	width: 100%;
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 3px;
	/* box-shadow: 0 4px 7px -1px rgba(0,0,0,0.2) inset; */
	/* border-bottom: 1px solid #867e7e; */
}

.sticker {
	position: relative;
	display: inline-block;
	background-color: #FBCA11;
	font-size: 12px;
	min-width: 19px;
	min-height: 19px;
	text-align: center;
	line-height: 19px;
	border-radius: 2px;
	margin-left: 2px;
	color: #000;
	padding: 0px 5px;
}
.sticky-ico {
	position: absolute;
	top: 3px;
	right: 3px;
}
.relative-0-index{
	position: relative;
}
.zoomOut{
	position: relative;
	transition: 0.1s all;
	z-index: 0;
	cursor: pointer;
	max-width: 100%;
	max-height: 100%;
	background-color: #FFF;
}
.zoomOut:hover {
	z-index: 2;
	transform: scale(3);
	box-shadow: 0 8px 32px -3px rgba(0,0,0,0.5);
}
.siteUrl {
	color: #333;
}
.siteUrl:hover {
	color: #337ab7;
	text-decoration: underline;
}
.hr {
	margin: 4px 0;
}
.txt-11 {
	font-size: 11px;
}
.table > thead > tr > th{
	vertical-align: middle
}
.button-submit {
	margin-top: 15px;
}
.datepicker{
	margin-top: 0;
}
.label-gray {
	background-color: #777;
}

input.red-input {
	border-color: red;
}

.boundary{
	position: relative;
	z-index: 1;
}
.boundary::after,.boundary::before {
	position: absolute;
	content: "";
	top: 0;
	right: -1px;
	bottom: 0;
	left: -1px;
	border-left: 1px solid red;
	border-right: 1px solid red;
	z-index: -1;
}    
.table > tbody > tr:first-child > td.boundary::after {
	border-top: 1px solid red;
	top: -33px;
}
.boundary::before{
	border-left: none;
	border-right: none
}
.table > tbody > tr:last-child > td.boundary::before {
	border-bottom: 1px solid red;
	bottom: -1px;
}
.cursor{
	cursor: pointer;
}
.autoAdder{
	display: flex;
	max-width: 800px;
	align-items: flex-end;
	border: 2px solid #eee;
	padding: 10px 15px 10px;
	box-sizing: border-box;
	justify-content: space-between;
	margin-bottom: 5px;
}
.autoAdder.full{
	max-width: 100%;
}
.autoAdder.align-center{
	align-items: center;
}
.autoAdder .items:not(.action){
	flex: 1;
}
.autoAdder .items.title-sec{
	flex: 0 0 200px;
}
.autoAdder .items:not(:last-child){
	margin-right: 15px;
}
.autoAdder .items.action .btn{
	position: relative;
	bottom: -1px;
}
.autoAdder .items .label{
	margin-right: 5px;
}
.form-section{
	margin-bottom: 15px;
}
.form-section-border {
	border: 2px dashed #d2d6de;
	padding: 20px 20px 30px;
	position: relative;
	margin-bottom: 15px;
}



/*==========================
    GLOBAL CSS
==========================*/
.themeConfig h2,
.header-controls ul li a,.input-small label,.input-large label,
.txtShadow,.card .card-header h2,#MyClockDisplay,.navmenu > ul > li > a{
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);	
}
.noti .count-noti,.main-menu > ul > li a > span.nav-ico{
	box-shadow: 0 2px 2px 0px rgba(0,0,0,0.3);
}
table.dataTable.no-footer {
	border-bottom: none;
}
[for]{
	cursor: pointer;
}
.responsive{
	max-width: 100%;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: auto;
}

.space-bottom-5{
	margin-bottom: 5px;
}
.form-space{
	float: left;
	width: 100%;
	margin-bottom: 5px;
}

.signList{
	margin-bottom: 10px;
}
.signList ul{
	display: flex;
	flex-wrap: wrap;
}
.signList ul li{
	color: #949494;
	margin-right: 15px;
}
.signList ul li:last-child{
	margin-right: 0;
}
.warning {
	color: #f48a19;
}
.logo-small,.small-menu-sticker{
	display: none;
}
.checkboxs{
	padding: 0;
	display: block;
	margin-left: 13px;
}
.checkboxs.inline{
	margin-left: 0;
	position: relative;
	left: -5px;
}
.checkboxs > li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 5px;	
}
.checkboxs > li input {
	height: initial !important;
	flex: 0 0 26px;
	background-color: transparent;
    box-shadow: none;
}
.checkboxs > li input[type="checkbox"] {
	top: 4px;
}
.checkboxs > li label {
	font-weight: normal;
	color: #333;
	position: relative;
	top: 2px;
	text-shadow: none;
	font-size: 13px;
	flex: 1;
}
.checkboxs.horizontal > li{
	float: left;
	margin-right: 20px;	
}
.checkboxs.horizontal > li label{
	white-space: nowrap;
}

.ng-pagination {
	display: flex;
	justify-content: flex-end;
	flex-wrap: nowrap;
}
.ng-pagination.right{
	justify-content: flex-start;
}
.ng-pagination.center{
	justify-content: center;
}
.ng-pagination > li{
	flex-basis: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;	
	position: relative;
	z-index: 1;
}
.ng-pagination > li::after{
	position: absolute;
	content: "";
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	z-index: -1;
	border-radius: 100%;
	
}
.ng-pagination > li.active::after{
	background-color: #3B4B54;	
}
.ng-pagination > li.pageHome::after{
	background-color: #e3e3e3;	
}
.ng-pagination > li.pageHome{
	color: #333;
}
.ng-pagination > li.active{
	color: #fff;
}
.ng-pagination > li.disabled{
	opacity: .4;
	cursor: default;
}
.ng-confirm-box{
	margin-top: 50% !important;
}

/****** MEDIA *****/
.section-container{
	display: flex;
	width: 100%;
}
.section-container .section-nav{
	flex: 0 0 250px;
	width: 250px;
	padding: 25px 0 16px 5px;
	background-color: #eee;	
	box-sizing: border-box;
}
.section-container .section-nav.media-nav{
	width: 220px;
	flex: 0 0 220px;
}
.section-container .section-content{
	flex: 1;
	padding: 20px 20px 20px 40px;
	position: relative;
}
.section-menu li{
	position: relative;
	z-index: 1;
}
.section-menu li.active::before,
.section-menu li.active::after,
.section-menu li.active a::before,
.section-menu li.active a::after
{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	bottom: 100%;
	right: 0;
	z-index: -2;
	background-color: #fff;
}
.section-menu li.active::after{
	z-index: -1;
	background-color: #eee;
	border-bottom-right-radius: 15px;
}
.section-menu li a{
	display: block;
	padding: 10px 15px;
	color: #333;
	position: relative;
	z-index: 1;
}
.section-menu li.active a::before,
.section-menu li.active a::after
{
	bottom: auto;
	top: 100%;
}
.section-menu li.active a::after{
	z-index: -1;
	background-color: #eee;
	border-bottom-right-radius: 0;	
	border-top-right-radius: 15px;
}

.section-menu li.active a{
	background-color: #fff;
	border-radius: 20px 0 0 20px;
}
.section-menu li a i {
	width: 18px;
	text-align: center;
	position: relative;
	left: -4px;
}
.card-full{
	padding: 0 !important;
}
.submit-button {
	margin-top: 30px;
}
.submit-button > *:not(:last-child){
	margin-right: 5px;
}
.file {
	background-color: #F1F1F1;
	min-height: 100px;
	padding: 20px;
	display: flex;
	color: #555;
	border-radius: 3px;
	position: relative;
	cursor: pointer;
	z-index: 1;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	font-weight: normal;
}
.file.dragables{
	height: 200px;	
}
.file::after{
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	z-index: -1;
	border: 2px dashed #d2d6de;
	border-radius: 3px;
}
/* .file.dragables::after{
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
} */
.file.my-drop-zone::after{
	border-color: #d2d6de;
}
.file.nv-file-over::after{
	border-color: red;
}

.file-title{
	position: relative;
	font-size: 16px;
}
.file:active .file-title{
	top: 2px;
}
.file-title > i{
	color: #737881;
}
.file .thumb {
	display: flex;
	width: 60px;
	height: 60px;
	margin: 3px;
	justify-content: center;
	align-items: center;
	border: 1px solid #d2d6de;
	padding: 2px;
	position: relative;
}
.file > div:nth-child(2){
	margin-left: 10px;
}
.file .thumb button {
	padding: 0;
	width: 22px;
	height: 24px;
	border: none;
	background: transparent;
	outline: none;
	position: absolute;
	top: 0;
	right: 0;
	opacity: .5;
}
.file .thumb button:hover{
	color: red;
	opacity: 1;
}
.file .thumb button:active{
	top: 2px;
}
.file .thumb img{
	max-height: 100%;
	max-width: 100%;
}
.ng-confirm.ng-confirm-light .ng-confirm-bg, .ng-confirm.ng-confirm-white .ng-confirm-bg {
	opacity: .8 !important;
}

.media-libray{
	display: flex;
	flex-wrap: wrap;	
}
.media-libray li {
	width: 195px;
	height: 150px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px 10px 0;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 5px 12px -7px rgba(0,0,0,0.3);
}
.media-libray li.active {
	outline: 4px solid #c1d0ff;
}
.media-libray li img {
	/* max-width: 100%; */
	max-height: 100%;
}
.thumb-ico {
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 29px;
	color: #b4c4d5;
}
.media-libray li .des{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -110%;
	background: linear-gradient(transparent, #000);
	color: #fff;
	z-index: 2;
	padding: 10px;
}
.media-libray li .des .title{
	display: block;
	font-size: 13px;
	word-wrap: break-word;
}
.media-libray li .des small{
	opacity: 0.6;
}
.media-libray li .des i.fa{
	margin-right: 1px;
}
.media-libray li .des small span{
	margin-right: 4px;
}
.media-libray .deleteMedia {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0;
	right: 0;
	z-index: 3;
	border: none;
	outline: none;
	background: transparent;
	color: red;
	opacity: 0;
}
.media-libray .deleteMedia:active{
	top: 2px;
}
.media-libray li:hover .deleteMedia{
	opacity: 1;
}
.media-libray li:hover .des{
	bottom: 0;
}
.queTxt {
	text-align: center;
	color: #b1b5bb;
}
.btn-text-center .btn-xs{
	padding: 4px 10px 3px 10px;
}
.fileUplodeBrowse {
	position: absolute;
	z-index: -5;
}

.modal-xs{	
	width: 95%;
}
.mediapu .modal-body{
	padding: 0;
}
.mediapu .close {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
@media(min-width: 1320px){
	.modal-xs{	
		width: 1340px;
	}
}
.gallery-list {
	display: inline-block;
	width: 100%;
	max-width: 600px;
}
.gallery-list.inline{
	margin-top: 25px;
}
.gallery {
	display: inline-block;
	overflow-y: hidden;
	overflow-x: auto;
	padding-bottom: 6px;
	width: 100%;
	white-space: nowrap;	
}

.gallery li {
	display: inline-flex;
	width: 100px;
	height: 100px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	border: 1px solid #e3e3e3;
	align-items: center;
	justify-content: center;
}

.gallery li img{
	max-height: 100%;
}
.gallery li:not(:last-child){
	margin-right: 10px;
}
.gallery-remove {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background-color: transparent;
	z-index: 2;
	border: none;
	font-size: 19px;
	opacity: 0;
}
.gallery-remove:hover{
	color: red;
}
.gallery-remove:active{
	top: 2px;
}
.gallery li:hover .gallery-remove{
	opacity: 1;
}
.mediainputs{
	position: relative;
	z-index: 1;
	opacity: 0;
}
.mediainputs::before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}
#mediaSelecteBtn {
	border-top: 1px solid #eee;
	padding-top: 20px;
	margin-top: 20px;
}
.media-info {
	margin: 15px 15px 10px 10px;
}
.media-info p {
	margin-bottom: 5px;
	color: #666;
	font-size: 12px;
}
.media-info p:last-child{
	margin-bottom: 0;
}
.media-info p i{
	color: #0ec80e;
}
/********* END MEDIA *********/
.text-gray {
	text-shadow: none;
	color: #62788e !important;
	font-weight: normal;
}
.note-editor.note-frame {
	border: 1px solid #cecece;
}
.popup-content{
	padding: 30px 30px 40px;	
}
.content-box{
	background-color: #fff;
}

.orderitemlist-box{
	background-color: #FFF;
	padding: 20px 0;
}
.ordered-item-list{
	list-style: none;
}
.ordered-item-list li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}
.ordered-item-list li:not(:last-child){
	border-bottom: 1px solid #D3D6E6;
}
.ordered-item-list li .thumb{
	flex: 0 0 70px;
}
.ordered-item-list li .thumb img{
	max-width: 100%;
}
.ordered-item-list li .des{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-left: 30px;
}
.ordered-item-list li .des .title{
	margin-bottom: 5px;
}
.ordered-item-list li .amount{
	white-space: nowrap;
}
.section-title {
	padding: 0 20px;
}

.sorting .sortable-item{
	display: flex;
	border: 2px dashed #eee;
	margin-bottom: -2px;
	padding: 5px 10px;	
	cursor: move;
	align-items: center;
	background-color: #fff;
	position: relative;
}
.sorting .sortable-item > .num{
	width: 40px;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sorting .sortable-item > .thumb {
	flex: 0 0 100px;
	padding-left: 10px;
}
.sorting .sortable-item > .thumb img{
	max-width: 100%;
	max-height: 100%;
}
.sorting .sortable-item > .title{
	padding-left: 15px;
}
.sorting .sorting .sortable-item{
	padding-left: 65px;
}
.sorting > li > .sorting > li .sorting .sortable-item{
	padding-left: 120px;
}
.sorting .sortable-item .sortable-icon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50px;
	z-index: 2;
	display: flex;
	align-items: center;
	cursor: pointer;
	justify-content: center;
}
.panel-collapse .panel-body{
	display: none;
}
.panel-collapse .panel-heading{
	cursor: pointer;
}

.categories > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.categories > ul li {
    margin: 0 10px 20px;
    flex: 0 0 345px;
}
.categories > ul li > a {
    display: flex;
    box-shadow: 10px 10px 80px -10px rgba(0, 0, 0, .3);
    border-radius: 20px;
    position: relative;
    z-index: 1;
	color: var(--baseBg);
    background-color: var(--rgba);
}
.categories > ul li > a .cat-thumb {
    flex: 0 0 150px;
}
.categories > ul li > a .cat-thumb img {
    border-radius: 20px 0 0 20px;
    background-color: var(--rgba);
}
.categories > ul li > a .cat-des {
    flex: 1;
    padding: 20px 10px 10px 15px;
    border-radius: 0 20px 20px 0;
}
.categories .cat-des .title {
    font-size: 16px;
}
.categories > ul li:hover .title {
    color: var(--baseBgTextColor);
}
.categories .cat-des p {
    margin: 0;
}
.categories .cat-des .text {
    color: var(--textColor-muted);
}
.categories > ul li:hover .text {
    color: var(--baseBgTextColor);
    opacity: var(--opacity);
}
.categories > ul li a::after {
    position: absolute;
    content: "";
    width: 35px;
    height: 35px;
    bottom: 0;
    right: 0;
    background-color: var(--baseBg);
    z-index: 1;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 20px;
}
.categories > ul li:hover a::after {
    width: calc(100% + 3px);
    height: 100%;
    border-radius: 20px;
}
.categories > ul li a * {
    z-index: 2;
}
.user-stratistic {
	width: 100%;
	margin-bottom: 20px;
}
.user-stratistic > ul{
    justify-content: flex-start;
}
.categories.user-stratistic > ul li {
	margin: 0 20px 20px 0;
	flex: 0 0 257px;
}
.categories.user-stratistic > ul li:last-child{
    margin-right: 0;
}

.categories.user-stratistic > ul li > a .cat-thumb {
	flex: 0 0 100px;
}

.categories.user-stratistic > ul li:hover a::after {
	width: calc(100% + 3px);
	height: 100%;
}
.notes{
	margin-bottom: 5px;
}
.notes > p {
	background-color: rgb(255, 168, 168);
	color: #282828;
	border-radius: 20px;
	padding: 5px 15px;
	display: inline-block;
	/* box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); */
	font-size: 12px;
}
.addurl{
	padding-top: 5px;
}


.categories>ul li .title,.categories>ul li a::after,
.categories .cat-des .text,
.media-libray li .des,.media-libray .deleteMedia,
.themeConfig,.stockPopUp .stockInner,
.main-menu > ul > li a,.wrapper,#area-sidebar,footer,.header-controls ul li a::before,
ul.menu-horizontal > li > a::before,ul.menu-horizontal > li > a{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

/*==========================
    MOBILE RESPONSIVE
==========================*/
@media(min-width: 768px){

	[sitebar="false"] #MyClockDisplay {
		font-size: 10px;
		padding: 8px 5px 0;
		text-align: center;
		height: 40px;
		width: 55px;
	}
	[sitebar="false"] .logo-small{
		display: block;
	}
	[sitebar="false"] .nav-title > .sticker{
		display: none;
	}
	[sitebar="false"] .sticker.small-menu-sticker {
		display: inline-block;
		position: absolute;
		top: 1px;
		left: 16px;
		z-index: 1;
	}
	[sitebar="false"] .filter-admin {
		width: 26px;
	}
	[sitebar="false"] #area-sidebar .filter-admin:hover{
		width: 100%;
	}
	[sitebar="false"] #area-sidebar .filter-admin:hover input{
		background-color: #fff;
		box-shadow: 3px 10px 5px -7px rgba(0,0,0,0.5);
	}
	[sitebar="false"] .filter-admin input::placeholder{
		color: transparent;
	}
	[sitebar="false"] .filter-admin:hover input,
	[sitebar="false"] .filter-admin input:focus,
	[sitebar="false"] .filter-admin:hover input::placeholder,
	[sitebar="false"] .filter-admin:hover input:focus::placeholder{
		color: #333;
	}
	[sitebar="true"] .filter-admin:hover {
		width: 100%;
	}
	[sitebar="false"] .ps__thumb-y,[sitebar="false"] .logo > img:not(.logo-small) {
		display: none !important;
	}
	[sitebar="false"] .logo {
		width: 55px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-bottom: 1px solid #394691; */
	}
	[sitebar="false"] .logo img {
		height: auto;
	}
	[sitebar="false"] #area-sidebar{
		background-color: transparent !important;				
		width: 55px;
	}
	[sitebar="false"] .main-menu > ul > li a,
	[sitebar="false"] #area-sidebar{
		transition: none !important;
	}
	[sitebar="false"] #area-sidebar #admnuList .nav-title{
		display: none;
	}
	[sitebar="false"] #area-sidebar:hover{
		width: 220px;
	}
	[sitebar="false"] #area-sidebar:hover #admnuList .nav-title{
		display: inline-block;
	}
	
	[sitebar="false"] #area-sidebar::after {
		position: fixed;
		content: "";
		top: 0;
		left: 0;
		bottom: 0;
		width: 55px;
		/* background-color: #2E3A7D; */
		z-index: -1;
	}
	[sitebar="false"] .main-menu > ul > li{
		min-height: 44px;
	}
	[sitebar="false"] .main-menu > ul > li > a > .fa-caret-down,
	[sitebar="false"] .main-menu > ul > li > a > .nav-title{
		opacity: 0;
	}
	[sitebar="false"] .main-menu > ul > li:hover > a > .fa-caret-down,
	[sitebar="false"] .main-menu > ul > li.active > a > .fa-caret-down,
	[sitebar="false"] .main-menu > ul > li:hover > a > .nav-title,
	[sitebar="false"] .main-menu > ul > li.active > a > .nav-title{
		opacity: 1;
	}
	[sitebar="false"] .main-menu > ul > li:hover > ul{
		display: block;
	}
	[sitebar="false"] .main-menu > ul > li:hover, [sitebar="false"] .main-menu > ul > li.active{
		/* background-color: #2E3A7D; */
		border-radius: 0 6px;
	}
	[sitebar="false"] .main-menu > ul > li > ul {		
		position: absolute;
		top: 100%;
		left: 24px;
		z-index: 3;
	}
	[sitebar="false"] .main-menu > ul > li > ul::after {
		position: absolute;
		content: "";
		top: 0;
		right: 24px;
		bottom: -8px;
		left: 0;
		z-index: -1;
		/* background-color: #0078FF; */
		box-shadow: inset 0 11px 7px -7px rgba(0,0,0,0.2), 0 26px 30px -24px rgba(0,0,0,0.7);
		border-radius: 0 0 6px 6px;
	}
	[sitebar="false"] .main-menu > ul ul > li {
		padding-left: 9px;
	}
	[sitebar="false"] .main-menu > ul ul > li > a {
		padding: 3px 2px;
	}	
	[sitebar="false"] .main-menu {
		padding: 0 0 0 15px;
		margin-bottom: 90vh;
	}
	[sitebar="false"] .main-menu > ul > li > a > i {
		margin-top: 4px;
		margin-right: 8px;
	}
	[sitebar="false"] .main-menu > ul > li a,[sitebar="false"] .main-menu > ul ul{
		border-bottom: none !important;
	}
	[sitebar="false"] .main-menu{
		border: none;
	}
	[sitebar="false"] .main-menu > ul > li.active-x > a > span.nav-ico {
		background-color: #FBCA11;
	}
}
@media(max-width: 768px){
	/*** CATEGORY ***/
    .categories > ul li {
        margin: 0 10px 20px;
        flex: 0 0 28%;
    }
    .categories > ul li > a {
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: 100%;
    }
    .categories > ul li > a .cat-thumb img {
        border-radius: 20px;
    }
    .categories > ul li:hover a::after {
        width: 100%;
        height: calc(100% + 3px);
    }
    .categories > ul li > a .cat-thumb {
        flex: 1;
    }
    .categories > ul li > a .cat-des {
        padding: 5px 10px 10px 20px;
    }
    .cat-des .title {
        font-size: 14px;
        margin-bottom: 5px;
    }    
    /*** CATEGORY ***/
}
@media(max-width: 767px){
	#area-sidebar{
		left: -250px;
		box-shadow: 7px 0 18px 0 rgba(0,0,0,0.4);
	}
	.wrapper{
		padding: 0 15px 0 15px !important;
	}
	.sitetitle {
		text-align: center;
		margin-bottom: 12px;
		font-size: 18px;
	}
	.navmenu > ul > li > a {
		color: #FFF;
		font-size: 11px;
	}
	.navmenu > ul {
		float: none;
		display: table;
		margin: 0 auto;
	}
	ul.menu-horizontal > li > a .mnu-ico {		
		font-size: 14px;
	}
	ul.menu-horizontal > li > a span {
		font-size: 11px;
		top: -9px;
	}
	#area-menu {
		overflow: auto;
		height: 40px !important;
		white-space: nowrap;
		position: relative;
		z-index: 1;
	}
	ul.menu-horizontal > li > a {
		min-width: 70px;
		padding: 0px 6px;
		height: 40px;
	}
	ul.menu-horizontal > li{
		float: none;
		display: inline-block;
		border-bottom: 1px solid #d6d6d6;		
	}
	ul.menu-horizontal > li:last-child{
		border-right: 1px solid #d6d6d6 !important;
	}
	main {
		padding: 140px 0 15px 0 !important;
	}
	#closeMenus{
		display: block;
	}
	footer{
		position: static;
		padding: 10px 15px !important;
	}
	.noti .count-noti {
		top: -7px;
		right: -7px;
	}
	.header-controls {
		white-space: nowrap;
		overflow: auto;
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 7px;
		margin-top: 3px;
	}
	.header-controls ul li {
		display: inline-block;
		float: none;
	}
	.card .card-header h2 {
		font-size: 13px;
	}
	.input-small.label-right label,
	.input-large.label-right label
	{
		text-align: left !important;
	}
	.header-controls ul li a {
		font-size: 14px;
	}
	.notify{
		right: auto;
		left: 0 !important;
	}
}
@media (max-width: 1600px) and (min-width: 1200px){
    .categories > ul li{
        flex-basis: 330px;
    }
    .categories > ul li > a .cat-des {
        padding: 20px 10px 10px 15px;
    }
}

@media (max-width: 1199px){
	.input-small.label-right label, .input-large.label-right label{
		text-align: left;
	}
	.pr-5 {
		padding-right: 15px;
		margin-bottom: 5px;
	}
	.pl-5 {
		padding-left: 15px;
	}
	.section-container{
		flex-wrap: wrap;
	}
	.section-container .section-nav{
		width: 100% !important;
		flex: 0 0 100%;
	}
	.section-container .section-content{
		width: 100%;
	}
	.section-menu li.active::before,
	.section-menu li.active::after,
	.section-menu li.active a::before,
	.section-menu li.active a::after{
		position: static;
	}
	.section-menu li.active a {
		border-radius: 20px;
	}
	.section-container .section-nav {
		padding-right: 5px;
	}
}
@media (max-width: 991px){
    .categories.user-stratistic > ul li:last-child{
        margin-right: 0;
    }
    .categories.user-stratistic > ul li {
        flex: 0 0 calc(25% - 15px);
    }
}

@media (max-width: 500px){
    .categories > ul li {
        margin: 0 10px 20px;
        flex: 0 0 40%;
    }
    .categories.user-stratistic > ul li {
        flex: 0 0 calc(50% - 10px);
    }
    .categories.user-stratistic > ul li:nth-child(2n+2){
        margin-right: 0;
    }
}

@media (max-width: 340px){
    .categories > ul li {
        flex: 0 0 100%;
    }     
}