/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.trustdocs-icon{
	margin-left: -10px;
	width: 100%;
}
.badge svg{
	vertical-align: middle !important;
}
.SPLAddressListSt {
	width: 100%;
    cursor: pointer;
    border: 1px solid #b4b7bd;
    padding-left: 5px;
	background-color: #bfb9b9;
}
::-webkit-scrollbar {
	width: 12px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
	background: #fff;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
	background-color: #7367f0;    /* color of the scroll thumb */
	border-radius: 20px;       /* roundness of the scroll thumb */
	border: 3px solid #eef2fd;  /* creates padding around scroll thumb */
}

.modal-bxl{
	max-width: 990px;
}
.top-layer-modal{
	background-color: rgba(0,0,0,0.4);
}
.hm-table td, .hm-table th{
	padding: 0.4rem;
	border-color: #3b4253 !important;
}
.table.f-no-pad td:nth-child(1){
	padding: 7px 0 2px;
}
.table.f-all-no-pad td {
	padding: 7px 0 2px;
}
.border-dashed{
	border-style: dashed !important;
}
.font-small{
	font-size: 80% !important;
}
.pl-130{
	padding-left: 1.3rem !important;
}
.p-2p{
	padding: 2px !important;
}
.section-cards span:hover{
	text-decoration: underline;
	color: #7367f0;
}
.section-cards span{
	cursor: pointer;
}
.section-cards span.active{
	color: #7367f0;
}
.section-cards{
	position:sticky;
	top:100px;
}
.btn-sticky{
	position: sticky;
    top: 90px;
    z-index: 10;
}
#generate-invoice{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0.4);
	z-index: 9999;
}
.logo-image{
	width:100%;
}
.navbar-brand{
	width: 180px;
	margin-top: 0 !important;
}
.main-menu .navbar-header{
	padding: 0.5rem 1rem 0.5rem 2.1rem;
}
.card-height-400 {
	height: 400px;
	max-height: 400px;
}
.scroll-div {
	overflow:scroll;
	max-height:330px;
	overflow-x: hidden;
	padding-right: 2px;
}
.notfication-row{
	padding: 10px 5px;
	border-radius: 5px;
}
.notfication-row:hover {
	background-color: rgba(115, 103, 240, 0.2);
	cursor: pointer;
}

.postcodeFinderSearchArea{
	position: absolute;
    z-index: 5;
    top: 5px;
	border-radius: 5px;
	width: 90%;
	background-color: #bfb9b9;
	color: #000;
	padding-left: 10px;
}

.fade-in{
	animation: fadeIn 0.5s linear;
}
.fade-out{
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 500ms, opacity 500ms linear;
}

@-webkit-keyframes fadeIn {
	0% {
	  opacity: 0;
	}
	75% {
	  opacity: 0.5;
	}
	100% {
	  opacity: 1; 
	} 
}
@-webkit-keyframes fadeOut {
	0% {
	  opacity: 0;
	}
	75% {
	  opacity: 0.5;
	}
	100% {
	  opacity: 0; 
	} 
}

.flatpickr-calendar.open{
	z-index: 2000 !important;
}

.row-red-bg {
	background-color: #fc7979;
	color: white;
}