/* Custom styles */

#snackbar{
	display:none;
	padding: 10px;
    color: #fff;
}
#snackbar.danger-snack {
    background: #e92563;
}

#snackbar.success-snack{
	background: #4ce288;
}
a.navbar-brand img {
    padding-top: 0px;
    margin-top: -13px;
    height: 46px;
    width: 144px;
}

.mssgBox {
    display: none;
}

.bootstrap-select .bs-searchbox{
	margin-left: 33px !important;
}

.bootstrap-select .dropdown-menu.inner{
	margin-left: 30px !important;
}

.user-image-box {
	text-align: center;
	padding: 10px;
	border: 1px solid #ddd;
	box-shadow: 0px 1px 5px 3px #ddd;
	border-radius: 10px;
}
.user-image-box .image {
    margin-bottom: 10px;
}

.user-image-box img {
    border-radius: 50%;
}
.profile-info-box {
    box-shadow: 0px 1px 5px 4px #ddd;
    padding: 10px;
    border-radius: 10px;
}
.profile-info-box p {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.user-info-dt {
    display: flex;
}
.user-img {
    margin-right: 10px;
}
.user-img img {
    border-radius: 50%;
}
.user-data p {
    margin-bottom: 0px;
}
.user-data .btn {
    padding: 0px 4px !important;
}
.vendor_step_wizzard {
    display: flex;
}
.step_wizzard {
    list-style: none;
    padding-left: 0px;
    display: flex;
    justify-content: center;
    flex: 1;
	flex-direction: row;
}
.step_wizzard li {
    margin: 5px 4px;
    display: flex;
}
.step_wizzard li a.vsteps {
    background: #ae1956;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
}
.step_wizzard li a.vsteps.active {
    background: #ee6c02;
    box-shadow: 1px 1px 5px 4px #d2d1d1;
}

.branch-office-box , .owner-box, .manager-box{
    border: 1px solid #ddd;
    padding: 20px 15px;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.branch-office-box h4, .owner-box h4, .manager-box h4 {
    margin-top: -35px;
    line-height: 30px;
    background: #ffff;
    padding: 0px;
    display: inline-block;
    position: absolute;
}
.removeBO, .removeOD, .removeMng {
    float: right;
    color: #fff;
    background: red;
    padding: 3px 1px 1px;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 5px 3px #b9b9b9;
}

.errorBox{
	border: 1px solid red;
}

.vendor_info_box {
    box-shadow: 1px 1px 2px 2px #ddd;
    border-radius: 6px;
    padding-bottom: 10px;
}
h4.s-title {
    background: #ae1956;
    color: #fff;
    padding: 6px 15px;
}
.vinfo-wrapper {
    margin: 20px 20px 10px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 6px;
}
.vinfo-title {
    background: #fff;
    margin-top: -18px;
    position: absolute;
    font-weight: bold;
}
.vinfo-content {
    margin-top: 10px;
    background: #e9e9e9;
    padding: 2px 10px;
}

/* CSS for Extra Large (xl) screen */
@media only screen and (max-width: 1920px) {
	/* Write your code here */
	
}

/* CSS for Extra Large (xl) screen */
@media only screen and (max-width: 1680px) {
	/* Write your code here */
	
}

/* CSS for Extra Large (xl) screen */
@media only screen and (max-width: 1600px) {
	/* Write your code here */
	
}
/* CSS for Extra Large (xl) screen */
@media only screen and (max-width: 1440px) {
	/* Write your code here */
	
}

/* CSS for Extra Large (xl) screen */
@media only screen and (max-width: 1366px) {
	/* Write your code here */
	
}

/* CSS for Large (lg) screen */
@media only screen and (max-width: 1280px) {
	/* Write your code here */
}

/* CSS for Large (lg) screen */
@media only screen and (max-width: 1152px) {
	/* Write your code here */
	
}

/* CSS for Large (lg) screen */
@media only screen and (max-width: 1024px) {
	/* Write your code here */
	
}

/* CSS for Large (lg) screen */
@media only screen and (max-width: 992px) {
	/* Write your code here */
	
}

/* CSS for Medium (md) screen */
@media only screen and (max-width: 800px) {
	/* Write your code here */
	
}

/* CSS for Medium (md) screen */
@media only screen and (max-width: 768px) {
	
}

/* CSS for Medium (md) screen */
@media only screen and (max-width: 600px) {
	/* Write your code here */

}

/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 414px) {
	/* Write your code here */
	.step_wizzard {
		flex-direction: column;
	}
}

/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 394px) {
	/* Write your code here */
	
}

/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 375px) {
	/* Write your code here */
	
}

/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 360px) {
	/* Write your code here */
	
}

/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 320px) {
	/* Write your code here */
	
}

/* CSS for Extra Small (md) & Landscap screen */
@media only screen and (max-width: 823px) and (min-width:801px) {
	/* Write your code here */
	
}

/* CSS for Small (sm) & Landscap screen */
@media only screen and (max-width: 667px) and (min-width:601px) {
	/* Write your code here */
	
}

/* CSS for Small (sm) & Landscap Mobile screen */
@media only screen and (max-width: 568px) and (min-width:501px){
	/* Write your code here */
	
}