/*################# LOGIN MODAL #################*/
[hidden] {
  visibility: hidden;
}

button {
  padding: 14px 20px;
  margin: 8px 0;
  border: 2px solid rgb(195 202 193);
  cursor: pointer;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: center;
}

c {
  cursor: pointer
}

.radius {
  border-radius: 12px;
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/*############# SIGN IN LINK ###############*/

span.signin_link {
  float: right;
  padding-top: 20px;
  margin-right: 50px;
  color: rgb(140 143 140);
}


span.cancel,
span.back {
  float: left;
  padding-top: 20px;
  margin-left: 50px;
}

/*############# FORGOT PASSWORD LINK ###############*/

.reset_psw_text {
  text-align: center;
  font-size: larger;
}

/*####### MODIFY AND ADD FORMS #######*/
form label>input[type=radio] {
  display: none;
}

.forms_button {
  display: flex;
  justify-content: center;
  background: #b6b7b2;
  width: 50px;
  cursor: pointer;
  padding: 5px;
}

.forms_button:hover,
.forms_button.selected {
  background: rgb(205, 138, 29);
}

.forms_button img {
  max-width: 69%;
}

.form_popup {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  color: #595959;
  top: 128px;
  border-radius: 0 0 25px 25px;
  border: 2px solid #d9d9d9;
  z-index: 3;
  max-height: 75vh;
  overflow-y: auto;
}

.form_popup:not(.popup_open) {
  display: none;
}

.form_popup.select_object {
  display: block;
  width: 300px;
  background: white;
}

.form_popup div:not(.popup) {
  position: relative;
}

.form_selection {
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 250px;
  padding: 10px;
  background: white;
  width: auto;
}

#select_database,
#select_type,
#select_context {
  left: 300px;
}

.form_centered {
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px;
  background: #f0f0f0;
  row-gap: 20px;
  column-gap: 35px;
  align-content: start;
  width: 62%;
}

.form_centered h3 {
  color: black;
  font-weight: bold;
}

.form_popup:not(.modify) .variable_element.element_modify,
.form_popup:not(.add) .variable_element.element_add,
.form_popup:not(.global) .variable_element.element_global,
.form_popup:not(.local) .variable_element.element_local,
.form_popup:not(.artefact) .variable_element.element_artefact,
.form_popup.artefact .variable_element.element_not_artefact,
.form_popup:not(.transformation) .variable_element.element_transformation,
.form_popup:not(.sort) .variable_element.element_sort,
.form_popup.transformation .variable_element.element_not_transformation {
  display: none;
}

.form_popup label {
  padding: 0 0 10px 10px;
  display: inline-block;
}

.label_comment {
  color: grey;
  font-weight: normal;
}

.field_description {
  font-style: italic;
}

.form_popup label.required {
  font-weight: bold;
}

.form_popup label.required span:not(.label_comment):after {
  content: "*";
  color: red;
}

.form_popup option:not(:checked):hover,
.form_popup option.selected:not(img) {
  background: linear-gradient(#f2f2f2, #f2f2f2);
  text-shadow: 2px 3px 5px grey;
  color: black;
  -webkit-text-fill-color: black;
  font-weight: bold;
  cursor: pointer;
}

.form_popup .list_search {
  width: 60%;
  justify-self: center;
  height: 30px;
  border-radius: 5px;
  border: 1px solid black;
  padding: 5px;
}

.form_popup .dropdown:not(.dropdown_open)~.dropdown_search,
.form_popup .dropdown:not(.dropdown_open)~.reset_search {
  display: none;
}

.form_popup .reset_search {
  position: absolute;
  right: 6px;
  padding: 9px 5px;
  border: none;
  background: none;
  cursor: pointer;
}

.form_popup .footer_btns {
  display: flex;
  justify-content: space-around;
}

.form_popup.form_centered:not(.form_selection) .footer_btns {
  grid-area: submit;
}

.form_popup .form_title {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.form_popup .form_title h3 {
  grid-row: 1;
}

.form_popup .form_title .form_entry {
  grid-row: 1;
}

.form_popup .form_title .form_entry:hover .entry_description {
  display: block;
  top: 30px;
  left: 0;
  padding-left: 10px;
  text-align: left;
  max-width: max-content;
  position: absolute;
}

.form_popup .form_title .form_entry .entry_description>input {
  padding-top: 0;
  width: 250px;
}

.form_popup .form_title .form_entry>input {
  font-size: 1.17em;
  padding-top: 0;
  font-weight: bold;
}

.form_popup .form_title .label_comment {
  grid-row: 2;
  max-width: 500px;
  grid-column: 1 / 12;
}

.btn {
  display: flex;
  justify-content: center;
  border-radius: 10px;
  background-color: #cbd5ca;
  border: none;
  background-image: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: 3px 3px 5px #989898;
  padding: 5px 15px;
  min-width: 96px;
  width: auto;
  color: #848484;
  cursor: pointer;
}

.btn:hover {
  font-weight: bold;
  box-shadow: 3px 3px 5px #666666;
}

.btn:disabled {
  pointer-events: none;
  filter: grayscale(1);
}

.btn.btn_delete {
  background-color: #be2424;
  color: #ececec;
}

.btn[type="reset"] {
  background-color: #cad5d4;
}

.form_selection .list_selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 5px;
}

.form_selection .list_selection option {
  padding-left: 10px;
}

#select_entry {
  row-gap: 15px;
}

#select_entry .list_selection {
  background-color: white;
  border: solid #d9d9d9 1px;
  border-radius: 20px;
  padding: 25px;
  max-height: 52vh;
  overflow: auto;
  min-height: 50vh;
}

#select_entry .list_selection .category {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 15px;
}

#select_entry .list_selection .category h4 {
  font-size: 1.12em;
}

#select_entry .list_selection option {
  position: relative;
}

#select_entry .list_selection .category option {
  padding-left: 30px;
}

#select_entry .list_selection option:hover+.popup {
  display: block;
  position: fixed;
  pointer-events: none;
  color: #595959;
  text-shadow: none;
  font-weight: normal;
  max-width: 800px;
}

.form_popup textarea {
  padding: 5px;
  resize: vertical;
}

.form_popup .dropdown {
  text-overflow: ellipsis;
  overflow: hidden;
}

.form_popup .dropdown,
.form_popup .dropdown_selection,
.form_popup textarea,
.form_popup input[type="number"],
.form_popup input[type="text"],
.form_popup input[type="file"],
.form_popup .dropdown_search {
  border: 2px solid #d9d9d9;
  font-family: 'Calibri Light';
  font-size: 16px;
  background: white;
  width: 100%;
}

.form_popup .dropdown,
.form_popup textarea,
.form_popup input[type="number"],
.form_popup input[type="text"],
.form_popup input[type="file"] {
  border-radius: 8px;
  text-align: left;
  justify-content: left;
}


.form_popup input[type="file"]::file-selector-button {
  cursor: pointer;
  margin-right: 10px;
  font-size: 14px;
}

.form_popup .dropdown:hover {
  background: #f0f0f0;
}

.form_popup .dropdown:active {
  background: white;
}

.form_popup .dropdown.dropdown_open {
  border-radius: 8px 8px 0px 0px;
}

.form_popup .dropdown:not(.dropdown_open)~.dropdown_selection {
  display: none;
}

.form_popup .dropdown_selection {
  position: absolute !important;
  border-radius: 0px 0px 8px 8px;
  z-index: 1;
  border-top: none;
  display: flex;
  flex-direction: column;
}

.form_popup .dropdown.search~.dropdown_selection .selected {
  order: 1;
}

.form_popup .dropdown.search~.dropdown_selection :not(.selected) {
  order: 2;
}

.form_popup .dropdown,
.form_popup .dropdown_selection option {
  cursor: pointer;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form_popup .dropdown_search,
.form_popup input[type="number"],
.form_popup input[type="text"],
.form_popup input[type="file"] {
  padding: 5px 10px;
}

.form_popup .dropdown_search {
  border-top: none;
}

.form_popup input[type="number"]:disabled,
.form_popup input[type="text"]:disabled,
.form_popup textarea:disabled {
  background: none;
  border: none;
  resize: none;
}

.form_popup .list_field .list_field_line:not([data-id]) {
  display: none !important;
}

#submit_reference {
  grid-template-areas:
    "title title"
    "name abbreviation"
    "name comments"
    "type comments"
    "category comments"
    "submit submit";
}

#submit_reference textarea,
#submit_artefact textarea,
#submit_artefact_name textarea,
#submit_evolution textarea,
#submit_collection textarea,
#submit_geo_artefact textarea,
#submit_analyst textarea {
  min-height: 120px;
}

#submit_context {
  grid-template-areas:
    "title title"
    "artefact dates"
    "type dates"
    "name dates"
    "comments information"
    "relevance ."
    "references dateReferences"
    "submit submit";
}

#submit_context textarea,
#submit_transformation textarea {
  min-height: 80px;
}

.form_popup .form_dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  column-gap: 20px;
}

.form_popup .form_dates>label {
  grid-row: 1;
  grid-column: 1 / 3;
}

.form_popup .form_dates .form_date {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
  position: relative;
}

.form_popup .form_dates .form_date> :nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.form_popup .form_dates .form_date> :nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

.form_popup .form_dates .form_date> :nth-child(3) {
  grid-row: 1;
  grid-column: 2;
}

.form_popup .form_dates .form_date> :nth-child(4) {
  grid-row: 2;
  grid-column: 2;
}

.form_popup .form_dates .form_date> :nth-child(5) {
  grid-row: 3;
  grid-column: 2;
}

.form_popup .form_dates .form_date .date_logo {
  background: url(../images/date_act.png);
  width: 85px;
  height: 65px;
  grid-row: 3;
  grid-column: 1 / 3;
  justify-self: center;
  margin-top: 20px;
}

.form_popup .form_dates .form_date input[type="number"]:placeholder-shown~.date_logo {
  background: url(../images/date_inact.png);
}

.form_popup .form_dates>img {
  grid-row: 3;
  grid-column: 1 / 3;
  justify-self: center;
  width: 320px;
}

.form_popup .new_reference,
.form_popup .upload_artefact {
  position: absolute;
  background: url(../images/add.png) no-repeat;
  background-size: 100%;
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  display: inline;
}

.form_popup .new_reference {
  right: 0;
}

#submit_artefact {
  grid-template-areas:
    "title title"
    "name references"
    "name people"
    "category comments"
    "collections comments"
    "comments_before comments_after"
    "image image_credits"
    "coordinates coordinates"
    "credibility description"
    "geonames description"
    "submit submit";

  .form_coordinates {
    grid-template-columns: repeat(8, 1fr);
  }
}

.form_coordinates {
  display: grid;
  column-gap: 10px;

  input {
    justify-self: flex-start;
    grid-row: 1;
  }

  label {
    justify-self: flex-end;
    grid-row: 1;
  }

  .leaflet-container {
    margin-top: 15px;
    height: 350px;
    grid-column: 3/7;
    grid-row: 2;

    .leaflet-top {
      z-index: 0;
    }
  }
}

#submit_artefact_name {
  grid-template-areas:
    "title title"
    "artefact comments"
    "name comments"
    "references comments"
    "submit submit";
}

#submit_evolution {
  grid-template-areas:
    "title title"
    "people comments"
    "information comments"
    "submit submit";
}

#submit_transformation {
  grid-template-areas:
    "title title"
    "type dates"
    "name dates"
    "references information"
    "comments dateReferences"
    "comments leveling"
    "modifications modifications"
    "submit submit";
}

#submit_transformation .form_type>* {
  margin-bottom: 20px;
}

#submit_transformation .form_modifications,
#submit_transformation .form_modifications .form_modification {
  display: grid;
  grid-template-columns: 2fr 1fr 6fr;
  column-gap: 30px;
  row-gap: 20px;
  position: relative;
}

#submit_transformation .form_modifications> :nth-child(1) {
  grid-row: 1;
  grid-column: 1 / 4;
}

#submit_transformation .form_modifications> :nth-child(2) {
  grid-row: 2;
  grid-column: 2;
}

#submit_transformation .form_modifications> :nth-child(3) {
  grid-row: 2;
  grid-column: 3;
}

#submit_transformation .form_modifications> :nth-child(4) {
  grid-row: 3;
  grid-column: 1/4;
}

#submit_transformation .form_modifications> :nth-child(5) {
  grid-row: 4;
  grid-column: 1/4;
}

#submit_transformation .form_modifications> :nth-child(6) {
  grid-row: 5;
  grid-column: 1/4;
}

#submit_transformation .form_modifications .form_modification> :nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2;
}

#submit_transformation_order {
  grid-template-areas:
    "title title"
    "transformationOrder transformationOrder"
    "submit submit";
}

#submit_transformation_order .form_transformation_order,
#submit_transformation_order .form_transformation_order .list_field .list_field_line {
  display: grid;
  column-gap: 30px;
  row-gap: 20px;
  position: relative;
}

#submit_transformation_order .form_transformation_order {
  grid-template-columns: 2fr 3fr 6fr 1fr;
}

#submit_transformation_order .form_transformation_order> :nth-child(1) {
  grid-row: 1;
  grid-column: 1/5;
}

#submit_transformation_order .form_transformation_order .list_field {
  grid-row: 3;
  grid-column: 2/5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#submit_transformation_order .form_transformation_order .list_field .list_field_line {
  grid-template-columns: 3fr 6fr 1fr;
}

#submit_transformation_order textarea {
  padding-left: 10px;
}

#submit_transformation_order .form_transformation_order .list_field .list_field_line.current textarea,
#submit_transformation_order .form_transformation_order .list_field .list_field_line.current input[type="text"] {
  font-weight: bold;
}

#submit_transformation_order .form_transformation_order input[type="text"] {
  align-self: start;
}

#submit_transformation_order .form_transformation_order>input[type="text"] {
  font-weight: bold;
}

#submit_state {
  grid-template-areas:
    "title title title"
    ". . ."
    "previousState previousState previousState"
    "state state state"
    "submit submit submit";
  grid-template-columns: 2fr 5fr 5fr;
  min-height: 28vw;
}

#submit_state .form_state>textarea,
#submit_state .form_state .form_transformation>textarea,
#submit_state .form_state>input[type="text"],
#submit_state .form_state .form_transformation>input[type="text"] {
  font-weight: bold;
}

#submit_state input[type="text"] {
  align-self: start;
}

#submit_state textarea {
  padding: 5px 10px;
}

#submit_state .form_previous_state,
#submit_state .form_state {
  display: grid;
  grid-template-columns: 2fr 5fr minmax(0, 5fr);
  column-gap: 30px;
}

#submit_state .form_previous_state .form_toggle {
  display: none;
}

#submit_state .form_state {
  grid-template-areas:
    ". . type"
    ". start relevance"
    ". variation name"
    ". variation references"
    ". specificity information"
    ". . translocation";
  align-items: flex-start;
}

#submit_state .form_state>* {
  margin-bottom: 20px;
}

#submit_analyst {
  grid-template-areas:
    "title title"
    "name comments"
    "surname comments"
    "information comments"
    "submit submit";
}

#submit_collection {
  grid-template-areas:
    "title title"
    "name contexts"
    "description comments"
    "submit submit";
}

#submit_geo_artefact {
  grid-template-areas:
    "title title"
    "name geonames"
    "coordinates comments"
    "description comments"
    "submit submit";

  .form_coordinates {
    grid-template-columns: repeat(6, 1fr);
  }
}

.form_popup:not(.form_selection)>h3,
.form_popup:not(.form_selection) .form_title {
  grid-area: title;
}

.form_popup .form_toggle,
.form_popup .form_toggle_id {
  grid-area: toggle;
  height: min-content;
}

.form_popup .form_name {
  grid-area: name;
}

.form_popup .form_surname {
  grid-area: surname;
}

.form_popup .form_abbreviation {
  grid-area: abbreviation;
}

.form_popup .form_abbreviation textarea {
  resize: none;
  min-height: 80px;
}

.form_popup .form_comments {
  grid-area: comments;
}

.form_popup .form_type {
  grid-area: type;
}

.form_popup .form_subtype {
  grid-area: subtype;
}

.form_popup .form_category {
  grid-area: category;
}

.form_popup .form_artefact {
  grid-area: artefact;
}

.form_popup .form_dates {
  grid-area: dates;
}

.form_popup .form_information {
  grid-area: information;
}

.form_popup .form_relevance {
  grid-area: relevance;
}

.form_popup .form_image {
  grid-area: image;
}

.form_popup .form_collections {
  grid-area: collections;
}

.form_popup .form_description {
  grid-area: description;
}

.form_popup .form_geonames {
  grid-area: geonames;
}

.form_popup .form_contexts {
  grid-area: contexts;
}

.form_popup .form_image img:not(.img_selected),
.form_popup .form_image_credits:not(.img_selected) {
  display: none;
}

.form_popup .form_image img {
  display: block;
  width: auto;
  max-height: 150px;
  margin: 15px auto 0;
}

.form_popup .form_image_credits {
  grid-area: image_credits;
}

.form_popup .form_comments_before {
  grid-area: comments_before;
}

.form_popup .form_comments_after {
  grid-area: comments_after;
}

.form_popup .form_coordinates {
  grid-area: coordinates;
}

.form_popup .form_path {
  grid-area: path;
}

.form_popup .form_identifier {
  grid-area: identifier;
}

.form_popup .form_geo_comments {
  grid-area: geo_comments;
}

.form_popup .form_credibility {
  grid-area: credibility;
}

.form_popup .form_number {
  grid-area: number;
}

.form_popup .form_translocation {
  grid-area: translocation;
}

.form_popup .form_start {
  grid-area: start;
}

.form_popup .form_variation {
  grid-area: variation;
}

.form_popup .form_leveling {
  grid-area: leveling;
}

.form_popup input[type='checkbox']+label,
.form_popup input[type='radio'],
.form_popup input[type='radio']+label {
  cursor: pointer;
}

.form_popup .form_toggle~.form_toggled:not(.visible) {
  display: none !important;
}

.form_popup .form_toggle_id~[class*='form_toggled']:not(.visible),
.form_popup .form_toggle_id~[class*='form_toggled'] [class*='form_toggled']:not(.visible) {
  display: none !important;
}

.form_popup .form_references {
  grid-area: references;
}

.form_popup .form_date_references {
  grid-area: dateReferences;
}

.form_popup:not(.form_selection) button[type='submit'] {
  grid-area: submit;
}

.form_popup .form_analysts {
  grid-area: people;
}

.form_popup .form_modifications {
  grid-area: modifications;
}

.form_popup .form_transformation_order {
  grid-area: transformationOrder;
}

.form_popup .form_state {
  grid-area: state;
}

.form_popup .form_previous_state {
  grid-area: previousState;
}

.form_popup .form_specificity {
  grid-area: specificity;
}