/* Styles for 'normal' meta boxes
-------------------------------------------------------------- */

/* Clearfix for field */

.ctrlbp-field {
	margin-bottom: 20px;
}

.ctrlbp-field:last-of-type{
	margin-bottom: 0;
}
  
  .ctrlbp-input {
	flex: 1;
  }
  
  .ctrlbp-label > label {
	font-weight: 600;
  }
  
  .ctrlbp-required {
	color: #dc3232;
	font-weight: bold;
	margin-left: 3px;
  }
  
  .ctrlbp-input {
	h4 {
	  margin: 0;
	}
  
	input:not([size]) {
	  width: 100%;
	}
  }
  
  .ctrlbp-input-group {
	width: 100%;
  }
  
  .ctrlbp-input {
	select, .select2-container, textarea:not([cols]) {
	  width: 100%;
	}
  
	input {
	  &[type="checkbox"], &[type="radio"] {
		width: 1em;
	  }
  
	  &[type="button"] {
		width: auto;
	  }
	}
  }
  
  .ctrlbp-textarea {
	resize: vertical;
  }
  
  /* Clone */
  
  .ctrlbp-clone {
	min-height: 24px;
	margin-bottom: 12px;
	padding-right: 24px;
	position: relative;
	clear: both;
	background: #fff;
  
	> input {
	  &[type='radio'], &[type='checkbox'] {
		margin: 6px 0 0 4px;
	  }
	}
  }
  
  .ctrlbp-button.remove-clone {
	text-decoration: none;
	color: #ccc;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	transition: color 200ms;
  
	.dashicons {
	  font-size: 20px;
	}
  
	&:hover {
	  color: #dc3232;
	}
  }
  
  .remove-clone:focus {
	outline: 0;
	box-shadow: none;
  }
  
  .ctrlbp-button.add-clone {
	margin-top: 4px;
  }
  
  .ctrlbp-clone-icon {
	cursor: move;
	background: url(../img/drag_icon.gif) no-repeat;
	height: 23px;
	width: 15px;
	vertical-align: top;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
  }
  
  .ctrlbp-sort-clone {
	padding-left: 15px;
  }
  
  /* jQuery validation */
  
  p.ctrlbp-error {
	color: #dc3232;
	margin: 4px 0;
	clear: both;
  }
  
  input.ctrlbp-error.ctrlbp-error, textarea.ctrlbp-error, select.ctrlbp-error {
	border-color: #dc3232;
	background: #ffebe8;
  }
  
  /* Utilities
  -------------------------------------------------------------- */
  
  .ctrlbp-sortable-placeholder {
	background: #fcf8e3;
	border: 1px solid #faebcc;
	display: block;
  }
  
  /* Styles for 'side' meta boxes
  -------------------------------------------------------------- */
  
  #side-sortables {
	.ctrlbp-field {
	  flex-direction: column;
	}
  
	.ctrlbp-label {
	  width: 100%;
	  margin-bottom: 4px;
	}
  }
  
  /* Mobile style */
  @media (max-width: 782px) {
	.ctrlbp-label {
	  margin-bottom: 5px;
	}
  
	.ctrlbp-input input {
	  &[type="radio"], &[type="checkbox"] {
		width: 1.5625rem;
	  }
	}
  }
  
  /* Seamless style
  --------------------------------------------------------------*/
  
  .ctrlbp-seamless {
	background: none;
	border: none;
	box-shadow: none;
  
	.inside.inside {
	  padding-left: 0;
	  padding-right: 0;
	}
  }
  
  .postbox.ctrlbp-seamless {
	.hndle, .handlediv, .postbox-header {
	  display: none;
	}
  }
  
  .ctrlbp-seamless .ctrlbp-clone {
	background: none;
  }

/* CSS fixes
--------------------------------------------------------------*/
/* Fix color picker field is hidden by the post editor at after_title position. https://controlpatterns.net/support/topic/bug-color-picker-field-is-showed-below-the-title-field/ */
.postarea {
	position: relative;
	z-index: 0;
}
.ctrlbp-hidden-wrapper {
	display: none;
}
pre.ctrlbp-editor-type{
	min-height: 200px;
	border: 1px solid #ddd;
}
.ctrlbp-field-has-label{
	.ctrlbp-input{
		.ctrlbp-has-columns{
			.ctrlbp-field-col{
				.ctrlbp-col{
					width: 100%;
					margin-bottom: 5px;
				}
			}
		}
	}
}