/* General */
.jbloading { width: 48px; height: 16px; background:url(../images/loading.gif) center center no-repeat #fff; }

.jbf-image { position: relative; width:  100%; height: 150px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.jbf-image.big { height: 400px; }

#location_info select:nth-child(n+2) { margin-left: 10px; }
#location_info .form-select { width: auto; display: inline; }

.jbbox-gradient { background: #fdfdfd url('../images/gradient.png') repeat-x top; }

.jb-hidefield { position: absolute; left: -9999px; }

.jbf-bg-primary { background-color: #09a5d5  !important;}

.bid_project_left { box-shadow: 0 8px 6px -6px grey; font-size: 12px; font-family: Arial,Helvetica,sans-serif; width: auto; border: 1px solid #ccc; text-align: center; padding: 5px 20px; font-weight: bold; border-radius: 3px; }
/* General End */
.tm-main {margin:20px 10%;padding:25px;border:1px solid #f85c31; }
/* bootstrap override */

label.control-label { font-weight: bold; }
label.control-label.nopadding { padding-top: 0px; cursor: auto; }

/* template override */
body.modal-open .modal .modal-body iframe { width: 100%; }
nav.navbar-expand-lg {	padding-top: 0.5rem; padding-bottom: 0.5rem; }

.pagination{ flex-wrap: wrap!important; } 
.page-item{ margin-top:0.5em; }
 
.controls .form-control, .controls .form-select {	max-width: 480px; }
.w-1 { width: 1%; }
.w-3 { width: 3%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-10 { width: 10%; }
.w-12 { width: 12%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-80 { width: 80%; }

/* page actions */
.page-actions { margin-bottom: 15px; display: block; text-align: right;}
.page-action { display: inline; margin-left: 5px; }
.page-action a { margin: 0; outline: none; color: inherit !important; font-size: 90%; }

/* Rating */
.rating_bar { width: 75px; background: url('../images/star_x_grey.png') 0 0 repeat-x; display: inline-block; vertical-align: top; }
.rating_bar span { height: 16px; background: url('../images/star_x_orange.png') 0 0 repeat-x; display: inline-block; }

/* status */
.online-status { border-radius: 5px; width: 10px; height: 10px; margin: 0 5px 0 0; display: inline-block!important; }
.online-status.online { background: #77be56 !important; }
.online-status.offline {background: #aaaaaa !important; }

/* image hover effect for category module */
.jbf-hovereffect { width:100%;height:100%; float:left; overflow:hidden; position:relative; text-align:center; cursor:default; }
.jbf-hovereffect .overlay { width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; opacity:0; background-color:rgba(0,0,0,0.5); -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out }
.jbf-hovereffect img { display:block; position:relative; -webkit-transition:all .4s linear; transition:all .4s linear; }
.jbf-hovereffect h2 { margin-top: 0px; text-transform:uppercase; color:#fff; text-align:center; position:relative; font-size:13px; background:rgba(0,0,0,0.6); -webkit-transform:translatey(-100px); -ms-transform:translatey(-100px); transform:translatey(-100px); -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; padding:10px; }
.jbf-hovereffect:hover img { -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2); }
.jbf-hovereffect:hover .overlay { opacity:1; filter:alpha(opacity=100); }
.jbf-hovereffect:hover h2,.jbf-hovereffect:hover a.info { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); }
@media screen and (max-width: 576px) {
	.jbf-hovereffect .overlay { opacity:1; }
	.jbf-hovereffect h2 { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); }
}

/* fieldset override */
fieldset.jbf-fieldset {
	margin-bottom: 1.5rem;
    padding-top: 2.5rem;
    position: relative;
}

fieldset.jbf-fieldset::before {
	background-color: #e9ecef;
	content: "";
	height: 3px;
	position: absolute;
	left: 0;
	top: 8px;
	width: 100%;
}

fieldset.jbf-fieldset legend {
    background-color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-right: 6px;
    position: absolute;
    top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: auto;
    z-index: 20;
}

/* pricing */
.pricing .card { border: none; border-radius: 1rem; transition: all 0.2s; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); }
.pricing hr { margin: 1.5rem 0; }
.pricing .card-title { margin: 0.5rem 0; font-size: 0.9rem; letter-spacing: .1rem; font-weight: bold; }
.pricing .card-price { font-size: 3rem; margin: 0; }
.pricing .card-price .period { font-size: 0.8rem; }
.pricing ul li { margin-bottom: 1rem; }
.pricing .text-muted { opacity: 0.7; }
.pricing .btn { font-size: 80%; border-radius: 0.5rem; letter-spacing: .06rem; font-weight: bold; padding: 0.5rem; opacity: 0.7; transition: all 0.2s; }
/* Hover Effects on Card */
@media ( min-width : 992px) {
	.pricing .card:hover { 	margin-top: -.25rem; 	margin-bottom: .25rem; 	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); } 
	.pricing .card:hover .btn { 	opacity: 1; }
}

/* Project upgrades */
.upgrades {	list-style: none; margin: 0; padding: 0; margin-bottom: 30px; }
.upgrades li { border: 1px solid #CCC; background: #FFF; border-radius: 4px; cursor: pointer; margin-bottom: 8px; position: relative; }
.upgrades li:hover { transition: all .2s ease; border-color: #999; background: #ebf7ff; }
.upgrades li .pad { padding: 15px; }
.upgrades li input { margin-right: 15px; margin-top: 14px; }
.upgrades li p { margin: 10px; width: 75%; margin-bottom: 0; }
.upgrades li input, .upgrades li p, .upgrades li span.upgrade { float: left; }
.upgrades li span.price { float: right; width: 100px; text-align: right; font-weight: bold; font-size: 16px; line-height: 36px; }

span.featured { background: url(../images/featured.png) no-repeat; width: 32px; height: 32px; display: inline-block; background-position: right; }
span.urgent { background: url(../images/urgent.png) no-repeat; width: 32px; height: 32px; display: inline-block; background-position: right; }
span.private { background: url(../images/private.png) no-repeat; width: 32px; height: 32px; display: inline-block; background-position: right; }
span.sealed { background: url(../images/sealed.png) no-repeat; width: 32px; height: 32px; display: inline-block; background-position: right; }
span.nda { background: url(../images/nda.png) no-repeat; width: 32px; height: 32px; display: inline-block; background-position: right; }
span.invite { background: url(../images/invite.png) no-repeat; width: 32px; height: 32px; display: inline-block; background-position: right; }

ul.promotions { font-size: 0; padding: 0; margin: 0; }
.promotions.big li {font-size: 15px; font-weight:bold; height: 20px; line-height: 20px; padding: 0 12px 0;}
.promotions.big li:last-child:after { border-width: 12px 6px 9px 0; }
.promotions li { box-sizing: border-box; position: relative; display: inline-block; height: 15px; padding: 0 9px 0; color: #fff; font-size: 10px; text-transform: uppercase; line-height: 15px; }
.promotions li:first-child:before { position: absolute; bottom: -7px; left: 0; content: ""; width: 0; height: 0; border-top: 6px solid; border-left: 6px solid transparent; }
.promotions li:last-child:after { position: absolute; bottom: 0; right: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 3px 7px 0; border-color: transparent #fff transparent transparent; }

.promotions li[data-promotion='featured'] { background: #fc5400; box-shadow: 0 1px 0 #632100; }
.promotions [data-promotion='urgent'] { background: #be0b04; box-shadow: 0 1px 0 #16404c; }
.promotions [data-promotion='private'] { background: #f7ae0e; box-shadow: 0 1px 0 #694903; }
.promotions [data-promotion='sealed'] { background: #008bcb; box-shadow: 0 1px 0 #002232; }
.promotions [data-promotion='nda'] { background: #734dd4; box-shadow: 0 1px 0 #321a6e; }
.promotions [data-promotion='featured']:first-child:before { border-top-color: #fc5400!important; }
.promotions [data-promotion='urgent']:first-child:before { border-top-color: #be0b04; }
.promotions [data-promotion='private']:first-child:before { border-top-color: #f7ae0e; }
.promotions [data-promotion='sealed']:first-child:before { border-top-color: #008bcb; }
.promotions [data-promotion='nda']:first-child:before { border-top-color: #734dd4; }

/* Forum */
ul#commentList  { padding: 0px; }
#commentList { list-style:none; }
#commentList li { padding:1px; border-bottom: 1px dotted #CCC; }
#commentList li:hover { background:#EEE; }

/* dropzone */
div.table { display: table; }
div.table .file-row { display: table-row; }
div.table .file-row>div { display: table-cell; vertical-align: top; border-top: 1px solid #ddd; padding: 8px; }
/* div.table .file-row:nth-child(odd) { background: #f9f9f9; } */
#total-progress { opacity: 0; transition: opacity 0.3s linear; }	/* The total progress gets shown by event listeners */
#previews .file-row.dz-success .progress { opacity: 0; transition: opacity 0.3s linear; }	/* Hide the progress bar when finished */
#previews .file-row .delete { display: none; }	/* Hide the delete button initially */
#previews .file-row.dz-success .start,#previews .file-row.dz-success .cancel { display: none; }	/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-success .delete { display: block; }
.upload-dropzone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 100px; text-align: center; height: 100px; border-width: 2px; margin-bottom: 20px; }
.upload-dropzone.dz-drag-hover { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.04); }

[id*="-total-progress"] { opacity: 0; transition: opacity 0.3s linear; }	/* The total progress gets shown by event listeners */
[id*="-previews"] .file-row.dz-success .progress { opacity: 0; transition: opacity 0.3s linear; }	/* Hide the progress bar when finished */
[id*="-previews"] .file-row .delete { display: none; }	/* Hide the delete button initially */
[id*="-previews"] .file-row.dz-success .start,[id*="-previews"] .file-row.dz-success .cancel { display: none; }	/* Hide the start and cancel buttons and show the delete button */
[id*="-previews"] .file-row.dz-success .delete { display: block; }

@media screen and (max-width: 576px) {
	div.table .file-row > div {
	    display: inline-flex;
	    border: none;
	}
}

/* service */
.service-seller-pic  {
	width: 64px;
	height: 64px;
	border: 6px solid #eee;
	position: relative;
	left: 20px;
	margin-top: -42px;
	margin-bottom: 15px;
	z-index: 1;
	float: left;
	background-color: #aaa;
}
.service-seller-details {
	float: left;
	margin-top: -20px;
	margin-left: 34px;
}

/* chat */
.jb-chat { list-style: none; margin: 0; padding: 0; }
.jb-chat li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9; }
.jb-chat li.left .jb-chat-body { margin-left: 64px; margin-right: 10px; }
.jb-chat li.right .jb-chat-body { margin-right: 64px; }
.jb-chat li .jb-chat-body p { margin: 0; color: #777777; }
.jb-chat-panel { overflow-y: scroll; max-height: 600px; margin-bottom:10px; }

/* autocomplete */
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

/* image crop */
.cropit-image-view {
	display: block;
    margin: 5% auto 5%;
    width: 320px;
}
.cropit-preview {
	background-color: #f8f8f8;
	background-size: cover;
	border: 3px solid #fff;
	border-radius: 3px;
	margin-top: 7px;
	width: 320px;
	height: 320px;
	cursor: move;
	box-shadow: 0 0 5px rgba(0,0,0,.15);
}
div.btns button {
	display: block;
	margin-top: 10px;
	width: 140px;
}

div.btns.horizontal button {
	display: inline;
	margin-top: 10px;
	width: 140px;
}
.cropit-image-background {
	opacity: .2;
	cursor: auto;
}

.cropit-image-zoom-input[disabled] {
  opacity: .2;
}

.cropit-preview.cropit-image-loading .spinner {
  opacity: 1;
}

img.cropit-preview-image {
    max-width: none;
}

input.cropit-image-input {
  display: none;
}

.cropit-image-zoom-input.custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 5px;
    background: #eee;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    outline: none;
}

.slider-wrapper {
    margin-top: 20px;
    text-align: center;
}

.slider-wrapper .cropit-image-zoom-input {
    width: 130px;
    margin: 0 20px;
    position: relative;
}

/* Responsive tricks */
@media screen and (max-width: 576px) {
	#no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; }
	#no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px;	}
	#no-more-tables tr { border: 1px solid #ccc; }
	#no-more-tables tfoot td { padding-left: 0; }
	#no-more-tables td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 5%; white-space: normal; text-align:left; }
	#no-more-tables td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; }
	#no-more-tables td:before { content: attr(data-title); }
}
/* Responsive Ends */

/* Menu */
.notify-menu { background-color: white; overflow: visible; position: absolute; top: 40px; width: 330px; z-index: 10; border: 1px solid #e3e3e3; background: rgba(255, 255, 255, 0.98); box-shadow: 0 5px 8px 0 rgba(160, 166, 168, 0.35); border-radius: 3px; background-clip: padding-box; padding: 5px; }
span.notify-count { background-color: #EA0000; position: relative; right: 5px; top: -12px; height: 14px; min-width: 10px; font: 700 10px/14px Arial; color: white; text-align: center; padding: 0 2px; border-bottom: 1px solid #111; display: inline-block; border-radius: 3px; }