#banner {
    animation: elegantColorChange 10s infinite linear;
    background-color:#000;
}

#banner::after {
    content: none; /* Resetting the content property */
}

@keyframes elegantColorChange {
    0% {
        filter: hue-rotate(0deg) saturate(1);
    }
    25% {
        filter: hue-rotate(90deg) saturate(1.2);
    }
    50% {
        filter: hue-rotate(180deg) saturate(1.4);
    }
    75% {
        filter: hue-rotate(270deg) saturate(1.6);
    }
    100% {
        filter: hue-rotate(360deg) saturate(1);
    }
}

/**
 * Element - Large icons
 */
#category_elements {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjust this to control alignment */
    margin-top: 30px;
    gap: 30px; /* Ensures a 30px gap between items */
}

#category_elements > .element {
    display: flex;
    flex-direction: column;
    position: relative; /* This ensures that .title is positioned relative to .element */
    min-width: calc((100% - 200px) / 5);
    height: 180px;
    color: #FFF;
    text-align: center;
    font-size: 100%;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    box-shadow: 0 0 20px 0 #e1e1e1;
    cursor: pointer;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

#category_elements > .element img {
    height: 100%;
    border-radius: 20px;
}

#category_elements > .element > .title {
    width: calc(100% - 16px); /* Adjust width to account for border */
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #2671BB;
    border-radius: 100px;
    position: absolute;
    bottom: 0;
    border: 8px solid white;
    left: 0; /* Ensure title starts from the left edge */
    right: 0; /* Ensure title extends to the right edge */
    margin: auto; /* This will help in centering the title */
}

#category_elements > .element:hover > .title {
	background-color: #fcdf10;
	color: #064184;
}

@media all and (max-width: 500px) {
    #category_elements {
        justify-content: center;
    }

    #category_elements > .element {
        min-width: calc((100% - 90px) / 2);
        height: 110px;
        width: 110px;
    }
}


select[css-disabled] {
	color:grey;
	user-select: none;
	pointer-events: none;
}

.body-row_main{
	background-color: #FFF;
	text-align: center;
	padding: 10px;
	color: #323a45;
	box-shadow: 0 6px 10px 0 #E0E0E0;
}

.body-row_sub {
	background-color: #FFF;
	text-align: center;
	padding: 10px;
	color: #323a45;
	box-shadow: 0 0 20px 0 #e1e1e1
}

.body-row_sub img {
    max-width: 1000px;
    width: 100%;
    height: auto;
}

.effect_1 {
	display: none;
}

#category_elements > .element:hover[type=dex] > .title {
	background-color: #fcdd3b;
	color: #064184;
}

#dex_searchbar {
	display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

#dex_searchbar .filter {
	display: flex;
	width: 100%;
}

#dex_searchbar .filter input[type=submit] {
	width: auto;
	margin-top: 0;
	margin-left: 8px;
}

#dex_searchbar .filter > #name {
	display: flex;
	width: 110px;
	align-items: center;
	justify-content: center;	
}

#search_viewmore {
	display: flex;
	align-items: center;
	min-width: 90px;
	padding-left: 32px;
    margin-left: 8px;
	color: #064184;
	background-image: url(/features/dex/gui/img/searchbar_action_filtering.png);
	background-repeat: no-repeat;
	background-position: left 6px center;
	cursor: pointer;
	user-select: none;
	border-radius: 12px;
}

#search_viewmore:hover {
	background-color: #FCDD3B;
}

#search_sub {
	display: none;
}

#search_sub input, #search_sub select {
	width: 280px;
}

#search_sub .filter {
	padding-top: 6px;
}

#dex_elements {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; /* Override this default setting : align-items: stretch. Required for each element to have its own height */
}

#dex_elements .element {
	width: 256px;
	background-color: #FFF;
	padding: 10px;
	margin-top: 30px;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
}

#dex_elements .element .mandatory {
	margin-top: 6px;
	text-align: right;
	font-size: 90%;
	color: #3D3D3D;
}

.new-element {
  animation: animateElement linear .3s;
  animation-iteration-count: 1;	
}

#element-facilitate {
	margin-top: 0 !important;
}

@keyframes animateElement{
  0% {
    opacity:0;
    transform:  translate(0px,10px);
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px);
  }
}

#dex_elements .element .illustration {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 0;
    border-left: 1px solid #dadde0;
    border-bottom: 1px solid #dadde0;
    border-right: 1px solid #dadde0;
    box-sizing: border-box;
    background-color: #FFF;
    color: #777777;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 4px;
}

#dex_elements .element .illustration img {
	max-width: 245px;
	max-height: 350px;
}

#dex_actions {
    position: fixed;
    left: 10px;
    bottom: 0;
	z-index: 1; /* Display button hover faded select language element */
	display: flex;
	user-select: none; /* Disable selection on click */
	flex-direction: column;
}

#dex_actions > .dex_button {
	margin: 0 8px 10px 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
    color: #FFF;
	cursor: pointer;
	border-radius: 30px;
}

#dex_actions > .dex_button > .container {
	display: table;
}

#dex_actions > .dex_button > .container:hover {
	box-shadow: 0 0 0 0;
}

#dex_actions > .dex_button > .container > #icon {
	display: flex;
    margin: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    background-image: url('/features/dex/gui/img/element_add.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    image-rendering: pixelated; /* Improve image quality (remove blur) */
}

#dex_actions > .dex_button > .container > #text {
	display: table-cell;
	vertical-align: middle;
	padding-right: 8px;
}

#dex_actions > #insert-element {
	background-color: #1895da;
}

#dex_actions > #insert-element:hover {
	background-color: #149cea;
}

#dex_actions > #insert-element > .container > #icon {
    background-position: center center;
}

/*input[action=dex_element_submit] {
    background-color: #4DAD5B;
}

input[action=dex_element_submit]:hover {
    background-color: #53b543;
}

input[action=dex_element_submit] {
    background-color: #4DAD5B;
}

/*.element .notification[type=error] {
    background-color: red;
}

.element .notification[type=loading] {
    background-color: grey;
}

.element .notification[type=success] {
    background-color: grey;
}*/

.dex_element_close {
    width: 20px;
    height: 20px;
    background-image: url(/features/dex/gui/img/element_close.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 20px;
    float: right;
    margin: -16px;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
    cursor: pointer;
}

.dex_element_language {
	display: flex;
	align-items: center;
}

.dex_element_language > .add {
	width: 26px;
	height: 26px;
    background-image: url(/features/dex/gui/img/element_language_add.png);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
    image-rendering: pixelated;
}

.dex_element_language > .submit {
    background-color: #1895da;
    padding: 8px;
    border-radius: 12px;
    margin-left: 4px;
    color: #FFF;
    cursor: pointer;
}

.dex_element_language > .cancel {
	width: 26px;
    height: 26px;
    background-image: url(/features/dex/gui/img/element_language_cancel.png);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
	transform: rotate(45deg);
}

.dex_element_language > .remove {
	width: 18px;
	height: 26px;
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: right center;
	margin-right: 4px;
}

.dex_element_language > .remove[enabled=yes] {
	background-image: url(/features/dex/gui/img/element_language_delete_enabled.png);
	cursor: pointer;
}

.dex_element_language > .remove[enabled=no] {
	background-image: url(/features/dex/gui/img/element_language_delete_disabled.png);
}

.dex_element_code {
	text-align: right;
	font-size: 80%;
	color: grey;
	margin-top: 4px;
}

.dex_element_notification {
    width: 100%;
    margin-top: 12px;
    color: #072666;
    background-color: #E9F0FA;
    padding: 6px 8px 8px 6px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 12px;
}

.dex_element_notification a {
	text-decoration: underline;
}

.dex_element_subnotification {
	width: 100%;
    margin-top: 12px;
    color: darkslategray;
    background-color: #F6F6F6;
    padding: 6px 8px 8px 6px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 12px;
}

.dex_element_subnotification a {
	text-decoration: underline; 
}

.element_submit[action=action_dex_element_refuse] input[type=submit] {
	background-color: #e6422e;
	color: #FFF;
}

.element_submit[action=action_dex_element_refuse] input[type=submit]:hover {
	background-color: #ed1d08;
	color: #FFF;
}

/* Init display */
.selection_language_add, .cancel, .submit, 
.illustration > .form_field, 
.illustration > img,
.element_submit_confirmation {
	display: none;
}

.illustration > .form_field[status=selected], 
.illustration > img[status=selected] {
	display: block;
}

/* History Tab */

.row_history .category {
    min-width: 70px;
    margin: auto;
    text-align: center;
}

.row_history .name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8px;
    width: 100%;
	cursor: pointer;
	user-select: none;
}

.row_history .name:hover {
	color: red;	
}

.row_history .language {
    max-width: 60px;
    width: 100%;
    margin: auto;
    text-align: center;
}

.row_history .element_code {
    min-width: 150px;
    margin: auto;
}

.row_history .user {
    display: flex;
    max-width: 150px;
   	width: 100%;
    margin: auto;
    margin-left: 8px;
}

.row_history .user > .nickname {
	width: 100%;	
	display: flex;
	flex-direction: column; /* (sub)Required by justify-content: center ; especialy required here for small screen - when row takes multiples lines */
	justify-content: center; /* vertical centering */
}

.row_history .comment {
	display: flex;
	flex-direction: row;
    justify-content: center;
	min-width: 90px;
	margin: auto;
	user-select: none;
}

.row_history .comment .icon {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-image: url(/features/dex/gui/img/dex_comment.png);
    margin : 0 4px 0 4px;
}

.row_history .comment #comment_pending {
	background-size: 200% auto;
    background-position: -28px 0;
}

.row_history .comment #comment_completed {
	background-size: 200% auto;
    background-position: 0 0;
    cursor: pointer;
}
.row_history .status {
	display: flex;
    flex-direction: row;
    justify-content: center;
    min-width: 90px;
    margin: auto;
    user-select: none;
}

.row_history .status .icon {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-image: url(/features/dex/gui/img/dex_moderation.png);
    margin : 0 4px 0 4px;
}

.row_history .status #dex_pending {
	background-size: 200% auto;
    background-position: 0 0;
}

.row_history .status #dex_validated {
	background-size: 200% auto;
    background-position: 0 -28px;
}

.row_history .status #dex_refused,
.row_history .status #dex_canceled {
	background-size: 200% auto;
    background-position: 0 -56px;
}

/* Previously pending, validated via new version */
.row_history .status #dex_replaced {
	background-size: 200% auto;
    background-position: 0 -84px
}

/* Previously validated */
.row_history .status #dex_replaced-validated {
	background-size: 200% auto;
    background-position: -28px -28px;
}

/* Previously refused */
.row_history .status #dex_replaced-refused {
	background-size: 200% auto;
    background-position: -28px -56px;
}

.row_history .status #marketplace_published {
	background-size: 200% auto;
    background-position: 0 -112px;
}

.row_history .status #marketplace_pending {
	background-size: 200% auto;
    background-position: 0 -140px;
}

.row_history .status_history {
    display: flex;
    flex-direction: column;
    justify-content: center;
	cursor: pointer;
}

.row_history .status_history .icon {
    width: 48px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url(/features/dex/gui/img/dex_history.png);
}

.row_history .status_history #new {
	background-size: 100% auto;
    background-position: 0 0;
}

/* Used in comments.php */
.row_history .comment {
	width: 200px;
    margin: auto;
    padding: 0 6px 0 6px;
}

/* Used in comments.php */
.row_history .date {
    min-width: 120px;
    margin: auto;
    text-align: center;
}

/* The status_dex *validated* element can be the last *update* element or a *common* element */
.update-container[status=collapsed] > .row_history > .status_history #update,
.update-container[status=collapsed] > .row_history > .status_history #common {
	background-size: 100% auto;
    background-position: 0 -24px;
}

/* The status_dex *validated* element can be the last *update* element or a *common* element */
.update-container[status=expanded] > .row_history > .status_history #update,
.update-container[status=expanded] > .row_history > .status_history #common {
	background-size: 100% auto;
    background-position: 0 -48px;
}

.row_history .status_history .icon {
	background-size: 100% auto;
    background-position: 0 -72px;
}

.update-container > .update-container_child {
	background-color: #F7F7F7;
	padding: 8px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	margin-bottom: 6px;
}

.update-container > .update-container_child .row_history:hover {
	background-color: #FFF;
}

.update-container[status=collapsed] > .update-container_child {
	display: none;
}

.update-container[status=expanded] > .row_history {
	background-color: #FCDF10 !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.element_submit_confirmation > .confirmation-field {
    width: 100%;
    display: flex;
    color: #064184;
    overflow: hidden;
    margin-top: 12px;
}

.element_submit_confirmation > .confirmation-field > input[type=submit],
.element_submit_confirmation > .confirmation-field > input[type=button] {
	max-width: 110px;
	margin-top: 0px; 
	margin-left: 8px;
}

.element_submit_confirmation > .confirmation-field > .cancel {
	display: flex;
	align-items: center;
	justify-content: center;
    margin-left: 8px;
	cursor: pointer;
}

/* Facilitator Tab */

.row_facilitator .representation {
    display: flex;
    flex-direction: column;
    justify-content: center;
	cursor: pointer;
}

.row_facilitator .representation .icon {
    width: 24px;
    height: 24px;
    margin-right:10px;
    background-repeat: no-repeat;
    background-image: url(/features/dex/gui/img/dex_facilitator.png);
	background-size: 100% auto;
    background-position: 0 0;
}

.row_facilitator .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-style: italic;
    color: #3D3D3D;
	cursor: pointer;
	user-select: none;
}

.row_facilitator .user {
    display: flex;
    min-width: 140px;
    margin: auto;
}

.row_facilitator .user > .nickname {
	width: 100%;	
	display: flex;
	flex-direction: column; /* (sub)Required by justify-content: center ; especialy required here for small screen - when row takes multiples lines */
	justify-content: center; /* vertical centering */
}

.row_facilitator .comment {
	display: flex;
	flex-direction: row;
    justify-content: center;
	min-width: 90px;
	margin: auto;
	user-select: none;
}

.row_facilitator .comment .icon {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-image: url(/features/dex/gui/img/dex_comment.png);
    margin : 0 4px 0 4px;
}

.row_facilitator .comment #comment_pending {
	background-size: 200% auto;
    background-position: -28px 0;
}

.row_facilitator .comment #comment_completed {
	background-size: 200% auto;
    background-position: 0 0;
}

.row_facilitator .status {
	display: flex;
	flex-direction: row;
	justify-content: center;
	min-width: 90px;
	margin: auto;
	user-select: none;
}

.row_facilitator .status .icon {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-image: url(/features/dex/gui/img/dex_moderation.png);
    margin : 0 4px 0 4px;
}

.row_facilitator .status #dex_pending {
	background-size: 200% auto;
    background-position: 0 0;
}

.row_facilitator .status #dex_validated {
	background-size: 200% auto;
    background-position: 0 -28px;
}

.row_facilitator .status #dex_refused {
	background-size: 200% auto;
    background-position: 0 -56px;
}

.row_facilitator .status #marketplace_validated {
	background-size: 200% auto;
    background-position: 0 -84px;
}

.row_facilitator .status #marketplace_pending {
	background-size: 200% auto;
    background-position: 0 -112px;
}

.dex_facilitator_description_title {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F5F5F5;
	border-radius: 12px;
	padding: 6px 0 6px 0;
}

.dex_facilitator_description_content {
	background-color: #F5F5F5;
}

input[action=action_dex_facilitator_refuse] {
	background-color: #e6422e;
	color: #FFF;
}

input[action=action_dex_facilitator_refuse]:hover {
	background-color: #ed1d08;
	color: #FFF;
}
  
/* Breacks cookie consent */
/*span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.1s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}*/

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

label select:hover,
label input:hover
{
	background-color:#FFF !important;
}

label select,
label input,
label textarea,
label time {
	/*padding: 8px;*/
	border: 0px;
	margin-top: 0px; /* Required for textarea facilitator mode */
}

label select {
	border: 0px;
	box-sizing: border-box;	
}

/* Label / Placeholder Handling */
/* Source : https://stackoverflow.com/questions/42233488/move-placeholder-above-the-input-on-focus*/

label {
	width: 100%;
	position: relative;
	display: inline-block;
	border: 1px solid #dadde0;
	margin-top: 16px;
}

label .label_title {
	position: absolute;
	top:-10px;
	left: 6px;
	background-color:white;
	padding:0 6px 0 6px;
	color: #064184;
	border-radius: 12px;
	font-size: 90%;
}

label:hover .label_title {
	color: #064184;
}

label .pcomment {
	padding: 10px;
	font-size: 110%;
}

#dex_search_shortcuts {
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-end;
}

#dex_search_shortcuts > .shortcut {
	margin: 10px 0 0 10px;
	padding: 6px;
	font-size: 90%;
	color: #064184;
	border-radius: 12px;
	background-color: #FFF;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
}

/* Width : 960px and more */
@media all and (max-width:960px) {
	.content_data .element_code,
	.content_data .user_facilitator,
	.content_data .comment,
	.content_data .status  {
		display: none;
	}
}

.preview {
	padding: 7px;	
}

#pagination {
	display: flex;
	justify-content: center;
	overflow-x: auto;
	margin-top: 30px;
	background-color: #FFF;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);; ;
	border-radius: 50px;
}

#pagination a,
#pagination .page_current {
	display: flex;
    height: 36px;
    min-width: 36px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
	border-radius: 50px;
	margin: 4px;
}

#pagination a.page_number {
	background-color: white;
}

#pagination a.page_number:hover {
	background-color: #E9F0FA;
}

#pagination a.page_button {
	background-color: #E9F0FA;
	padding-left: 10px;
	padding-right: 10px;
}

#pagination .page_current {
	padding-left: 10px;
	padding-right: 10px;
	background-color: #3b7ec1;
	color: #FFF;
}

#pagination input {
	width: 36px;
	border-radius: 50px;
	margin: 4px;
	text-align: center;
}

#pagination input[type=submit] {
	display: none;
}