/* --------------------------------------------------------------------------------------------------------------------- */
/* FORMS */
/* --------------------------------------------------------------------------------------------------------------------- */

span.required
{
	font-weight: 900;
	color: #600;
	font-size: 1.2rem;
	vertical-align: top;
}

fieldset#loginfield
{
	display: grid;
	row-gap: 10px;
	align-items: stretch;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: auto auto minmax(2.5em, 1fr) minmax(2.5em, 1fr) auto;
	width: 60%;
	margin: 0px auto;
}

fieldset#loginfield .button
{
	grid-column-start: 2;
	justify-self: end;
}

fieldset#loginfield h1
{
	grid-column-start: 2;
}

fieldset#loginfield div#messages
{
	grid-row-start: 2;
	grid-column: 1 / span 2;
}

div.grid
{
	display: grid;
	align-items: stretch;
	gap: 8px;
	row-gap: 8px;
	margin-top: 10px;
	grid-template-columns: minmax(180px, auto) 1fr;
	grid-template-rows: minmax(2.5em, 1fr);
}

div.gallery_grid
{
	display: flex;
	flex-direction: row;
	gap: 10px;
	row-gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

fieldset#entryform div.grid_pedigree
{
	grid-template-columns: minmax(180px, auto) auto minmax(80px, 1fr) auto minmax(80px, 1fr);
}

fieldset#entryform div.grid_sex input#female
{
	margin-left: 30px;
}

fieldset#entryform div.grid_sex
{
	grid-template-columns: minmax(180px, auto) auto auto auto auto 1fr;
}

fieldset#entryform div.grid_birthdate
{
	grid-template-columns: minmax(180px, auto) auto 1fr auto 1fr auto 1fr;
}

fieldset#entryform div.grid_cutoff
{
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr 1fr;
}

fieldset#entryform div.grid_exhibition
{
	grid-template-columns: minmax(180px, auto) auto 1fr;
}

/* the dog's age and the error messages take a line of their own above the
   show; left in the grid they sit in the show name's cell and push the name,
   checkbox and class along the row (members entry and class change, admin
   entry, old entry form) */
fieldset#entryform div.grid_exhibition p.info,
fieldset#entryform div.grid_exhibition p.error
{
	grid-column: 1 / -1;
}

fieldset div.grid_search
{
	grid-template-columns: minmax(180px, auto) 1fr auto;
}

div.entry div.entry_buttons
{
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 8px;
}

fieldset div.grid_tarif
{
	grid-template-columns: 40px 60px 70px auto;
	margin: 0;
}

fieldset div.grid_platit
{
	grid-template-columns: 40px 138px auto;
	grid-template-rows: 1fr auto;
	margin: 0;
}

fieldset div.grid_platit div
{
	grid-column: 2;
	display: flex;
	flex-direction: row;
}

fieldset div.grid label, fieldset div.grid input, fieldset div.grid select
{
	display: flex;
	align-items: center;
}

fieldset div#upload_container label
{
	float: left;
	width: 200px;
	height: 30px;
	line-height: 30px;
}

fieldset div#upload_container div,
fieldset div#div_agree_use
{
	clear: both;
}

fieldset div#div_agree_use
{
	margin: 50px 0 10px 0;
}

fieldset input
{
	padding: 0 5px;
	border-radius: 3px;
	border: 1px solid;
	border-top-color: #999;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
	border-left-color: #ccc;
	background: #efefef;
}

fieldset textarea
{
	padding: 0 5px;
	border-radius: 3px;
	border: 1px solid;
	border-top-color: #999;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
	border-left-color: #ccc;
	background: #efefef;
}

fieldset select
{
	padding: 0 5px;
	border: 1px solid;
	border-radius: 3px;
	border-top-color: #999;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
	border-left-color: #ccc;
	background: #efefef;
}

fieldset select:disabled
{
	color: #aaa;
}

option
{
	padding: 0 5px;
	line-height: 32px;
	height: 32px;
}

optgroup
{
	padding: 5px;
}

#variants h3
{
	display: none;
}

fieldset select#breed
{
	width: 100%;
	padding: 0;
}

fieldset select#breed optgroup
{
	font-weight: 900;
}

div#group_filters
{
	display: grid;
	grid-template-columns: repeat(10, 1fr) 1.5fr;
}

fieldset div.group_filter
{
	display: flex;
	line-height: 4rem;
	height: 4rem;
	justify-content: stretch;
}

fieldset div.group_filter.c11, fieldset div.group_filter.c11 label
{
	line-height: 1rem;
}

fieldset div.group_filter.c11 label
{
	padding-top: 1rem;
	padding-bottom: 0.5rem;
}

fieldset div.group_filter label
{
	text-align: center;
	cursor: pointer;
	line-height: 4rem;
	flex-grow: 1;
}

select option[disabled]
{
	background-color: #888;
}

select optgroup option:checked
{
	background: #0078D7 !important;
	color: #EEEEEE;
}

div.variants_container
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-start;
}

fieldset div.variants_option
{
	display: block;
	text-align: left;
}

fieldset div.variants_option input, fieldset div.variants_option label
{
	display: inline;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* BUTTONS */
/* --------------------------------------------------------------------------------------------------------------------- */

.button
{
	display: block;
	text-decoration: none;
	width: 125px;
	height: 36px;
	line-height: 36px;
	color: #fff !important;
	text-align: center;
	cursor: pointer;
	border: 0;
}

.modify,
.confirm
{
	background-image: url(../img/buttonarrow.jpg);
	clear: right;
}

.print
{
	background-image: url(../img/buttonarrow.jpg);
	clear: right;
}

.green
{
	background-image: url(../img/buttonarrowgreen.jpg);
}

.printed
{
	float: right;
	width: auto;
	display: block;
	clear: right;
	margin-right: 10px;
}

.printed img
{
	vertical-align: middle;
	padding: 0 10px;
}

.disabled
{
	background-image: url(../img/buttonarrow_disabled.jpg);
}

.review
{
	background-image: url(../img/buttonarrowmodify.jpg);
}

.delete
{
	background-image: url(../img/buttonarrowdelete.jpg);
	clear: right;
}

.cancel
{
	background-image: url(../img/buttonarrowcancel.jpg);
}

.large
{
	background-image: url(../img/button_large.jpg);
	width: 270px;
	height: 50px;
	line-height: 50px;
}

.end
{
	float: left;
	clear: none;
	margin: 0 0 0 10px;
	background-image: url(../img/buttonarrow.jpg);
}

.on
{
	background-image: url(../img/buttonrectangleon.jpg);
}

.off
{
	background-image: url(../img/buttonrectangle.jpg);
}

.search
{
	background-image: url(../img/buttonarrow.jpg);
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* GROUP COLOURS */
/* --------------------------------------------------------------------------------------------------------------------- */

optgroup.c1,
div.group_filter.c1
{
	background-color: #b0c47f;
}

optgroup.c2,
div.group_filter.c2
{
	background-color: #ffdb9a;
}

optgroup.c3,
div.group_filter.c3
{
	background-color: #ffef9a;
}

optgroup.c4,
div.group_filter.c4
{
	background-color: #b4d3e8;
}

optgroup.c5,
div.group_filter.c5
{
	background-color: #eebeee;
}

optgroup.c6,
div.group_filter.c6
{
	background-color: #9999ff;
}

optgroup.c7,
div.group_filter.c7
{
	background-color: #a97acc;
}

optgroup.c8,
div.group_filter.c8
{
	background-color: #ffb499;
}

optgroup.c9,
div.group_filter.c9
{
	background-color: #8eb0ed;
}

optgroup.c10,
div.group_filter.c10
{
	background-color: #e6918a;
}

optgroup.c11,
div.group_filter.c11
{
	background-color: #e6c573;
}

optgroup.c1 option
{
	background-color: #c1d099;
}

optgroup.c2 option
{
	background-color: #ffe4b3;
}

optgroup.c3 option
{
	background-color: #fff3b3;
}

optgroup.c4 option
{
	background-color: #b7dbf3;
}

optgroup.c5 option
{
	background-color: #ffccff;
}

optgroup.c6 option
{
	background-color: #b3b3ff;
}

optgroup.c7 option
{
	background-color: #bf8ae6;
}

optgroup.c8 option
{
	background-color: #ffc7b3;
}

optgroup.c9 option
{
	background-color: #a6bfed;
}

optgroup.c10 option
{
	background-color: #ffa199;
}

optgroup.c11 option
{
	background-color: #ffe299;
}


/* The reset clears the border on every select. It is normally put back by the
   descendant rule below, but the judging-class pickers sit outside any fieldset
   - in the entries list and in the payment pane - so they are named explicitly
   or they render with no border at all. */
fieldset select,
.entry_class_select,
.et-class-select
{
	padding: 0 5px;
	border: 1px solid;
	border-radius: 3px;
	border-top-color: #999;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
	border-left-color: #ccc;
	background: #efefef;
}

/* Breed picker (common/breed_picker): search box, group filter and the list.
   The groups stay marked in the list, but lightly: a thin bar in the group's
   colour next to the group's name, instead of the old full backgrounds. */

.breed_picker
{
	margin-top: 0.35rem;
}

.breed_picker_tools
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 1rem;
	margin-bottom: 0.5rem;
}

.breed_picker_search,
.breed_picker_group
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.breed_picker_search
{
	flex: 1 1 16rem;
}

fieldset .breed_picker_tools label
{
	width: auto;
	font-size: 0.85rem;
	line-height: 1.3rem;
	color: #5b6b7a;
}

.breed_picker_field
{
	position: relative;
	display: block;
}

fieldset .breed_picker input[type="search"],
fieldset .breed_picker select#breed_group
{
	box-sizing: border-box;
	width: 100%;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid #b9cadb;
	border-radius: 6px;
	background: #fff;
	color: #1b2a38;
	font: inherit;
}

fieldset .breed_picker input[type="search"]
{
	padding-left: 2.1rem;
	padding-right: 2.2rem;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%235b6b7a' stroke-width='1.6'/%3E%3Cpath d='M10.4 10.4l3.3 3.3' stroke='%235b6b7a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0.65rem center / 1rem no-repeat;
	-webkit-appearance: none;
	appearance: none;
}

/* The browser's own clear button shows only in some browsers and cannot be
   styled, so it is replaced by ours. */
.breed_picker input[type="search"]::-webkit-search-cancel-button
{
	display: none;
}

.breed_picker_field_clear
{
	position: absolute;
	top: 50%;
	right: 0.35rem;
	width: 1.8rem;
	height: 1.8rem;
	margin-top: -0.9rem;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #5b6b7a;
	font: inherit;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.breed_picker_field_clear:hover,
.breed_picker_field_clear:focus-visible
{
	background: #e8f2fa;
	color: #1b2a38;
}

.breed_picker_clear
{
	height: 2.5rem;
	padding: 0 0.9rem;
	border: 1px solid #b9cadb;
	border-radius: 6px;
	background: #fff;
	color: #1f6391;
	font: inherit;
	cursor: pointer;
}

.breed_picker_clear:hover,
.breed_picker_clear:focus-visible
{
	border-color: #2980b9;
	background: #f2f8fc;
}

fieldset .breed_picker select#breed
{
	box-sizing: border-box;
	width: 100%;
	padding: 0.25rem;
	border: 1px solid #b9cadb;
	border-radius: 6px;
	background: #fff;
}

fieldset .breed_picker select#breed optgroup
{
	margin-top: 0.3rem;
	padding: 0.2rem 0 0.1rem 0.6rem;
	border-left: 3px solid var(--group, #cfdbe6);
	background: none;
	color: #1f6391;
	font-style: normal;
	font-weight: 700;
}

fieldset .breed_picker select#breed option
{
	height: auto;
	padding: 0.2rem 0.5rem;
	line-height: 1.4rem;
	background: none;
	color: #1b2a38;
	font-weight: 400;
}

fieldset .breed_picker select#breed option:checked
{
	background: #2980b9 linear-gradient(#2980b9, #2980b9);
	color: #fff;
}

fieldset .breed_picker input[type="search"]:focus-visible,
fieldset .breed_picker select:focus-visible
{
	outline: 2px solid #2980b9;
	outline-offset: 1px;
	border-color: #2980b9;
}

.breed_picker_count
{
	margin: 0.3rem 0 0 0;
	font-size: 0.85rem;
	line-height: 1.3rem;
	color: #5b6b7a;
	font-variant-numeric: tabular-nums;
}

/* Neutral button, no arrow. Same artwork as .off, under the name the admin
   panes use for their close and secondary actions. */
.normal
{
	background-image: url(../img/buttonrectangle.jpg);
}