/**
 * CT Meta Box Stylesheet
 */

.ctmb-field {
	margin: 12px 0;
}

	.ctmb-field.ctmb-no-top-margin {
		margin-top: 0;
	}

	.ctmb-field.ctmb-no-bottom-margin {
		margin-bottom: 0;
	}

	.ctmb-name {
		display: inline-block;
		vertical-align: top;
		width: 25%;
		max-width: 200px;
		font-weight: bold;
		margin-top: 3px;
	}

		.ctmb-name span { /* (Optional) or (Required) */
			color: #777;
			font-weight: normal;
		}

	.ctmb-value {
		display: inline-block;
		vertical-align: top;
		width: 70%;
	}

		/* can also use widefat class for 100% */

		.ctmb-value input[type=text],
		.ctmb-value textarea {
			width: 70%; /* leaves just enough room for button on right */
		}

		.ctmb-value textarea {
			height: 56px;
		}

		input[type=text].ctmb-medium,
		input[type=number].ctmb-medium,
		textarea.ctmb-medium {
			width: 250px;
		}

		input[type=text].ctmb-small,
		input[type=number].ctmb-small,
		textarea.ctmb-small {
			width: 100px;
		}

		input[type=text].ctmb-tiny,
		input[type=number].ctmb-tiny,
		textarea.ctmb-tiny {
			width: 40px;
		}

		input[type=text].ctmb-three-digits,
		input[type=number].ctmb-three-digits {
			width: 55px;
		}

		/* Date(s) */

		.ctmb-date { /* hide actual input for collecting dates; user sees formatted dates instead */
			display: none;
		}

		.ctmb-date-formatted:not(:empty) {
			padding-top: 3px; /* move dates down when present to be in line with label */
		}

			/* Show button after when less than 2 dates (also see .ctmb-date-button-after below) */

			.ctmb-date-button-after .ctmb-date-formatted:not(:empty) {
				display: inline-block !important;
				vertical-align: top;
			}

		.ctmb-date-formatted:empty {
			margin-top: -8px; /* shift up so button is in line with label */
		}

			.ctmb-localized-date {
				display: inline-block;
				padding-right: 8px;
				white-space: nowrap;
			}

			.ctmb-remove-date {
				display: inline-block;
				padding-left: 0;
				font-size: 1.45em;
				position: relative;
				top: 0.04em;
			}

				.ctmb-remove-date:not(:hover) {
					color: #999;
				}

		.ctmb-date-button-container {
			margin: 8px 0 6px 0;
		}

			/* Show button after when less than 2 dates (also see .ctmb-date-button-after above) */

			.ctmb-date-button-after .ctmb-date-button-container {
				margin: 0 0 2px 0;
				position: relative;
				top: -2px;
				display: inline-block;
			}

		.ctmb-date-container .datepicker-inline { /* hide datepicker until click button */
			display: none;
			margin: 6px 0 7px 0;
		}

			/* Show button after when less than 2 dates (also see .ctmb-date-button-after above) */

			.ctmb-date-container:not(.ctmb-date-button-after) .datepicker-inline {
				margin-top: 12px;
			}

		/* Upload */

		.ctmb-upload,
		.ctmb-upload_textarea,
		.ctmb-upload-file {
			vertical-align: middle;
		}

		/* After input */

		.ctmb-after-input {
			padding-left: 5px;
			display: inline-block;
		}

	/* Inline radio or checkbox_multiple option */

	.ctmb-radio-inline .ctmb-radio-container,
	.ctmb-checkbox-multiple-inline .ctmb-checkbox-multiple-container {
		margin-bottom: 2px;
		display: inline-block;
	}

	.ctmb-radio-inline .ctmb-radio-container:not(:last-child),
	.ctmb-checkbox-multiple-inline .ctmb-checkbox-multiple-container:not(:last-child) {
		margin-right: 11px;
	}

/* Hidden Fields */

.ctmb-hidden {
	display: none;
}

/* Side Column */

#side-sortables .ctmb-name,
#side-sortables .ctmb-value {
	width: 100%;
	display: block;
}

/* Gutenberg adjustments */

.gutenberg .ctmb-name {
	font-weight: normal;
}

	.gutenberg .ctmb-name span { /* (Optional) or (Required) */
		color: #777;
	}

.gutenberg .description {
	color: #777;
}

/* Air Datepicker - more WordPress style / neutral colors */

.ctmb-date-container .datepicker {
	font-family: inherit;
	font-size: 13px;
}

.ctmb-date-container .datepicker-inline .datepicker {
	border-color: #dddddd !important;
}

.ctmb-date-container .datepicker--day-name {
	font-size: 0.9em;
	font-weight: bold;
	color: inherit;
}

.ctmb-date-container .datepicker--nav-title {
	font-size: 1.05em;
	font-weight: bold;
}

.ctmb-date-container .datepicker--cell {
  height: 28px;
}

.ctmb-date-container .datepicker--time-row input[type='range']:focus::-webkit-slider-thumb,
.ctmb-date-container .datepicker--time-row input[type='range']:focus::-moz-range-thumb,
.ctmb-date-container .datepicker--time-row input[type='range']:focus::-ms-thumb {
	background: #aaa;
	border-color: #aaa;
}

.ctmb-date-container .datepicker--cell.-selected-,
.ctmb-date-container .datepicker--cell.-selected-.-current- {
	background: #aaa;
}

.ctmb-date-container .datepicker--cell.-selected-.-focus- {
	background: #999;
}

.ctmb-date-container .datepicker--button,
.ctmb-date-container .datepicker--cell.-current-,
.ctmb-date-container .datepicker--cell.-current-.-focus-,
.ctmb-date-container .datepicker--cell.-current-.-in-range- {
  font-weight: bold;
  color: inherit;
}

.ctmb-date-container .datepicker,
.ctmb-date-container .datepicker--cell,
.ctmb-date-container .datepicker--cell.-range-from-.-range-to-,
.ctmb-date-container .datepicker--nav-action,
.ctmb-date-container .datepicker--nav-title,
.ctmb-date-container .datepicker--button {
  border-radius: 0;
}
.ctmb-date-container .datepicker--cell.-range-from- {
	border-radius: 0 0 0 0;
}
.ctmb-date-container .datepicker--cell.-range-to- {
	border-radius: 0 0 0 0;
}