.content-box {
	margin: auto;
}
.custom_inputs_darwing {
	display: flex;
}

.custom_inputs {
	display: flex;
	justify-content: space-between;
}
.content-box .front_page_data .custom_inputs input[type="text"] {
	width: 49%;
	box-sizing: border-box;
	background: no-repeat;
}

.main-header-menu .current_page_item {
    display: none;
}

.content-box .front_page_data {
    padding: 20px;
    min-width: 500px;
}
canvas#other-sketchpad {
    border: 1px solid #ccc;
    margin: 50px auto;
	width: 100%;
}
/********* custom design for formating *******************/
.custom_button_section.top_buttons {
    display: flex;
    margin: 0 0 10px;
    align-items: center;
}

.custom_button_section.top_buttons input#color-picker {
    padding: 3px;
    background: none;
    border: 1px solid #000;
    margin: 0 10px 0 0;
}

.custom_button_section.top_buttons input#size-picker {
    background: none;
}

.custom_button_section {
    display: flex;
    gap: 10px;
    text-transform: capitalize;
}

.custom_button_section button {
    width: 33.33%;
    text-transform: capitalize;
}


.custom_button_section.top_buttons input#size-picker {
  -webkit-appearance: none;
  width: 100%;
  height: 10px; /* Set the height of the track */
  background: #ddd; /* Track background color */
  border: none;
  border-radius: 5px; /* Round the edges of the track */
  padding: 0;
  min-width: 0;
  line-height: normal;
  box-shadow: none;
}

/* Style the thumb (the slider) */
.custom_button_section.top_buttons input#size-picker::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; /* Set the width of the thumb */
  height: 24px; /* Set the height of the thumb */
  background: #007BFF; /* Thumb background color */
  border: 2px solid #007BFF; /* Thumb border color */
  border-radius: 50%; /* Round the edges of the thumb */
  cursor: pointer; /* Add a pointer cursor to the thumb */
}

/* Change the color of the thumb when active (clicked) */
.custom_button_section.top_buttons input#size-picker::-webkit-slider-thumb:active {
  background: #0056b3;
  border: 2px solid #0056b3;
}

@media screen and (max-width: 767px){
	.content-box .front_page_data .custom_inputs input[type="text"] {
		width: 100%;
	}
	.custom_inputs {
		flex-flow: wrap;
		gap: 4px;
	}
	div#wPaint, div#wPaint canvas {
		max-width: 100%;
	}
}

@media screen and (max-width: 991px){
.content-box .front_page_data {
    min-width: 100%;
}
canvas#other-sketchpad {
    max-width: 100%;
    margin: 15px 0px 10px; 
}
.custom_inputs input {
    width: 100%;
    padding: 1px 5px;
    font-size: 16px;
    margin-top: 10px;
}
.custom_inputs input:first-child {
    margin-top: 0;
}
.custom_button_section.top_buttons input#color-picker {
    padding: 2px;
    margin: 0 2px 0 0;
}
.custom_button_section.top_buttons input#size-picker {
}
.custom_button_section button {
    font-size: 14px;
    padding: 10px 5px;
}
.custom_button_section.top_buttons {
    margin: 0px 0 5px;
}

div#ast-mobile-header .site-header-primary-section-right li.menu-item.menu-item-type-post_type {
    width: auto;
    margin-left: auto;
    background: no-repeat;
    border: none;
}
div#ast-mobile-header .site-header-primary-section-right ul.main-header-menu {
    background: no-repeat;
    border: none;
    box-shadow: none;
}

div#ast-mobile-header .site-header-primary-section-right li.menu-item.menu-item-type-post_type a.menu-link {
    border: none;
    font-size: 16px;
}

}

/*************************** Gallery Page CSS ********************************/

.content-box .custom_drawing_page {
    padding: 20px;
}

.content-box .custom_drawing_page .custom_inputs input[type="text"] {
    width: 300px;
    box-sizing: border-box;
    background: no-repeat;
    border: none;
    border-bottom: 1px solid #e2e8f0;
}

.custom_drawing_table {
    margin: 50px auto;
    width: 100%;
	display: inline-block;
}

.custom_drawing_class {
    width: 12%;
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
    border: 1px solid #ccc;
}

.custom_drawing_class img {
	width: 100%;
	padding:2px;
	cursor: pointer;
}

@media screen and (max-width: 991px){
	#custom_Search_form {
		display: flex;
	}
	.custom_drawing_class {
		width: 32%;
	}
}

@media screen and (max-width: 400px){
	.custom_drawing_class {
		width: 48%;
	}
	.content-box .custom_drawing_page .custom_inputs input[type="text"] {
		width: 65%;
		margin-right: 10px;
		border: 2px solid #e2e8f0;
		padding: 7px;
	}
}

/************** Home page mobile CSS ***********************/

.custom_mobile_body .content-box .front_page_data {
    padding: 50px 100px;
}
.custom_mobile_body .ast-primary-header-bar {
	padding: 30px;
	border-bottom-width: 5px;
	border-bottom-color: #eaeaea;
	border-bottom-style: solid;
}	
.custom_mobile_body  .ast-builder-grid-row.ast-builder-grid-row-has-sides.ast-builder-grid-row-no-center {
    display: block;
}
.custom_mobile_body  .site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left {
    justify-content: space-between;
    width: 100%;
}

.custom_mobile_body  .custom_inputs {
    flex-flow: wrap;
}

.custom_mobile_body  a.menu-link {
    font-size: 24px;
    margin-left: auto;
}

.custom_mobile_body  li#menu-item-19 {
    margin-left: auto;
    float: right;
}

.custom_mobile_body  a.menu-link {
    font-size: 40px;
    margin-left: auto;
}
.custom_mobile_body .content-box .front_page_data .custom_inputs input[type="text"] {
    width: 100%;
    height: 90px;
    font-size: 43px;
    border-width: 3px;
    margin: 20px 0;
	border: 1px solid;
}

.custom_mobile_body #other-sketchpad {
    border: 1px solid;
    width: auto;
    margin: 30px auto;
}
.custom_mobile_body header .custom-logo-link img {
    max-width: 170px;
    width: 160px;
}
.custom_mobile_body .custom_button_section.top_buttons {
    margin: 20px 0 10px;
}
.custom_mobile_body .custom_button_section.top_buttons input#color-picker {
    padding: 2px;
    margin: 0 2px 0 0;
    height: 60px;
    width: 160px;
}
.custom_mobile_body button {
    font-size: 45px;
    padding: 25px 0;
    margin-top: 20px;
}
/* Style the thumb (the slider) */
.custom_mobile_body .custom_button_section.top_buttons input#size-picker::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 50px; /* Set the width of the thumb */
  height: 50px; /* Set the height of the thumb */
  background: #007BFF; /* Thumb background color */
  border: 2px solid #007BFF; /* Thumb border color */
  border-radius: 50%; /* Round the edges of the thumb */
  cursor: pointer; /* Add a pointer cursor to the thumb */
    position: relative;
    top: -10px;
}

.custom_mobile_body .site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
    display: none;
}