a { color: #507fb3; }
body { font-size: 15px;}
.nav_bar_custom { background-color: #507fb3; height: 75px; }
.div_purchase { padding: 5px 15px; background-color: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .125); border-radius: 5px; text-align: center; }
.job_ads_table { margin-top: 5px;border: 1px solid rgba(0, 0, 0, .125); font-size: 12px; }
.div_jobad_info { max-width: 600px; text-align: left;border: 1px solid #d3d3d3;margin: 20px 0;padding: 30px 25px 25px;background: #FFFFFF;box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.30);border-radius: 10px;}
.question { margin-bottom: 0; font-size: 11px; }
.answer { background: #efefef; padding: 5px; font-size: 11px; }
.badge { font-size: 75%; font-weight: 500; }
.fa_custom { color: #666666; padding: 3px; }
.instructions { padding: 25px 0 0; margin: 0 0 25px;border-bottom: 3px solid rgba(0, 0, 0, .125); }
.questions_box { padding-left: 15px; }
.div_signup { padding: 25px; background-color: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .125); border-radius: 5px; color: #4b4e55; font-size: 14px; }
.box_rcorner_dropshadow {
	text-align: left;
	border: 1px solid #d3d3d3;
	margin: 20px 0;
	padding: 30px 25px 25px;
	background: #FFFFFF;
	box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.30);
	border-radius: 10px;
	font-size: 12px;
}
.videoWrapper {
	position: relative;
	padding-bottom: 50%;
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
h1, h2, h3, h4, h5 { font-weight: 700; }
.button_green { color: #ffffff; background-color: #99C221; border-color: #99C221; min-width: 200px; padding: 10px 10px; }
.button_green:hover { color: #ffffff; background-color: #82a814; border-color: #82a814; }
.button_blue { color: #ffffff; background-color: #507FB3; border-color: #507FB3; padding: 10px 10px; }
.button_blue:hover { color: #ffffff; background-color: #4270a4; border-color: #4270a4; }
.button_blue_outline { color: #507FB3; background-color: #ffffff; border-color: #507FB3; padding: 10px 10px; }
.button_blue_outline:hover { color: #4270a4; background-color: #edf2f7; border-color: #4270a4; }
.jobad_banner { border-top: 5px solid #FAAF3A;border-bottom: 5px solid #FAAF3A;padding: 25px 15px 20px; text-align: center; margin: 0 auto 25px; }
.selected-date:hover {
	cursor: pointer;
	color: #507fb3;
}
.jobad_status {
	font-size: 75%;
	font-weight: 500;
	padding: 2px 7px;
	border-radius: 10rem;
	color: #ffffff;
}
.jobad_status_client_started {
	background-color: #fff0a3;
	color: #555;
}
.jobad_status_client_draft {
	background-color: #d8e3ff;
	color: #555;
}
.jobad_status_client_submit {
	background-color: #ffc6c6;
	color: #555;
}
.jobad_status_writer_draft {
	background-color: #ff6c0a;
}
.jobad_status_writer_submit {
	background-color: #a500a7;
}
.jobad_status_approved {
	background-color: #0027a7;
}
.jobad_status_complete {
	background-color: #00a73b;
}

/* Have everything use our global ApplicantPro font */
body {
	background-color: #F9F9F9;
	font-family: SourceSansPro-AP, 'Source Sans Pro', 'Trebuchet MS', sans-serif;
}

/* A little extra spacing at the bottom of the table before the pagination */
.job_ads_table {
	margin-bottom: 20px;
}

/*
	Basic table stuff, fixes some of the border issues so they're now a consistent 1px everywhere
  Adds a small box-shadow that's not even noticeable really, and sets the font size
*/
.table {
	font-size: 11px;
	box-shadow: 0 0 12px -10px black;
	margin-bottom: 0;
}

/* Make the table headers look like nice small bold headers */
.table thead th {
	color         : #333333;
	border        : none;
	font-size     : 10px;
	line-height   : 10px;
	text-transform: uppercase;
	white-space   : pre;
	text-align    : center;
	font-weight   : 500;
	padding       : 0.75rem;
	padding-top   : 0.8rem;
}

/* Make the table header have a nice background color and smaller height than the rows */
.table thead tr {
	height: 30px;
	background-color: #F5F6FB;
}

/* Adjust the padding, and center things vertically for every table cell */
.table td {
	padding: .25rem;
	vertical-align: middle;
}

/* Have the statuses centered and adjust the font size to be a bit bigger than bootstrap has them */
.table td.status        { text-align: center; }
.table td.status .badge { font-size: 85%; }

/* Sub-Text class to have a little smaller lighter text below the more important information */
.table .sub-text {
	color: #777777;
	font-size: 10px;
}

.table input.form-control-sm {
	height: 25px;
	font-size: 11px;
	line-height: 1;
	width: 140px;
	border-radius: .2rem;
}

/* Make it so the custom selects aren't too tall */
.table .custom-select {
	height: auto;
}

/* Position and size the custom check-boxes */
.custom-control-label::before, 
.custom-control-label::after {
	top   : -0.2rem;
	left  : -1.1rem;
	width : 0.75rem;
	height: 0.75rem;
}

/* Adjust the background color for the custom check-box when it's checked */
.table .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #507fb3;
}

.return-customer {
	background-color: #507FB3;
	color: white;
	border-radius: 50%;
	width: 22px;
	font-size: 9px;
	height: 22px;
	margin: 0 auto;
	text-align: center;
	line-height: 22px;
}

.jobads-filters {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
	min-width: 975px;
}

@media only screen and (max-width: 1600px) {
	.jobads-filters {
		justify-content: flex-start;
	}
}

.jobads-filters label {
	display: block;
	margin-bottom: 0px;
	font-size: 8px;
}

.jobads-filters select {
	font-size: 9px;
	height: 30px;
	padding: 2px 5px;
	width: 110px;
	font-size: 11px;
}

.jobads-filters .date-range {
	width: 130px;
	font-size: 12px;
	display: inline-block;
	height: 28px;
}

.filter-element {
	margin-left: 10px;
}

.filter-element button {
	font-size: 9px;
}

.filter-element input {
	padding: 4px 5px;
	color: #444444;
	font-size: 12px;
	border-color: rgb(170, 170, 170);
}

.input-with-icon {
	padding: 4px 5px 3px 5px; /* The bottom needs 1px less because it looks goofy */
	background-color: white;
	border: 1px solid rgb(170, 170, 170);
	border-radius: 4px;
	display: flex;
}

.input-with-icon i {
	flex: 0 0 auto;
	color: #AAAAAA;
}

.input-with-icon:focus-within {
	/* outline: 2px solid #bbdafb; */
	box-shadow: 0 0 3pt 2pt #bbdafb;
}

.input-with-icon input {
	border: none;
	padding: 0;
	flex: 1 1 auto;
	width: 100%;
}

.input-with-icon input:focus {
	outline-width: 0;
}

@media only screen and (max-width: 1500px){
	.jobads-filters select {
		width: 70px;
	}
}

.row-no-margins {
	display: flex;
	flex-wrap: wrap;
}

.btn.clear {
	background-color: transparent;
}

.btn.clear:focus {
	box-shadow: none;
}

.content_alert {
	position: fixed;
	top: 10px;
	z-index: 10000;
	height: 50px;
	width: 300px;
	left: 50%;
	margin-left: -150px;
}

.content_alert .alert {
	text-align:center;
	margin: 0 auto;
}
.table tr:hover td { background-color: #FFFDCC; }

/* Place the navbar at the bottom of the page, and make it stick */
.bar_bottom {
	background-color: #dadada;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: right;
	padding: 15px;
	display: flex;
	justify-content: space-between;
}
/* Style the links inside the navigation bar */
.bar_bottom a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}
/* Change the color of links on hover */
.bar_bottom a:hover {
	background-color: #ddd;
	color: black;
}

/* Add a color to the active/current link */
.bar_bottom a.active {
	background-color: #4CAF50;
	color: white;
}

.select2-selection__rendered {
	font-size: 11px;
}

.select2-container--open .select2-dropdown--below {
	width: 300px !important;
}

.full-height-flex-center {
	height: 100%;
	display: flex;
	align-items: center;
}

/* .dropdown {
  position: relative;
} */

.large-help{
	font-size:13px;
	color:#007bff;
}

.large-text{
	font-size:13px;
}

.dropdown-content {
  display: none;
	position: absolute;
	top: 100%;
	left: 0px;
  background-color: #507fb3;
  min-width: 160px;
  box-shadow: 2px 2px 7px -3px rgba(0,0,0,0.2);
  /* margin: 5px 10px; */
	z-index: 100;
}

.nav-item:hover {
	background-color: #466E9B;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown .dropdown-content .dropdown-link {
	padding: 10px 15px;
}

.history-button{
	padding:5px 10px !important;
	margin-right:5px;
}

.history-button:hover{
	color: #ffffff !important;
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
}


.comment-border{
	border:1px solid #E1D8CF;
	padding:5px;
	padding-top:15px;
	margin-bottom:10px;
}
.hidecomment{
	display:none;
}

.center-align{
	margin: 0 auto;
}

.urgent-flag,.new-user{
	font-size: 18px;
}

.urgent{
	color:#cc0000;
}

.non-urgent{
	color:#e1e1e1;
}

.multiple-writers{
	width:180px !important;
}

.select2-selection--multiple{
	padding-bottom: 0px !important;
	min-height:28px !important;
}



.select2-container .select2-search--inline .select2-search__field{
	margin-top: 0px !important;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f2f2f2 !important;
    border: 1px solid #d7d7d7 !important;
    border-radius: 3px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #f2f2f2 !important;
}


.hideversion{
	display:none;
}

.show0{
	display:none;
}

.jobads-filters-position {
	justify-content: flex-start;
}

.deleted-comment{
	background: #FBC6C2;
}

.badge-purple {
	color: #FFFFFF;
	background-color: #9f4cde;
  }

  .badge-pink {
	color: #FFFFFF;
	background-color: #ff00d0;
  }