/* /////////////////////////// */
/* STONE INVENTORY PACKET LIST */

.stone__th {
    padding: 8px;
    font-size: 15px;
    text-align: left;
    color: #504f4f;
    vertical-align: middle;
    background: #e1e2db;
    font-family: "CeraRoundProBold";
    text-align: center;
}

.stone__td {
    padding: 7px;
    font-size: 14px;
    font-style: italic;
    vertical-align: middle;
    background: #f5f5f5;
    text-align: center;
}

.stone__list__theader {
    background: #f2f2c1;
    padding: 10px;
    text-align: center;
    font-size: 15px;
    color: #706e3a;
    font-family: "Gotham Rounded Bold", sans-serif;
}




/* //////////////////////////////////////////// */
/* STONE INVENTORY PACKET LIST COSTING DETAILS */


.stone__packet__header {
    padding: 15px 0;
    background: #bce4bc;
    font-size: 18px;
    color: #35463e;
}

.stone-packet-header-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stone-packet-image {
    margin-right: 20px;
    width: 40px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(247deg) brightness(103%) contrast(102%);
}

.header-packet-label,
.header-packet-value {
    font-family: "CeraRoundCYMedium";
    display: block;
    text-align: left;
}

.header-packet-label {
    font-size: 13px;
    text-transform: uppercase;
    color: #898989;
    margin-top: 5px;
}

.header-packet-value {
    font-size: 20px;
    color: #316f1f;
}

.costing-links {
    text-align: center;
    margin-top: 15px;
    display: block;
}

.update-packet-costing {
    font-family: "CeraRoundProBold";
    text-transform: uppercase;
    font-size: 13px;
    color: #9f5458;
    transition: all 0.5s ease;
    margin: 0 8px;
}

.update-packet-costing:hover {
    color: #ce4b4b;
}










/* //////////////////////////////// */
/*     STONE INVENTORY SUMMARY      */


.stone-inventory-summary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

.inventory-summary-item {
    text-align: center;
}

.si-label,
.si-value {
    display: block;
    padding: 8px 10px;
}


.si-label {
    background: #61696a;
    font-family: "CeraRoundProBold";
	font-size: 15px;
    color: #fff;
}

.si-value {
    background: #efefef;
    font-style: italic;
    font-size: 15px;
}

#separator {
    display: block;
    margin-bottom: 50px;
}







/* ////////////////////////////// */
/*       STONE SEARCH FORM        */
/* ------------------------------ */
.stone-search-section {
	padding: 5px;
    margin-bottom: 15px;
    background: rgb(67 71 80 / 85%);
    border-radius: 2px;
}
.stone-search-form {
	display: flex;
    justify-content: center;
}
.stone-field-container-left {
	width: 15%;
    margin-right: 5px;
}
.stone-create {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #56cc89;
	height:100%;
    font-family: "CeraRoundProBold", sans-serif;
	text-decoration: none;
	color: #fff;
}
.stone-search-input-center {
	background: #fff;
	padding: 10px;
    width: 70%;
}
.stone-input-field {
	width: 100%;
	/* font-size: 15px; */
}
.stone-field-container-right {
	width: 15%;
    margin-left: 5px;
}
.stone-search-submit {
	background: #56cc89;
	border: none;
	padding: 0 20px;
	font-size: 15px; color: #fff;
	width: 100%;
	height: 100%;
}
.stone-search-submit:hover {
	color: #dedede;
}



/* LOOSE STONE STYLES */
.loose-stone-search-form {
    width: 100%;
    background: rgb(67 71 80 / 85%);;
    display: grid;
    grid-template-columns: 15% repeat(2, 1fr) 15%; /* First and last items occupy 20%, middle items share remaining space */
    grid-gap: 5px; /* Adjust gap between grid items as needed */
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.loose-stone-filter-input {
    background: #fff;
    padding: 10px;
}

.loose-stone-input-field {
	width: 100%;
}

.loose-search-submit-button {
    border: none;
    background: #56cc89;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family: "CeraRoundProBold"; 
    color: #fff;
    cursor: pointer;
}

.loose-search-submit-button:hover {
    color: #eafef1;
}


.loose-search-icon {
    width: 24px;
    margin-right: 10px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(16deg) brightness(103%) contrast(101%);
}








/* ///////////////////////////// */
/*  STONE REQUIREMENTS REDESIGN  */

.stone-requirements-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.stone-requirement-item {
    text-align: center;
}

.stone-requirement-label,
.stone-requirement-value {
    padding: 8px 10px;
}

.stone-requirement-label {
    display: block;
    background: #c7dcc5;
    font-family: "CeraRoundProBold";
	font-size: 15px;
    color: #357151;
}

.value-wrapper { /* To have 2px margin gap from the label */
    margin-top: 1px;
}

.stone-requirement-value {
    display: block;
    background: #efefef;
    font-size: 14px;
    font-style: italic;
}

.empty-stone-requirement {
    width: 100%;
    display: block;
    text-align: center;
    background: #f5f3f3;
    margin-top: 2px;
    padding: 20px 0;
    color: #a19f9f;
}

.edit-requirement,
.add-requirement,
.edit-setting-stone,
.requirement-links {
    display: inline-flex;
    font-family: "Gotham Rounded Bold", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #aa3232;
    transition: all 0.3s ease;
}

.requirement-icon {
    width: 11px;
    /* filter: invert(33%) sepia(17%) saturate(2254%) hue-rotate(314deg) brightness(102%) contrast(81%);
    margin-left: 5px; */
}



.issue-stone {
    font-family: "Gotham Rounded Medium", sans-serif;
    font-size: 14px;
    color: #fff;
    transition: all 0.3s ease;
}

.issue-stone:hover {
    color: #b2f0ff;
}





/* /////////////////////////////// */
/*        TOTAL STONE SUMMARY      */
/* /////////////////////////////// */


.actual-stone-wrapper {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(6, 1fr);
}

.actual-stone-block {
    text-align: center;
}

.as-label,
.as-value {
    display: block;
    padding: 8px 10px;
}


.as-label {
    background: #61696a;
    font-family: "Gotham Rounded Medium", sans-serif;
	font-size: 14px;
    color: #fff;
}

.as-value {
    background: #efefef;
    font-style: italic;
    font-size: 15px;
    margin-top: 2px;
}



/* /////////////////////////////// */
/*  ACTUAL STONE SUMMARY REDESIGN  */
/* /////////////////////////////// */


.actual-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

.actual-summary-item {
   text-align: center;
   margin-top: 2px;
}

.actual-summary-label,
.actual-summary-value {
    display: block;
    padding: 8px 10px;
}


.actual-summary-label {
    background: #c7dcc5;
    font-family: "CeraRoundProBold";
	font-size: 15px;
    color: #357151;
}

.actual-summary-value {
    display: block;
    background: #efefef;
    font-size: 14px;
    font-style: italic;
}

/* .actual-wrapper {
    margin-top: 2px;
} */

.empty-stone-summary {
    width: 100%;
    display: block;
    text-align: center;
    background: #f5f3f3;
    margin-top: 2px;
    padding: 20px 0;
    color: #a19f9f;
}








/* //////////////////////////////////// */
/*    JOBCARD STONE SECTION INCLUDES    */
/* //////////////////////////////////// */

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














/* FOR CHECKING  and IMPROVEMENTS*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */















/* ////////////////////////////////////// */
/*               STONE FORM               */
/* -------------------------------------- */
.stone__form__text__header {
	text-align: center;
	font-size: 25px;
    margin-bottom: 25px;
	padding: 10px 0;
    color: #a9a9a9;
}













.stone_extra_info {
    margin-top: 20px; 
    text-align: center;
    font-family: "Gotham Rounded Bold", sans-serif;
    text-transform: uppercase;
    font-size: 15px; 
    color: #53ad60;
    /* color: #000; */
}


.stone-item-nav-div {
    text-align: right;
    margin-top: 10px;
}

.stone-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
}

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



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