.postbox {
	border: 1px solid #dee2e6;
	background: #fff;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

	.postbox-header {
		padding: 0;
		background-color: #f8f9fa;
		border-bottom: 0;

		h2 {
			padding: 1rem;
			margin: 0;
			letter-spacing: 1px;
			font-size: 1.1rem;
			font-family: 'Poppins', sans-serif;
		}
	}

	.inside{
		font-size: 1rem!important;

		p{
			font-size: .95rem;
		}
	}

	.checklist{
	    max-height: 300px;
	    overflow-y: scroll;		
	}
}

.postbox-ajax{
	.postbox.closed{
		.inside{
			display: block;
		}
	}
}

.postbox-container{

	.meta-box-sortables.ui-sortable{
		min-height: 50px;
		position: relative;
		&.empty-container,
		&:empty{
		    border: 5px dotted #ddd;
		    margin-bottom: 1.5rem;

		    &:after{
			    content: attr(data-emptystring);
			    margin: auto;
			    position: absolute;
			    top: 50%;
			    left: 0;
			    right: 0;
			    transform: translateY(-50%);
			    padding: 0 2em;
			    text-align: center;
			    color: #646970;
			    font-size: 16px;
			    line-height: 1.5;		    
		    }
		}	
	}

}

.metabox-holder {
	&.columns-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr); 
		gap: 1.5rem;

		// Medium screens
		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr); // Adjust to 2 columns
		}

		// Small screens
		@media (max-width: 768px) {
			grid-template-columns: 1fr; // Stack to 1 column
		}
	}

	&.columns-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr); 
		gap: 1.5rem;

		// Small screens
		@media (max-width: 1024px) {
			grid-template-columns: 1fr; // Stack to 1 column
		}
	}

	&.columns-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr); 
		gap: 1.5rem;

		// Small screens
		@media (max-width: 1024px) {
			grid-template-columns: 1fr; // Stack to 1 column
		}
	}			
}