::-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: 'Open Sans';
	color: #003399;
	background: #FFF;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	box-sizing: border-box; /* Padding will not impact div width */
	border-radius: 12px;
}

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;
}

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

select {
	width: 100%;
    padding: 8px 4px 8px 4px;
}

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

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

input:hover:enabled {
	background-color: #FFE200;
	border-color: #FFE200;
}

input[type=submit],
input[type=button], 
button {
	cursor: pointer;
	background-color: #4DAD5B;
	border: #4DAD5B;
	color: #FFF;
	margin-top: 12px;
	border-radius: 20px;
	padding: 12px 8px;
    /*display: block; /* Hack - force correct position (cf/see. Pokéchange DEX submit padding-top) */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
}

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: #003399 !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: #003399 !important;
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover {
	background-color: #57b24e;
	border-color: #57b24e;
	box-shadow: 0 0 0 0 #E0E0E0;
}

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

input[type=checkbox] {
    width: 40px; /* expands the clickable area*/
    height: 14px;
}

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%;
   	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: #FFE200;
	border-color: #FFE200;
}

/**
 * Form Elements
 */

.form_field {
	width: 100%;
	display: flex;
	color: #064184;
	margin-top: 8px;
	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: 130px;
	display: flex;
	align-items: center; /* Center text horizontaly */
	justify-content: center; /* Center text verticaly*/
	background-color: #F5F5F5;
	border-radius: 8px;
	margin-right: 8px;
	padding: 8px;
}

/* 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: 10px;
}

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

.form_field label:hover { 
	background-color: #fcdc3e;
	border-color: #fcdc3e;
}

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

.form_field .label_viewmore,
.form_field .label_viewless {
	display: none;
	padding: 8px;
	border-radius: 20px;
	cursor: pointer;
	border: 1px solid #F5F5F5;
	margin: 1px 0 1px 0; /* Top & Bottom same as labels */
	background-color: #F5F5F5;
}

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

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

.searchbar_highlighting:hover {
	background: #d4e2f2 !important;
	border-color: #d4e2f2 !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: 8px;
    border: 0;
}

.headlight input:hover, .headlight select:hover {
    background-color: #FFF;
}

.headlight input[type=submit] {
    background-color: #FFF;
    border: 1px solid #FFF;
	color: #003399;
}

.headlight input[type=submit]:hover {
    background-color: #2773b8;
    border: 1px solid #2773b8;
    color: #FFF;
}

/* 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: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
}

.link-alone:hover,
.elem-group > a:hover,
.elem-group > input:hover {
	box-shadow: 0 0 0 0 #E0E0E0;
}

.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: #fcdd3b; 
}

/* 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: #072666;
    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;
	padding-left: 25px !important;
}

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

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

.form_localization {
	background-image: url("/core/gui/img/form/form_input_localization.png"); 
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 22px !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 #2671BB;
}

.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;
}