scratch 


.input-group {
	width: 100%
}

.input-group label {
	display: block;
	color: white;
	text-align: center;
	font-size: 1rem
}

.custom-input {
	width: 100%;
	font-family: 'Google Sans', sans-serif !important;
  	border: none;
  	border-radius: 4px;
  	padding: 0.25rem 0.5rem;
	margin-top: 0.5rem !important;
}

#iframe-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Higher than the iframe */
    display: none;  /* Hide by default */
	box-sizing: border-box;
	pointer-events: none;
}


.inside {
	
}

/* Metabox Background */
#scratch_meta_box,
#image_slider_meta_box,
#quiz_meta_box,
#poll_meta_box,
#event_meta_box,
#feed_meta_box,
#ar_metabox,
#nad_cost_metabox{
	display: block !important;
    background-color: rgb(25,25,25);
	// padding-bottom: 2rem;
}

#scratch_meta_box.postbox .inside {
	// height: 20rem;
	transition: height 0.3s ease-in;
	
}

#scratch_meta_box.postbox.closed .inside {
	// height: 0rem;
	// display: block !important;
}

.postbox-header {
}

#numb_images_to_insert {
    
  }

.img-list-wrapper {
	display: flex;
	grid-template-columns: 1fr 1fr;
	max-width: 38rem;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2rem auto;
	gap: 4rem;
	box-shadow: 4px 4px 8px #141414, 
             -4px -4px 8px #262626;
	border-radius: 8px;
	padding: 2rem;
}

.img-list-wrapper legend {
	margin: 0 auto 1.5rem !important;
	font-size: 1.25rem;
}

.img-list-wrapper button{
	width: 100%;
	font-family: 'Google Sans', sans-serif !important;
  	border: none;
  	border-radius: 4px;
  	padding: 0.25rem 0.5rem;
	background: #ff9d1a;
	cursor: pointer;
	color: white !important;
}

.orientation-container {
	display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.orientation-container div{
	display: flex;
	align-items: center;
	gap: 1rem;
}

.img-list-wrapper input{
	font-family: 'Google Sans', sans-serif !important;
  	border: none;
  	border-radius: 4px;
  	padding: 0.25rem 0.5rem;
}

.orientation-container label,
.orientation-container input{
	margin: 0 !important;
}

.scratch-img {
	max-width: 8rem;
	height: 12rem;
	display: block;
	margin: 0 auto 0.5rem;
	object-fit: contain;
}

.scratch-img[src=""] {
	display: none;
}

/* Center Buttons */
.custom-button {
    display: block;
    // margin: auto;
    margin-top: 10px;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
	background: linear-gradient(135deg, #ffc679, #ff9d1a);
	font-family: "Google Sans", sans-serif !important;
	/* background: linear-gradient(135deg, #754486, #6A5ACD); */
	border-radius: 16px;
	font-size: 1rem !important;
}

.secondary-button {
	width: 100%;
	font-family: 'Google Sans', sans-serif !important;
  	border: none;
  	border-radius: 4px;
  	padding: 0.25rem 0.5rem;
	background: #ff9d1a;
	cursor: pointer;
	color: white !important;
	max-width: max-content;
}

.custom-textfield {
	
}

.dropdown-wrapper {
    display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-direction: column;
	max-width: max-content;
	margin: 0 auto;
  }

.dropdown-wrapper label {
	font-size: 1.35rem !important;
	color: white;
	text-transform: capitalize;
}

.dropdown-wrapper select {
	max-width: 12rem;
	border: none;
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
	font-family: "Google Sans", sans-serif !important;
	// background: linear-gradient(135deg, #ffc679, #ff9d1a);
	margin: 0 auto;
	width: 100%;
}

/* Dropdown */
#multi-image-settings-container {
    position: relative;
    /*display: flex;
	gap: 1rem;
	justify-content: center;
	flex-direction: column;*/
}

#multi-image-settings-container label,
#after_image_fields label{
	font-size: 1rem;
}

.centered-thumbnail {
    display: block; /* To apply margin */
    margin: 10px auto;
}

/* Parent Div */
.center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Label Text */
.label-text {
    color: white !important;
    margin-bottom: 20px;  /* Adding some vertical space */
}

/* Input Box */
.input-box {
    border: 1px solid rgb(239,143,108);
    padding: 5px;
    margin-bottom: 10px;
	margin: 0px !important;
	display: block !important;
}

fieldset {
	display: block !important;
	margin: 0px !important;
}

/* scratch.css */

.selected-circle {
    border: 2px solid blue !important;
}

.circle-button {
    border-radius: 50%;
	background-color: #FFA62F !important;
    /* Add additional styling for your circle buttons here */
}

.scratch-icon1 {
     max-width: 8rem;
    height: 12rem;
    display: none;
    margin: 0 auto 0.5rem;
    object-fit: contain;
}