.jobcard-update {
	text-align: center;
	margin-top: 20px;
}

.jobcard-update a {
	margin-right: 10px;
	margin-left: 10px;
	font-size: 13px;
	font-weight: bold;
	color: #761c1c;
	transition: all 0.5s ease;
	text-transform: uppercase;
}








/* Jobcard section Header style - Table title and Create % Update link */

.jobcard-section-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.jobcard-section-header h1 {
	color: #a6a6a6;
	font-size: 18px;
}

.jobcard-section-header a > i {
	text-decoration: underline;
}

.jobcard-section-header a > i:hover {
	text-decoration: none;
}








/* JOBCARD SEARCH INCLUDES STYLES */

.jobcard-search-form {
	background: rgb(67 71 80 / 80%);
	padding: 5px;
	margin-bottom: 30px;
	border-radius: 2px;
}

.jobcard-search-links {
	margin-bottom: 15px; 
	display: flex; 
	justify-content: space-between;
}

.create-jobcard {
	font-size: 15px; 
	color: #0c7955; 
	display: inline-flex; 
	align-items: center;
	border: 1px solid #0c7955;
	border-radius: 25px;
	padding: 0 10px;
	text-decoration: none;
	transition: all 0.5s ease;
}

.create-jobcard:hover {
	color: #44c751;
	border: 1px solid #44c751;
}

.create-jobcard img {
	margin-right: 10px;
	filter: brightness(0) saturate(100%) invert(39%) sepia(16%) saturate(2453%) hue-rotate(112deg) brightness(86%) contrast(91%);
}


.jobcard-search-form-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
}


/* Re-Design */
.jobcard-search-container {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 5px;
}



/* ---------------------------- */
/* Jobcard Search Submit Button */
/* ---------------------------- */

.jobcard-submit-wrapper {
	text-align: center; 
	margin-top: 10px;
}

.jobcard-search-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #56cc89;
	border: none;
	padding: 5px 30px;
	font-size: 15px;
	color: #fff;
	border-radius: 15px;
}



.jobcard-search-submit:hover {
	color: #dedede;
}

.jobcard-search-submit img {
	margin-left: 8px;
	width: 18px;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(247deg) brightness(103%) contrast(102%);
}



/* Re-Design */
.jobcard-search-submit-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #56cc89;
	border: none;
	padding: 5px 30px;
	font-size: 15px;
	color: #fff;
	transition: all 0.5s ease;
}

.jobcard-search-submit-button:hover {
	background: #40ab45;
}

.jobcard-search-submit-button img {
	margin-left: 8px;
	width: 18px;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(247deg) brightness(103%) contrast(102%);
}



/* //////////////////////////////// */
/*       JOBCARD TABLE STYLE        */
/* -------------------------------- */

.jobcard__header {
    padding: 6px;
    text-align: center;
    font-size: 15px;
    color: #3f3f3f;
}

.jobcard__header_issue,
.jobcard__header_return {
	padding: 6px;
    text-align: center;
    font-size: 15px;
    color: #3f3f3f;
}

.jobcard__header_issue {
	background: #fcf7c6;
}

.jobcard__header_return {
	background: #e8e8ad;
}



.jobcard-table {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}

.cth, 
.ctd {
	border-top: none;
  	border-left: none;
  	border-right: 1px solid #939393;
  	border-bottom: none;
}

.cth:last-child,
.ctd:last-child {
	border-right: none;
}


.jobcard__th {
	padding: 8px;
    font-size: 15px;

    text-align: left;
    color: #635f5f;

	vertical-align: middle;
}

.cth {
	background: rgb(111 125 126);
    text-align: left;
    color: #e5e4e4;
    font-family: "Biotif Regular";
	width: calc(100% / 7);
}


.ctr:nth-child(odd) {
	background-color: #fff; 
}

.ctr:nth-child(even) {
	background-color: #f0f0f0; 
  }

.accent_1 {
	background: #e1e2db;
}

.accent_2 {
	background: #cecece;
}

.jobcard__td {
	padding: 8px;
    font-size: 14px;
	vertical-align: middle; 
	font-style: italic;  
}




/* STONE CUSTOM TABLE */
.jobcard__table {
	width: 100%;
    border-collapse: collapse;
	border-spacing: 0;
}

table.filling_table th, table.filling_table td {
	border: 1px solid #8f8f8f;
}



.jobcard__01__th {
	padding: 5px 8px;
	font-size: 14px;
	text-align: left;
    color: #515151;
    vertical-align: middle;
	font-family: "Google Sans Medium";
}


/* color accent */
.ja__01 {
	background: #f3ff96;
}
.ja__02 {
	background:  #dce3a5;
}
.ja__03 {}




/* ----- JOBCARD IMAGE ----- */
.product-image-modal-trigger a {
	display: flex;
	align-items: center;
	font-family: 'Google Sans Regular', sans-serif;
	font-weight: bold;
	text-decoration: none;
    font-size: 18px;
    color: #4d4d4d;
	transition: all 0.5s ease;
}

.product-image-modal-trigger a:hover {
	color: #7a5757;
}

.product-image-modal-trigger i {
	font-size: 20px;
	padding-left: 8px;
}

.product-image {
	width: 500px;
}






/* ///////////////////// /////// */
/*     	JOBCARD STEPS STYLES 	 */
/* ///////////////////////////// */


.jobcard__steps__container {
	background: #fff;
	border-radius: 10px;
}



.steps__info {
	background: #a3c7a0;
	text-align: center;
	padding: 20px 0;
	/* display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #e0e0e0;
	padding: 20px 30px; */





/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=7dcda7&c2=88878f&gt=l&gd=dbl
*/
/* background: #7DCDA7;
background: linear-gradient(45deg, #7DCDA7, #88878F); */




	
}


.steps__info h1 {
	font-size: 25px;
	color: #323232;
	margin-bottom: 10px;
	
}




/* ////////////////////////////////////////// */
/*          STEPS PROCESS START HERE          */
/* ////////////////////////////////////////// */

.jobcard__steps {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items: center;
	gap: 2px;
	position: relative;
	padding: 30px 0px;
}

.steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jobcard__steps span {
	display: block;

}

.steps__media {
	text-align: center;
	display: flex;
	align-items: center;
	margin: 10px 0;
}

.steps__circle {
	
	display: inline-block;
	height: 12px;
	width: 12px;
	border-radius: 50px;
	border:3px solid #dedede;
	z-index: 2;
}

.steps__circle__true {
	background: #c36764;
}

.steps__circle__false {
	background: #dedede;
	border:3px solid #a8a8a8;
}

.steps__line {
	height: 1.5px;
	width: 200px;
	position: absolute;
	z-index: 1;
}

.line__true {
	background: #d4714d;
}

.line__false {
	background: #dedede;
}

.steps__value {
	color: #279145;
	font-size: 14px;
	/* font-family: "Google Sans Medium"; */
	font-family: 'Jost', sans-serif;
}

.steps__label {
	color: #989898;
	font-size: 14px;
}

.steps__image {
	background: #fff;
	z-index: 2;
}

.steps__image img {
	width: 70px;
	border-radius: 50%;
	border: 2px solid #74c088;  
	padding: 3px;
}

.steps__image img:hover {
	border: 2px solid #67e56b;
}
/* ////////////// END HERE ////////////// */



.steps__footer {
	text-align: center;
	border-top: 1px dashed #e0e0e0;
	/* padding: 20px 30px; */
	
}

/* Steps Color Accent */

.sp__01 {
	color: #6f6f6f;
	padding: 2px;
	font-size: 14px;
	font-family: "Google Sans Medium";
}

.sp__02 {
	color: #a0a0a1;
	padding: 10px;
}




/* ///////////////////// */
/*       STEPS TABLE     */
/* ///////////////////// */

table.steps__info__table {
	vertical-align: middle;
	border-radius: 3px;
    overflow: hidden;
	width: 100%;
}

table.steps__info__table th, table.steps__info__table td {
	border: 1px dashed #e0e0e0;
}









/* Grid styles (temporary) */

.steps__grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 5px;
	
	
}

.steps__grid__item {
	background: #ffffd5;
}

.steps__grid__item .sg-label,
.steps__grid__item .sg-value {
	display: block;
	
}

.steps__grid__item .sg-label {
	border-bottom: 1px solid #000;
	font-family: "Google Sans Medium";
	font-size: 15px;
	
	padding: 2px;
	/* background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
	background-position: bottom;
	background-size: 10px 1px;
	background-repeat: repeat-x; */
}

.steps__grid__item .sg-value {
	padding: 5px;
	font-size: 14px;
}












/* /////////////////////////// */
/*       REDESIGN JOBCARD      */


.jobcard-grid-container {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.jobcard-grid-item {
	text-align: center;
}

.jobcard-grid-label,
.jobcard-grid-value {
	padding: 8px 10px;
}

.jobcard-grid-label {
	background: #c5dbc4;
	font-family: "CeraRoundProBold";
	font-size: 15px;
	/* color: #165601; */
	color: #516d50;
}


.jobcard-grid-value {
	display: block;
	background: #f0f0f0;
	font-size: 14px;
    font-style: italic;
}


.jobcard-grid-footer-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}

.jobcard-footer-link-item {
	font-family: "Gotham Rounded Bold", sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	color: #9f5458;
	margin-left: 15px;
	transition: all 0.5s ease;
}

.jobcard-footer-link-item:hover {
	color: #ce4b4b;
}





/* Jewelry Class color identifier */

#master,
#jewelry,
#notspecified {
	background: #dedede;
	border-radius: 10px;
	padding: 1px 10px;
	font-size: 14px;
}

#master {color: #cb4e4e;}
#jewelry {color: #159a1d;}
#notspecified {color: #7a7a7a;}

#master::before {background: #cb4e4e;}
#jewelry::before {background: #159a1d;}
#notspecified::before {background: #7a7a7a;}


#master::before,
#jewelry::before,
#notspecified::before {
	content: ''; /* Required to display the ::before pseudo-element */
    display: inline-block; /* Ensures the circle takes up space */
    height: 10px;
	width: 10px;
	border-radius: 50%;
    margin-right: 5px;
}




.jobcard-item-nav {
	font-family: "Gotham Rounded Bold", sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	color: #9f5458;
	margin-left: 15px;
	transition: all 0.5s ease;
	display: inline-flex;
	/* text-underline-offset: 3px; */
}

.jobcard-item-nav:hover {
	color: #c34114;
}

.jobcard-item-nav img {
	width: 11px;
	filter: invert(33%) sepia(17%) saturate(2254%) hue-rotate(314deg) brightness(102%) contrast(81%);
	margin-left: 5px;
}


/* .jobcard-item-nav::after {
	content: url("/static/images/double-arrow-right-thick.svg"); 
    display: inline-block; 
	vertical-align: middle;
	filter: invert(33%) sepia(17%) saturate(2254%) hue-rotate(314deg) brightness(102%) contrast(81%);
} */




.jobcard-delete-animation {
	width: 100px;
}


.backto-jobcard-details {
	font-family: "Gotham Rounded Bold", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    color: #9f5458;
    margin-left: 15px;
    transition: all 0.5s ease;
    display: inline-flex;
}

.backto-jobcard-details img {
	width: 11px;
    filter: invert(33%) sepia(17%) saturate(2254%) hue-rotate(314deg) brightness(102%) contrast(81%);
    margin-left: 5px;
}