::-moz-placeholder { /* Firefox 19+ */
  color: #000;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #3D3D3D;
}
::-ms-input-placeholder { /* IE 10+ */
  color: #3D3D3D; /* The displayed color is paler */
}

/**
 * Tags
 */

textarea, input, select, label, button {
	font-family: var(--gc-font-sans);
	color: #064184;
	background: var(--gc-color-surface);
	border: 1px solid var(--gc-color-border-strong);
	border-radius: var(--gc-radius-sm);
	box-sizing: border-box; /* Padding will not impact div width */
	transition: border-color var(--gc-transition), box-shadow var(--gc-transition), background-color var(--gc-transition);
}

textarea {
	width: 100%;
	height: 244px;
	padding: 7px;
	margin-top: 12px;
	font-size: inherit; /* Firefox - Required for correct font size */
	vertical-align: top; /* Chrome - Required to avoid extra space/gap bellow textarea */
}

@media all and (max-width: 960px) {
	textarea {
		height: 100px;
	}
}

form {
	margin: 0;
}

.gc-is-submitting {
	cursor: wait !important;
	color: transparent !important;
	text-shadow: none !important;
	pointer-events: none !important;
}

.gc-submit-spinner {
	position: absolute;
	z-index: 20000;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: .9;
	pointer-events: none;
	animation: gc-submit-spin .7s linear infinite;
}

@keyframes gc-submit-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gc-submit-spinner {
		animation-duration: 1.4s;
	}
}

input {
	width: 100%;
	padding: 10px 12px;
}

select {
	width: 100%;
    min-height: 42px;
    padding: 8px 10px;
}

select option {
	color: #064184;
	background-color: #FFF;
}

input:disabled {
	background-color: #ececec;
	border-color: #ececec;
	color: #838383;
}

input:hover:enabled {
	background-color: var(--gc-color-surface-subtle);
	border-color: var(--gc-color-primary);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--gc-color-primary);
	box-shadow: var(--gc-shadow);
}

input[type=submit],
input[type=button], 
button {
	cursor: pointer;
	background-color: var(--gc-color-primary);
	border: 1px solid var(--gc-color-primary);
	color: #FFF;
	margin-top: 12px;
	border-radius: var(--gc-radius-sm);
	padding: 12px 8px;
    /*display: block; /* Hack - force correct position (cf/see. Pokéchange DEX submit padding-top) */
	box-shadow: var(--gc-shadow);
}

input[type=submit][process=loading],
input[type=button][process=loading],
.submit_with-confirmation[process=success] {
	background-image: url("/core/gui/img/form/form_processing_input.gif");
	background-position: right 7px center;
	background-repeat: no-repeat;
	background-color: #FFF !important;
	border-color: #FFF !important;
	color: #064184 !important;
}

input[type=submit][process=success],
input[type=button][process=success],
.submit_with-confirmation[process=success],
.submit_collection_option_oneclick[process=success]
{
    background-image: url("/core/gui/img/form/form_processing_input-success.png");
	background-position: right 7px center;
	background-repeat: no-repeat;
	background-color: #DBEEDE !important;
	border-color: #DBEEDE !important;
	color: #064184 !important;
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover {
	background-color: var(--gc-color-primary-hover);
	border-color: var(--gc-color-primary-hover);
	box-shadow: var(--gc-shadow);
}

input[type=file] {
	margin-bottom: 4px;
}

input[type=checkbox] {
    width: 16px;
    min-height: 16px;
    height: 16px;
    padding: 0;
}

input[process="loading"] {
    background-image: url("/core/gui/img/form/form_processing_input.gif");
    background-position: right 7px center;
    background-repeat: no-repeat;
}

input[process="success"] {
    background-image: url("/core/gui/img/form/form_processing_input-success.png");
    background-position: right 7px center;
    background-repeat: no-repeat;
}

input[process="failure"] {
    background-image: url("/core/gui/img/form/form_processing_input-failure.png");
    background-position: right 7px center;
    background-repeat: no-repeat;
}

select[process="failure"] {
    background-image: url("/core/gui/img/form/form_processing_input-failure.png");
    background-position: right 7px center;
    background-repeat: no-repeat;
	-webkit-appearance: none; /* Remove arrow */
	moz-appearance: none; /* Remove arrow */
	padding: 7px 3px 7px 3px; /* Dirty/Hack- Required to keep same height as default select with arrow (padding: 8px 3px 8px 3px;) */
}


textarea[process="failure"] {
    background-image: url("/core/gui/img/form/form_processing_input-failure.png");
    background-position: right 7px top 10px;
    background-repeat: no-repeat;
}

.content_title input {
	width: 150px;
	padding: 0;
	border: 0 solid;
	color: #3D3D3D;
	font-size: 90%;
	padding-left: 5px;
}

select[edit="yes"] {
    width: 100%;
	height: 26px;
	min-height: 26px;
	box-sizing: border-box;
   	margin: 0;
   	padding: 1px;
   	text-align: left; /* Firefox */
	border: 1px solid #dadde0;
	border-radius: 8px;
	background-color: transparent;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #003399;
}

select:disabled {
	background-color: #F4F4F4;
	border: 1px solid #F4F4F4;
	color: #838383;
}

select:hover:enabled {
	background-color: var(--gc-color-primary-soft);
	border-color: var(--gc-color-primary);
}

@media (min-width: 961px) {
	input,
	select,
	textarea,
	button {
		padding: 8px;
	}
}

/**
 * Form Elements
 */

.form_field {
	width: 100%;
	display: flex;
	color: #064184;
	margin-top: 10px;
	overflow: hidden; /* Hide y-scrollbar while element is displayed (ex: holography label is displayed when a holo version is selected) */
}

.form_field:first-child {
	margin-top: 0;
}

.form_field > .input-name {
	min-width: 124px;
	display: flex;
	align-items: center; /* Center text horizontaly */
	justify-content: center; /* Center text verticaly*/
	background-color: #F8FAFC;
	border-radius: 10px;
	margin-right: 10px;
	padding: 9px;
}

/* Used for PCA icon in label name */
.form_field > .input-name > img {
	height : 10px;
}

.form_field > .input-values {
	width: 100%;
	display: flex;
	flex-wrap: wrap; /* Multiple rows */
}

.form_field > .input-values[content=labels] {
	margin: -1px 0 -1px 0; /* Counter balance label margins */
}

.form_field [type=radio] {
	width: 12px;
	height: 12px;
	min-height: 12px;
	margin-right: 7px;
	padding: 0;
}

.form_field label {
	display: none;
	margin-right: 4px;
	user-select: none; /* Avoids/Disables selection on click */
	margin: 1px 4px 1px 0;
	padding: 7px 10px;
}

.form_field label:hover { 
	background-color: var(--gc-color-primary-soft);
	border-color: var(--gc-color-border-strong);
}

/* Show the 3 first labels */
.form_field label:nth-child(-n+5) {
	display: flex;
}

.form_field .label_viewmore,
.form_field .label_viewless {
	display: none;
	align-self: flex-start;
	box-sizing: border-box;
	height: 36px;
	padding: 7px 11px;
	border-radius: var(--gc-radius-sm);
	cursor: pointer;
	border: 1px solid #F5F5F5;
	margin: 1px 0 1px 0; /* Top & Bottom same as labels */
	background-color: #F5F5F5;
	line-height: 20px;
	white-space: nowrap;
}

.form_field .label_viewmore:hover,
.form_field .label_viewless:hover {
	border-color: #F5F5F5;
	background-color: #EAEAEA;
}

.searchbar_highlighting {
	background: #F1F7FC !important;
	border-color: #BFD5E7 !important;
}

.searchbar_highlighting:hover {
	background: #EAF4FC !important;
	border-color: #8DB8D8 !important;
}

.form_field > .input-values[direction=column] {
	flex-direction: column;
}

.form_field > .input-values[direction=column] label {
	margin: 1px 0 1px 0;
}

.form_field > .input-values[direction=column] label .text-left {
	width: 100%;
}

.form_field > .input-values[direction=column] label .text-right {
	width: 80px;
	text-align: right;
}

/**
 * Form - Miscellanous
 */

/* Miscellanous - Left column inputs */


.headlight input, .headlight select {
	margin-top: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: var(--gc-color-surface-subtle);
	border: 1px solid var(--gc-color-border-strong);
}

.headlight input:hover, .headlight select:hover {
	background-color: #FFF;
	border-color: var(--gc-color-primary);
}

.headlight input:not([type=submit]):focus,
.headlight select:focus {
	outline: none;
	border-color: #76A6CF;
	box-shadow: var(--gc-shadow);
}

/* Keep browser autofill visually consistent with regular fields. */
.headlight input:autofill,
.headlight input:-webkit-autofill,
.headlight input:-webkit-autofill:hover,
.headlight input:-webkit-autofill:focus {
	background-color: var(--gc-color-surface-subtle);
	-webkit-box-shadow: var(--gc-shadow);
	-webkit-text-fill-color: var(--gc-color-text);
	caret-color: var(--gc-color-text);
}

.headlight input.form_nickname:autofill,
.headlight input.form_nickname:-webkit-autofill {
	background-image: url("/core/gui/img/form/form_input_login.png");
	background-position: left 10px center;
	background-repeat: no-repeat;
}

.headlight input.form_password:autofill,
.headlight input.form_password:-webkit-autofill {
	background-image: url("/core/gui/img/form/form_input_password.png");
	background-position: left 10px center;
	background-repeat: no-repeat;
}

.headlight input.form_email:autofill,
.headlight input.form_email:-webkit-autofill {
	background-image: url("/core/gui/img/form/form_input_email.png");
	background-position: left 10px center;
	background-repeat: no-repeat;
}

.headlight input[type=submit] {
	background-color: #FFF;
	border: 1px solid var(--gc-color-border-strong);
	color: #064184;
	box-shadow: var(--gc-shadow);
}

.headlight input[type=submit]:hover {
	background-color: var(--gc-color-primary-soft);
	border-color: var(--gc-color-primary);
	color: #064184;
}

/* Miscellanous - elements */

#form_title[type=text] {
	background-color: #FFF !important;
	border: 1px solid #dadde0;
}

/* Miscellanous - tabs */

#tab_row[status=activated] {
	display: flex;
	flex-direction: row;
	display: -webkit-flex; -webkit-flex-direction: row; /* Webkit */
	text-align: center;
}

#tab_row {
	margin-top: 4px;
	display: flex;
	flex-direction: row;
	display: -webkit-flex; -webkit-flex-direction: row; /* Webkit */
	color: #064184;
}

#tab_row > .tab {
    width: 100%;
    padding: 8px 0 8px 0;
    cursor: pointer;
    border-bottom: 1px solid #dadde0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #dadde0;
    text-align: center;
    user-select: none; /* Disable text selection */
}

#tab_row > .tab:hover {
	background-color: #F5F5F5;
	border-top: 1px solid #F5F5F5;
	border-right: 1px solid #F5F5F5;
	border-left: 1px solid #F5F5F5;
}

#tab_row > .tab[status=selected] {
    background-color: #FFF;
	border-top: 1px solid #dadde0;
	border-right: 1px solid #dadde0;
	border-left: 1px solid #dadde0;
	border-bottom: 0px solid #FFF;
}

/* Miscellanous - text link buttons */

.elem-group {
	display: flex;
	width: 100%; /* (sub)Required for content (html link <a>) to stretch */
}

@media all and (max-width: 760px) {
	.elem-group {
		flex-direction: column;
	}
}

.link-alone,
.elem-group > a,
.elem-group > input {
	display: flex;
	width: 100%;
	justify-content: center;
    padding: 8px;
    margin-top: 14px;
    text-align: center;
    line-height: 2;
	border-radius: 100px;
	box-sizing: border-box; /* Padding will not impact div width */
	box-shadow: var(--gc-shadow);; ;
}

.link-alone:hover,
.elem-group > a:hover,
.elem-group > input:hover {
	box-shadow: var(--gc-shadow);
}

.elem-group > a:not(:last-child),
.elem-group > input:not(:last-child){
	margin-right: 10px;
}

.elem-group > a {
	color: #064184;
    background-color: #FFF;
}

.elem-group > a:hover {
    background-color: var(--gc-color-primary-soft);
}

/* Miscellanous - notifications */

.form_notif_error {
	width: 100%;
    margin-top: 8px;
    color: #FFF;
    background-image: url(/core/gui/img/form/form_notif_arrow-white.png);
    background-position: top 8px center;
    background-repeat: no-repeat, no-repeat;
    background-color: #e6422e;
    padding: 14px 8px 8px 8px;
    text-align: center;
    display: none;
    box-sizing: border-box;
    border-radius: 20px;
}

.form_notif_info {
	width: 100%;
    margin-top: 8px;
    color: #064184;
    background-image: url(/core/gui/img/form/form_notif_arrow-blue.png);
    background-position: top 8px center;
    background-repeat: no-repeat, no-repeat;
    background-color: #E9F0FA;
    padding: 14px 8px 8px 8px;
    text-align: center;
    display: none;
    box-sizing: border-box;
    border-radius: 20px;
}

.form_notif_info a {
	padding: 8px;
    margin-top: 4px;
    border-radius: 20px;
    cursor: pointer;
    background-color: #FFF;
}

#form_title {
	margin-top: 12px;
}

/**
 * Form - Icons
 */
 
.form_nickname {
	background-image: url("/core/gui/img/form/form_input_login.png"); 
	background-repeat: no-repeat;
	background-position: left 10px center;
	padding-left: 34px !important;
}

.form-input-icon {
	position: relative;
	margin-top: 10px;
}

.form-input-icon::before {
	position: absolute;
	top: 50%;
	left: 10px;
	z-index: 1;
	width: 21px;
	height: 22px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
}

.form-input-icon--nickname::before {
	background-image: url("/core/gui/img/form/form_input_login.png");
}

.form-input-icon--password::before {
	background-image: url("/core/gui/img/form/form_input_password.png");
}

.form-input-icon > input,
.form-input-icon > input:hover,
.form-input-icon > input:focus,
.form-input-icon > input:autofill,
.form-input-icon > input:-webkit-autofill {
	margin-top: 0;
	background-image: none;
}

.form_password {
	background-image: url("/core/gui/img/form/form_input_password.png"); 
	background-repeat: no-repeat;
	background-position: left 10px center;
	padding-left: 34px !important;
}

.form_email {
	background-image: url("/core/gui/img/form/form_input_email.png"); 
	background-repeat: no-repeat;
	background-position: left 10px center;
	padding-left: 34px !important;
}

.form_localization {
	background-image: url("/core/gui/img/form/form_input_localization.png"); 
	background-repeat: no-repeat;
	background-position: left 10px center;
	padding-left: 34px !important;
}

.form_questionmark {
	width: 12px;
	height: 12px;
	margin-left: 4px;
	background-image: url("/core/gui/img/form/form_label_questionmark.png"); 
	background-repeat: no-repeat;
	display: inline-block; /* Required when this class is used in subheader */
}

/**
 * Form - Form fields with notification for validation
 */

.submit_collection_option_oneclick,
.submit_with-confirmation,
.submit_with-confirmation_validation {
    width: 100%;
    padding: 8px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
}

.submit_collection_option_oneclick,
.submit_with-confirmation {
    background-color: #FFF;
    border: 1px solid var(--gc-color-primary);
}

.submit_with-confirmation_validation {
	color: #FFF;
    background-color: #4DAD5B;
    border: 1px solid #4DAD5B;
}

.submit_collection_option_oneclick:hover,
.submit_with-confirmation:hover,
.submit_with-confirmation_validation:hover {
	background-color: #57b24e;
	border-color: #57b24e;
	color: #FFF;
}

.submit_with-confirmation_validation {
	display: none;
}

.submit_with-confirmation_cancel {
	padding: 8px;
	margin-top: 4px;
	border-radius: 20px;
	cursor: pointer;
	background-color: #d6e1f3;
}

.submit_with-confirmation_cancel:hover {
	background-color: #FFF;
}

.form_field_option_oneclick,
.form_field_with-confirmation, 
.form_field_with-notification {
	margin-top: 12px;
}