.order-card {
    color: #fff;
}

.bg-c-blue {
    background: linear-gradient(45deg,#4099ff,#73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg,#2ed8b6,#59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg,#FFB64D,#ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg,#FF5370,#ff869a);
}


.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

.card .card-block {
    padding: 25px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}
.logodav{
    width: 40px;
    /* width: 120px; */
    height: 100%;
}
.card-box {
    position: relative;
    color: #fff;
    padding: 20px 10px 40px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.card-box:hover {
    text-decoration: none;
    color: #f1f1f1;
}
.card-box:hover .icon i {
    font-size: 100px;
    transition: 1s;
    -webkit-transition: 1s;
}
.card-box .inner {
    padding: 5px 10px 0 10px;
}
.card-box h3 {
    font-size: 27px;
    font-weight: bold;
    margin: 0 0 8px 0;
    white-space: nowrap;
    padding: 0;
    text-align: left;
}
.card-box p {
    font-size: 15px;
}
.card-box .icon {
    position: absolute;
    top: auto;
    bottom: 5px;
    right: 5px;
    z-index: 0;
    font-size: 72px;
    color: rgba(0, 0, 0, 0.15);
}
.card-box .card-box-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding: 3px 0;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    text-decoration: none;
}
.card-box:hover .card-box-footer {
    background: rgba(0, 0, 0, 0.3);
}
.bg-blue {
    background-color: #00c0ef !important;
}
.bg-green {
    background-color: #00a65a !important;
}
.bg-orange {
    background-color: #f39c12 !important;
}
.bg-red {
    background-color: #d9534f !important;
}

/*Navbar*/

.topbar {
    height: 4.375rem
}

.topbar .nav-item .nav-link {
    height: 4.375rem;
    display: flex;
    align-items: center;
    padding: 0 .75rem
}

.topbar .nav-item .nav-link .badge-counter {
    position: absolute;
    transform: scale(.7);
    transform-origin: top right;
    right: .25rem;
    margin-top: -.25rem
}

.dropdown-toggle::after {
    content: none !important
}

.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .35rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.form-control:focus {
    box-shadow: none !important
}

.input-group-append button {
    box-shadow: none !important
}

.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .35rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.rounded-circle {
    width: 40px;
    height: 40px
}

.topbar .topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: calc(4.375rem - 2rem);
    margin: auto 1rem
}

.topbar .dropdown-list {
    width: 20rem !important
}

/* From home.min.css */

.scroll-to-top:focus,
.scroll-to-top:hover {
	color: #fff
}

.scroll-to-top:hover {
	background: #5a5c69
}

.scroll-to-top i {
	font-weight: 800
}

@-webkit-keyframes growIn {
	0% {
		transform: scale(.9);
		opacity: 0
	}
	100% {
		transform: scale(1);
		opacity: 1
	}
}

@keyframes growIn {
	0% {
		transform: scale(.9);
		opacity: 0
	}
	100% {
		transform: scale(1);
		opacity: 1
	}
}

.animated--grow-in {
	-webkit-animation-name: growIn;
	animation-name: growIn;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
	animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1)
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

.animated--fade-in {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-timing-function: opacity cubic-bezier(0, 1, .4, 1);
	animation-timing-function: opacity cubic-bezier(0, 1, .4, 1)
}

.bg-gradient-primary {
	background-color: #4e73df;
	background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
	background-size: cover
}

.bg-gradient-secondary {
	background-color: #858796;
	background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
	background-size: cover
}

.bg-gradient-success {
	background-color: #1cc88a;
	background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
	background-size: cover
}

.bg-gradient-info {
	background-color: #36b9cc;
	background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
	background-size: cover
}

.bg-gradient-warning {
	background-color: #f6c23e;
	background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
	background-size: cover
}

.bg-gradient-danger {
	background-color: #e74a3b;
	background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
	background-size: cover
}

.bg-gradient-light {
	background-color: #f8f9fc;
	background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
	background-size: cover
}

.bg-gradient-dark {
	background-color: #5a5c69;
	background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
	background-size: cover
}

.bg-gray-100 {
	background-color: #f8f9fc!important
}

.bg-gray-200 {
	background-color: #eaecf4!important
}

.bg-gray-300 {
	background-color: #dddfeb!important
}

.bg-gray-400 {
	background-color: #d1d3e2!important
}

.bg-gray-500 {
	background-color: #b7b9cc!important
}

.bg-gray-600 {
	background-color: #858796!important
}

.bg-gray-700 {
	background-color: #6e707e!important
}

.bg-gray-800 {
	background-color: #5a5c69!important
}

.bg-gray-900 {
	background-color: #3a3b45!important
}

.o-hidden {
	overflow: hidden!important
}

.text-xs {
	font-size: .7rem
}

.text-lg {
	font-size: 1.2rem
}

.text-gray-100 {
	color: #f8f9fc!important
}

.text-gray-200 {
	color: #eaecf4!important
}

.text-gray-300 {
	color: #dddfeb!important
}

.text-gray-400 {
	color: #d1d3e2!important
}

.text-gray-500 {
	color: #b7b9cc!important
}

.text-gray-600 {
	color: #858796!important
}

.text-gray-700 {
	color: #6e707e!important
}

.text-gray-800 {
	color: #5a5c69!important
}

.text-gray-900 {
	color: #3a3b45!important
}

.icon-circle {
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
}

.border-left-primary {
	border-left: .25rem solid #4e73df!important
}

.border-bottom-primary {
	border-bottom: .25rem solid #4e73df!important
}

.border-left-secondary {
	border-left: .25rem solid #858796!important
}

.border-bottom-secondary {
	border-bottom: .25rem solid #858796!important
}

.border-left-success {
	border-left: .25rem solid #1cc88a!important
}

.border-bottom-success {
	border-bottom: .25rem solid #1cc88a!important
}

.border-left-info {
	border-left: .25rem solid #36b9cc!important
}

.border-bottom-info {
	border-bottom: .25rem solid #36b9cc!important
}

.border-left-warning {
	border-left: .25rem solid #f6c23e!important
}

.border-bottom-warning {
	border-bottom: .25rem solid #f6c23e!important
}

.border-left-danger {
	border-left: .25rem solid #e74a3b!important
}

.border-bottom-danger {
	border-bottom: .25rem solid #e74a3b!important
}

.border-left-light {
	border-left: .25rem solid #f8f9fc!important
}

.border-bottom-light {
	border-bottom: .25rem solid #f8f9fc!important
}

.border-left-dark {
	border-left: .25rem solid #5a5c69!important
}

.border-bottom-dark {
	border-bottom: .25rem solid #5a5c69!important
}

.progress-sm {
	height: .5rem
}

.rotate-15 {
	transform: rotate(15deg)
}

.rotate-n-15 {
	transform: rotate(-15deg)
}

.dropdown .dropdown-menu {
	font-size: .85rem
}

.dropdown .dropdown-menu .dropdown-header {

	color: #b7b9cc
}

.dropdown.no-arrow .dropdown-toggle::after {
	display: none
}

.topbar .nav-item.dropdown .dropdown-toggle::after {
	width: 1rem;
	text-align: center;
	float: right;
	vertical-align: 0;
	border: 0;
	font-weight: 900;
	content: '\f105';
	font-family: 'Font Awesome 5 Free'
}

.topbar .nav-item.dropdown.show .dropdown-toggle::after {
	content: '\f107'
}

.topbar .nav-item .nav-link {
	position: relative
}

.topbar .nav-item .nav-link .badge-counter {
	position: absolute;
	transform: scale(.9);
	transform-origin: top right;
	right: .25rem;
	margin-top: -.25rem
}

.topbar .nav-item .nav-link .img-profile {
	height: 2rem;
	width: 2rem
}

.topbar {
	height: 4.375rem
}

.topbar #sidebarToggleTop {
	height: 2.5rem;
	width: 2.5rem
}

.topbar #sidebarToggleTop:hover {
	background-color: #eaecf4
}

.topbar #sidebarToggleTop:active {
	background-color: #dddfeb
}

.topbar .navbar-search {
	width: 25rem
}

.topbar .navbar-search input {
	font-size: .85rem;
	height: auto
}

.topbar .topbar-divider {
	width: 0;
	border-right: 1px solid #e3e6f0;
	height: calc(4.375rem - 2rem);
	margin: auto 1rem
}

.topbar .nav-item .nav-link {
	height: 4.375rem;
	display: flex;
	align-items: center;
	padding: 0 .75rem
}

.topbar .nav-item .nav-link:focus {
	outline: 0
}

.topbar .nav-item:focus {
	outline: 0
}

.topbar .dropdown {
	position: static
}

.topbar .dropdown .dropdown-menu {
	width: calc(100% - 1.5rem);
	right: .75rem
}

.topbar .dropdown-list {
	padding: 0;
	border: none;
}

.topbar .dropdown-list .dropdown-header {
	background-color: #4e73df;
	border: 1px solid #4e73df;
	padding-top: .75rem;
	padding-bottom: .75rem;
	color: #fff
}

.topbar .dropdown-list .dropdown-item {
	white-space: normal;
	padding: .5rem;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	line-height: 1.3rem
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image {
	position: relative;
	height: 2.5rem;
	width: 2.5rem
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image img {
	height: 2.5rem;
	width: 2.5rem;
	min-width: 2.5rem;
    min-height: 2.5rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image .status-indicator {
	background-color: #eaecf4;
	height: .75rem;
	width: .75rem;
	border-radius: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	border: .125rem solid #fff
}

.topbar .dropdown-list .dropdown-item .text-truncate {
	max-width: 10rem
}

.topbar .dropdown-list .dropdown-item:active {
	background-color: #eaecf4;
	color: #3a3b45
}

.noti-unread, .price-unread {
	background-color: #fff6e7 !important;
}

@media (min-width:576px) {
	.topbar .dropdown {
		position: relative
	}
	.topbar .dropdown .dropdown-menu {
		width: auto;
		right: 0
	}
	.topbar .dropdown-list {
		width: 20rem!important
	}
	.topbar .dropdown-list .dropdown-item .text-truncate {
		max-width: 13.375rem
	}
}


.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
	color: #b7b9cc
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
	color: #858796
}

.btn-circle {
	border-radius: 100%;
	height: 2.5rem;
	width: 2.5rem;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center
}

.btn-circle.btn-sm,
.btn-group-sm>.btn-circle.btn {
	height: 1.8rem;
	width: 1.8rem;
	font-size: .75rem
}

.btn-circle.btn-lg,
.btn-group-lg>.btn-circle.btn {
	height: 3.5rem;
	width: 3.5rem;
	font-size: 1.35rem
}

.btn-icon-split {
	padding: 0;
	overflow: hidden;
	display: inline-flex;
	align-items: stretch;
	justify-content: center
}

.btn-icon-split .icon {
	background: rgba(0, 0, 0, .15);
	display: inline-block;
	padding: .375rem .75rem
}

.btn-icon-split .text {
	display: inline-block;
	padding: .375rem .75rem
}

.btn-group-sm>.btn-icon-split.btn .icon,
.btn-icon-split.btn-sm .icon {
	padding: .25rem .5rem
}

.btn-group-sm>.btn-icon-split.btn .text,
.btn-icon-split.btn-sm .text {
	padding: .25rem .5rem
}

.btn-group-lg>.btn-icon-split.btn .icon,
.btn-icon-split.btn-lg .icon {
	padding: .5rem 1rem
}

.btn-group-lg>.btn-icon-split.btn .text,
.btn-icon-split.btn-lg .text {
	padding: .5rem 1rem
}

.card .card-header .dropdown {
	line-height: 1
}

.card .card-header .dropdown .dropdown-menu {
	line-height: 1.5
}

.card .card-header[data-toggle=collapse] {
	text-decoration: none;
	position: relative;
	padding: .75rem 3.25rem .75rem 1.25rem
}

.card .card-header[data-toggle=collapse]::after {
	position: absolute;
	right: 0;
	top: 0;
	padding-right: 1.725rem;
	line-height: 51px;
	font-weight: 900;
	content: '\f107';
	font-family: 'Font Awesome 5 Free';
}

.card .card-header[data-toggle=collapse].collapsed {
	border-radius: .35rem
}

.card .card-header[data-toggle=collapse].collapsed::after {
	content: '\f105'
}

.chart-area {
	position: relative;
	height: 10rem;
	width: 100%
}

@media (min-width:768px) {
	.chart-area {
		height: 20rem
	}
}

.chart-bar {
	position: relative;
	height: 10rem;
	width: 100%
}

@media (min-width:768px) {
	.chart-bar {
		height: 20rem
	}
}

.chart-pie {
	position: relative;
	height: 15rem;
	width: 100%
}

@media (min-width:768px) {
	.chart-pie {
		height: calc(20rem - 43px)!important
	}
}

.bg-login-image {
	background: url(https://source.unsplash.com/K4mSJ7kc0As/600x800);
	background-position: center;
	background-size: cover
}

.bg-register-image {
	background: url(https://source.unsplash.com/Mv9hjnEUHR4/600x800);
	background-position: center;
	background-size: cover
}

.bg-password-image {
	background: url(https://source.unsplash.com/oWTW-jNGl9I/600x800);
	background-position: center;
	background-size: cover
}

form.user .custom-checkbox.small label {
	line-height: 1.5rem
}

form.user .form-control-user {
	font-size: .8rem;
	border-radius: 10rem;
	padding: 1.5rem 1rem
}

form.user .btn-user {
	font-size: .8rem;
	border-radius: 10rem;
	padding: .75rem 1rem
}

.btn-google {
	color: #fff;
	background-color: #ea4335;
	border-color: #fff
}

.btn-google:hover {
	color: #fff;
	background-color: #e12717;
	border-color: #e6e6e6
}

.btn-google.focus,
.btn-google:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.btn-google.disabled,
.btn-google:disabled {
	color: #fff;
	background-color: #ea4335;
	border-color: #fff
}

.btn-google:not(:disabled):not(.disabled).active,
.btn-google:not(:disabled):not(.disabled):active,
.show>.btn-google.dropdown-toggle {
	color: #fff;
	background-color: #d62516;
	border-color: #dfdfdf
}

.btn-google:not(:disabled):not(.disabled).active:focus,
.btn-google:not(:disabled):not(.disabled):active:focus,
.show>.btn-google.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.btn-facebook {
	color: #fff;
	background-color: #3b5998;
	border-color: #fff
}

.btn-facebook:hover {
	color: #fff;
	background-color: #30497c;
	border-color: #e6e6e6
}

.btn-facebook.focus,
.btn-facebook:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.btn-facebook.disabled,
.btn-facebook:disabled {
	color: #fff;
	background-color: #3b5998;
	border-color: #fff
}

.btn-facebook:not(:disabled):not(.disabled).active,
.btn-facebook:not(:disabled):not(.disabled):active,
.show>.btn-facebook.dropdown-toggle {
	color: #fff;
	background-color: #2d4373;
	border-color: #dfdfdf
}

.btn-facebook:not(:disabled):not(.disabled).active:focus,
.btn-facebook:not(:disabled):not(.disabled):active:focus,
.show>.btn-facebook.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.error {
	color: #5a5c69;
	font-size: 7rem;
	position: relative;
	line-height: 1;
	width: 12.5rem
}

@-webkit-keyframes noise-anim {
	0% {
		clip: rect(32px, 9999px, 16px, 0)
	}
	5% {
		clip: rect(5px, 9999px, 24px, 0)
	}
	10% {
		clip: rect(77px, 9999px, 87px, 0)
	}
	15% {
		clip: rect(91px, 9999px, 95px, 0)
	}
	20% {
		clip: rect(74px, 9999px, 9px, 0)
	}
	25% {
		clip: rect(37px, 9999px, 32px, 0)
	}
	30% {
		clip: rect(56px, 9999px, 27px, 0)
	}
	35% {
		clip: rect(35px, 9999px, 33px, 0)
	}
	40% {
		clip: rect(89px, 9999px, 6px, 0)
	}
	45% {
		clip: rect(81px, 9999px, 77px, 0)
	}
	50% {
		clip: rect(64px, 9999px, 69px, 0)
	}
	55% {
		clip: rect(12px, 9999px, 11px, 0)
	}
	60% {
		clip: rect(59px, 9999px, 11px, 0)
	}
	65% {
		clip: rect(69px, 9999px, 59px, 0)
	}
	70% {
		clip: rect(74px, 9999px, 65px, 0)
	}
	75% {
		clip: rect(56px, 9999px, 79px, 0)
	}
	80% {
		clip: rect(80px, 9999px, 64px, 0)
	}
	85% {
		clip: rect(87px, 9999px, 29px, 0)
	}
	90% {
		clip: rect(16px, 9999px, 21px, 0)
	}
	95% {
		clip: rect(69px, 9999px, 43px, 0)
	}
	100% {
		clip: rect(75px, 9999px, 63px, 0)
	}
}

@keyframes noise-anim {
	0% {
		clip: rect(32px, 9999px, 16px, 0)
	}
	5% {
		clip: rect(5px, 9999px, 24px, 0)
	}
	10% {
		clip: rect(77px, 9999px, 87px, 0)
	}
	15% {
		clip: rect(91px, 9999px, 95px, 0)
	}
	20% {
		clip: rect(74px, 9999px, 9px, 0)
	}
	25% {
		clip: rect(37px, 9999px, 32px, 0)
	}
	30% {
		clip: rect(56px, 9999px, 27px, 0)
	}
	35% {
		clip: rect(35px, 9999px, 33px, 0)
	}
	40% {
		clip: rect(89px, 9999px, 6px, 0)
	}
	45% {
		clip: rect(81px, 9999px, 77px, 0)
	}
	50% {
		clip: rect(64px, 9999px, 69px, 0)
	}
	55% {
		clip: rect(12px, 9999px, 11px, 0)
	}
	60% {
		clip: rect(59px, 9999px, 11px, 0)
	}
	65% {
		clip: rect(69px, 9999px, 59px, 0)
	}
	70% {
		clip: rect(74px, 9999px, 65px, 0)
	}
	75% {
		clip: rect(56px, 9999px, 79px, 0)
	}
	80% {
		clip: rect(80px, 9999px, 64px, 0)
	}
	85% {
		clip: rect(87px, 9999px, 29px, 0)
	}
	90% {
		clip: rect(16px, 9999px, 21px, 0)
	}
	95% {
		clip: rect(69px, 9999px, 43px, 0)
	}
	100% {
		clip: rect(75px, 9999px, 63px, 0)
	}
}

.error:after {
	content: attr(data-text);
	position: absolute;
	left: 2px;
	text-shadow: -1px 0 #e74a3b;
	top: 0;
	color: #5a5c69;
	background: #f8f9fc;
	overflow: hidden;
	clip: rect(0, 900px, 0, 0);
	animation: noise-anim 2s infinite linear alternate-reverse
}

@-webkit-keyframes noise-anim-2 {
	0% {
		clip: rect(12px, 9999px, 52px, 0)
	}
	5% {
		clip: rect(42px, 9999px, 39px, 0)
	}
	10% {
		clip: rect(64px, 9999px, 36px, 0)
	}
	15% {
		clip: rect(52px, 9999px, 15px, 0)
	}
	20% {
		clip: rect(79px, 9999px, 7px, 0)
	}
	25% {
		clip: rect(17px, 9999px, 41px, 0)
	}
	30% {
		clip: rect(15px, 9999px, 20px, 0)
	}
	35% {
		clip: rect(62px, 9999px, 87px, 0)
	}
	40% {
		clip: rect(94px, 9999px, 11px, 0)
	}
	45% {
		clip: rect(49px, 9999px, 10px, 0)
	}
	50% {
		clip: rect(82px, 9999px, 4px, 0)
	}
	55% {
		clip: rect(70px, 9999px, 100px, 0)
	}
	60% {
		clip: rect(62px, 9999px, 23px, 0)
	}
	65% {
		clip: rect(51px, 9999px, 56px, 0)
	}
	70% {
		clip: rect(41px, 9999px, 24px, 0)
	}
	75% {
		clip: rect(6px, 9999px, 85px, 0)
	}
	80% {
		clip: rect(96px, 9999px, 58px, 0)
	}
	85% {
		clip: rect(16px, 9999px, 24px, 0)
	}
	90% {
		clip: rect(40px, 9999px, 31px, 0)
	}
	95% {
		clip: rect(91px, 9999px, 34px, 0)
	}
	100% {
		clip: rect(87px, 9999px, 26px, 0)
	}
}

@keyframes noise-anim-2 {
	0% {
		clip: rect(12px, 9999px, 52px, 0)
	}
	5% {
		clip: rect(42px, 9999px, 39px, 0)
	}
	10% {
		clip: rect(64px, 9999px, 36px, 0)
	}
	15% {
		clip: rect(52px, 9999px, 15px, 0)
	}
	20% {
		clip: rect(79px, 9999px, 7px, 0)
	}
	25% {
		clip: rect(17px, 9999px, 41px, 0)
	}
	30% {
		clip: rect(15px, 9999px, 20px, 0)
	}
	35% {
		clip: rect(62px, 9999px, 87px, 0)
	}
	40% {
		clip: rect(94px, 9999px, 11px, 0)
	}
	45% {
		clip: rect(49px, 9999px, 10px, 0)
	}
	50% {
		clip: rect(82px, 9999px, 4px, 0)
	}
	55% {
		clip: rect(70px, 9999px, 100px, 0)
	}
	60% {
		clip: rect(62px, 9999px, 23px, 0)
	}
	65% {
		clip: rect(51px, 9999px, 56px, 0)
	}
	70% {
		clip: rect(41px, 9999px, 24px, 0)
	}
	75% {
		clip: rect(6px, 9999px, 85px, 0)
	}
	80% {
		clip: rect(96px, 9999px, 58px, 0)
	}
	85% {
		clip: rect(16px, 9999px, 24px, 0)
	}
	90% {
		clip: rect(40px, 9999px, 31px, 0)
	}
	95% {
		clip: rect(91px, 9999px, 34px, 0)
	}
	100% {
		clip: rect(87px, 9999px, 26px, 0)
	}
}

.error:before {
	content: attr(data-text);
	position: absolute;
	left: -2px;
	text-shadow: 1px 0 #4e73df;
	top: 0;
	color: #5a5c69;
	background: #f8f9fc;
	overflow: hidden;
	clip: rect(0, 900px, 0, 0);
	animation: noise-anim-2 3s infinite linear alternate-reverse
}

footer.sticky-footer {
	padding: 2rem 0;
	flex-shrink: 0
}

footer.sticky-footer .copyright {
	line-height: 1;
	font-size: .8rem
}
/* modal messages */

.messaging{
	height: calc(100% - 69px);
}

.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}
.inbox_people {
  background: #f8f8f8 none repeat scroll 0 0;
  float: left;
  overflow: hidden;
  width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
	height: 100%;
  border: 1px solid #c4c4c4;
  clear: both;
  overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}


.recent_heading {float: left; width:40%;}
.srch_bar {
  display: inline-block;
  text-align: right;
  width: 60%;
}

.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}

.recent_heading h4 {
  color: #05728f;
  font-size: 21px;
  margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  padding: 0;
  color: #707070;
  font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}

.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
  float: left;
  width: 11%;
}
.chat_ib {
  float: left;
  padding: 0 0 0 15px;
  width: 88%;
}

.chat_people{ overflow:hidden; clear:both;}
.chat_list {
  border-bottom: 1px solid #c4c4c4;
  margin: 0;
  padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}

.active_chat{ background:#ebebeb;}

.incoming_msg_img {
  display: inline-block;
  width: 6%;
}
.received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  width: 92%;
 }
 .received_withd_msg p {
  background: #ebebeb none repeat scroll 0 0;
  border-radius: 3px;
  color: #646464;
  font-size: 14px;
  margin: 0;
  padding: 5px 10px 5px 12px;
  width: 100%;
}
.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 0 0 10px 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
	height: 100%;
  float: left;
  padding: 10px;
  width: 100%;
}

 .sent_msg p {
  background: #05728f none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 14px;
  margin: 0; color:#fff;
  padding: 5px 10px 5px 12px;
  width:100%;
}
.outgoing_msg{ overflow:hidden;}
.sent_msg {
  float: right;
  width: 46%;
}
.input_msg_write input {
	outline: none !important;
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #4c4c4c;
  font-size: 15px;
  min-height: 48px;
  width: 100%;
}
.input_msg_write{
	height: 100%;
}

.type_msg {
	border-top: 1px solid #c4c4c4;
    position: fixed;
    width: calc(100% - 20px);
    height: auto;
    bottom: 0;
    padding-bottom: 5px;
}

.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 0;
  float: right;
  bottom: 10px;
  width: 33px;
}

.msg_history {
  height: calc(100% - 60px);
  overflow-x: auto;
}
.modal_title{
   padding: 0px 0px 0px 10px;
}
.write_msg{
    border: 0px !important;
	padding-right: 40px !important;
	height: 100%;;
}

/* modal effects messages */

.modal.left .modal-dialog,
	.modal.right .modal-dialog {
		position: fixed;
		margin: auto;
		width: 320px;
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content,
	.modal.right .modal-content {
		height: 100%;
		overflow-y: auto;
	}

	.modal.left .modal-body,
	.modal.right .modal-body {
		padding: 15px 15px 80px;
	}

/*Left*/
	/* .modal.left.fade .modal-dialog{
		left: -320px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}

	.modal.left.fade.in .modal-dialog{
		left: 0;
	} */

/*Right*/
	.modal.right.fade .modal-dialog {
		right: -320px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}

	.modal.right.fade.in .modal-dialog {
		right: 0;
	}

	/* Notification */

.scrollable-menu{
	height: auto;
    max-height: 320px;
    overflow-x: hidden;
}
.header-group{
    position: fixed;

    flex-wrap: wrap;
    align-items: stretch;
    min-width: 500px;
}
.drop-border{
	border-radius: 0px !important;
}
.modal-head{
	display: flex !important;
}
.modal-message{
	width: 30% !important;
}

/* All Notifications */
.link-notif:hover{
	text-decoration: none;
}
.bgc:hover{
	background-color: #f5f5f5 !important;
}


/* Generate Documents
 */

.nav-pills-custom .nav-link {
    color: #aaa;
    background: #fff;
    position: relative;
}

.nav-pills-custom .nav-link.active {
    color: #45b649;
    background: #fff;
}


/* Add indicator arrow for the active tab */
@media (min-width: 992px) {
    .nav-pills-custom .nav-link::before {
        content: '';
        display: block;
        border-top: 8px solid transparent;
        border-left: 10px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        opacity: 0;
    }
}

.nav-pills-custom .nav-link.active::before {
    opacity: 1;
}

/* Form */
.sectionForm{
    margin-bottom: 0.2rem !important;
}
.row-form{
	margin-bottom: 0.1rem;
	display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
}
.mediaForm{
	margin-bottom: -10px;
}

/* Generate Table */

.create1{
	text-align: left;
	float: left;
	padding-left: 0px !important;
}
.create2{
	text-align: right;
	float: right;
	padding-right: 0px !important;
}

/* View-Document */


/* User cards */
.user-card {
	align-items: center;
	margin: 10px 0;
	min-height: 300px;
}

.user-card img {
	width: 80px;
    height: 80px;
    border-radius: 50%;
}

.user-card h6 {
	margin: 20px 0 0 0;
	color: #018c8e;
}

.user-card p {
	margin: 0;
	line-height: 1.2rem;
}

.user-card-icons a {
	font-size: 1.7rem;
	color: #018c8e;
}

.user-card-icons a:hover {
	text-decoration: none;
	color: #004e4f;
}

.user-card-validation {
	margin: 0;
	font-size: 0.7rem;
	color: red;
	text-align: center;
	/*position: absolute;*/
 /*   top: 2px;*/
 /*   left: 0;*/
 /*   right: 0;*/
}

.user-action-form {
	margin-bottom: 15px;;
}

.user-card-icons {
	margin-bottom: 10px;
}
