/* AK - This file contains styles that have been adopted from the 3.7 stylesheets after 
being modified or styles that are used only on the Legacy 3.8 pages (and not on the React part of the app) */

/* results page */

.MainWrapper {
  display: flex;
  justify-content: center;
}

.LeftSection {
  width: 250px;
  height: auto;
  background-color: #878787;
}

.CentreSection {
  width: 900px;
  background-color: #bdc1e0;
}

.RightSection {
  width: 250px;
  height: auto;
  background-color: #878787;
}

#MainContents {
  background-color: #9fdaee;
}

.resultsPage_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#fadeMessage {
  /* adjust font */
  background-color: var(--color-background);
  border-radius: 6px;
  border: none;
  margin: 3px 0px 0px 0px;
  padding: 0.5em;
  box-shadow: 3px 3px 6px #00000029;
  /* AK - Changed in order to enable modal window */
  /* position: inherit; */
  top: 0;
  z-index: 100;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
}

.MainForm {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  /* AK added to give some padding to the form on search history page */
  padding-right: 20px;
}

/* Account page */

.accountPage_heading {
  height: 66px;
  border-bottom: 1px solid #c1c5c7;
  padding-top: 30px;
  padding-left: 39px;
  padding-right: 39px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.accountPage_heading h1 {
  font-size: 24px;
  color: #354156;
}

.accountPage_heading a {
  color: var(--color-core);
  font-size: 20px;
}

@media only screen and (max-width: 35em) {
  .MainForm {
    padding-left: 0px;
    padding-right: 0px;
  }

  .MainForm h1 {
    padding-left: 5px;
  }

  .accountPage_heading {
    border: none;
    justify-content: center;
  }
  .accountPage_heading h1 {
    font-size: var(--font-size-m);
  }
  .circdetailwrap {
    border: none;
  }

  .alloytbl {
    border-collapse: collapse;
  }

  #circsel {
    margin-top: 0px;
    position: sticky;
    top: 82px;
    z-index: 8;
    background: #ddf1fd;
    padding: 5px 5px 5px 5px;
    border-radius: 4px;
  }

  .circdetailwrap {
    background-color: white;
  }

  #secondaryBar {
    background-color: var(--color-background-darker);
  }

  #secondaryBar ul {
    justify-content: space-around;
    gap: 15px;
    padding: 10px 0px 10px;
  }

  #secondaryBar li {
    border: none;
    padding: 0px;
    flex: 1 1 115px;
  }

  #secondaryBar li a {
    padding: 0px;
  }
  #secondaryBar #current a,
  #secondaryBar #currentFirst a {
    padding: 0px;
  }
}

/* end Account page */

/* input, textarea */
.reset_password_wrapper input,
textarea,
select {
  border: solid 1px #ccc;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
}

.reset_password_wrapper input::placeholder {
  color: #c2c2c2;
}

.reset_password_wrapper input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2pt rgb(49, 132, 253, 0.5);
}

.reset_password_wrapper input[disabled],
textarea[disabled] {
  background-color: #f5f5f5;
  box-shadow: none;
  color: #7a7a7a;
  cursor: not-allowed;
}

/* input error */
.reset_password_wrapper input.error,
textarea.error,
select.error {
  border-color: #dc3545;
}

.reset_password_wrapper input.error:focus,
textarea.error:focus,
select.error:focus {
  box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

/* input success */
.reset_password_wrapper input.success,
textarea.success,
select.success {
  border-color: #198754;
}

.reset_password_wrapper input.success:focus,
textarea.success:focus {
  box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

.reset_password_wrapper h1 {
  margin-bottom: 10px;
}

.reset_password_wrapper ul {
  padding-top: 15px;
  padding-bottom: 15px;
  list-style: none;
}

.reset_password_wrapper li {
  margin-bottom: 10px;
  color: var(--color-core);
}

/* end Reset Password Page */

/* GoogleBooks  */
/* hide the links when not available */
.google {
  color: var(--text-color-main);
}
.googlehidden {
  display: none;
}
/* end GoogleBooks */

/* ContactDetailsModal */

.contact_details_Wrapper {
  /* background: lightgray; */
  padding: 10px;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-m);
}
.contact_details_Wrapper hr {
  background-color: var(--text-color-secondary-lighter);
  height: 2px;
  border: none;
}

.contact_details_Title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.contact_details_Address {
  font-family: inherit;
  display: block;
  width: 240px;
  text-align: left;
  padding: 20px 0px 20px 0px;
}

.contact_details_PhoneNumbers {
  padding: 10px 0px 10px 0px;
}

.contact_details_PhoneNumbers p {
  margin-bottom: 15px;
}

.contact_details_Notes {
  padding: 10px 0px 5px 0px;
}

.contact_details_Select select {
  width: 100%;
  font-size: var(--font-size-s);
  padding: 5px;
}

@media screen and (max-width: 35em) {
  .contact_details_Wrapper {
    width: 100%;
    font-size: var(--font-size-xs);
  }
  .contact_details_Title {
    font-size: var(--font-size-s);
  }
  .contact_details_Select select {
    font-size: (var--font-size-xs);
  }
}

/* end ContactDetailsModal */

/* toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 50px;
  height: 30px;
  position: relative;
  z-index: 2;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eaedee;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: 1px solid var(--color-core);
  height: 28px;
  border-radius: 16px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: -1px;
  top: -1px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: 1px solid var(--color-core);
  border-radius: 50%;
}

input:checked + .slider {
  /* background-color: #ccc; */
  background-color: var(--color-core);
}

input:focus + .slider {
  box-shadow: 0 0 1px #eaedee;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

@media only screen and (max-width: 35em) {
  .slider:before {
    height: 22px;
    width: 22px;
  }

  .slider {
    height: 22px;
  }

  .switch input {
    width: 47px;
    height: 23px;
  }

  .switch {
    width: 39px;
    height: 23px;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
  }
}

/* end toggle */

/* Results Page (Legacy) */

.results_page_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
  max-width: 1120px;
  margin: 0 auto;
}

.results_page_leftSection {
  height: 100%;
  flex: 0 0 81px;
}

.results_page_leftButtons {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 35px 35px 0px 0px;
  gap: 40px;
}

.results_page_leftButton {
  border: none;
  background-color: transparent;
  text-align: left;
  transition: all 0.2s;
  width: 40px;
}

.results_page_leftButton:hover {
  transform: scale(110%);
}

.svg_icon_leftControls {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: cover;
}

@media only screen and (max-width: 73.5em) {
  .results_page_leftSection {
    flex: 0 1 auto;
  }
  .results_page_leftButtons {
    padding-left: 10px;
    padding: 35px 15px 0px 15px;
  }
}

@media only screen and (max-width: 35em) {
  .results_page_wrapper {
    padding-top: 15px;
    flex-direction: column;
  }

  .results_page_leftSection {
    height: initial;
    flex: 0 0 33px;
  }

  .results_page_leftButtons {
    flex-direction: row;
    justify-content: flex-end;
    padding: 0px 15px 5px 0px;
    gap: 20px;
  }

  .svg_icon_leftControls {
    width: 22px;
    height: 22px;
  }
}

.results_page_centerSection {
  height: 100%;
  flex: 0 1 1039px;
}

.results_page_resultsSection {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.results_page_resultsHeader {
  width: 100%;
  height: 60px;
  font-size: 24px;
  padding: 25px 10px 10px 10px;
  color: var(--text-color-main);
}

@media screen and (max-width: 35em) {
  .results_page_resultsHeader {
    height: auto;
    font-size: var(--font-size-xs);
    padding: 5px 10px 5px 10px;
  }
}

.results_page_results {
  flex-grow: 1;
  background-color: white;
  border: 1px solid #eaedee;
  border-radius: 6px 6px 6px 6px;
  overflow: auto;
  height: auto;
  scrollbar-gutter: stable;
}

.results_page_messageBanner {
  max-height: 100px;
  height: auto;
  padding: 0px 33px 0px 31px;
  background-color: var(--message-banner-colour);
  color: #ffffff;
  font-size: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.results_page_header {
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  padding: 8px 28px 8px 8px;
}

.results_page_header .svg_icon {
  width: 25px;
  height: 25px;
}

.results_page_header button {
  border: none;
  background-color: transparent;
}

.results_page_results_grid {
  /* max-width: 1366px; */
  padding: 20px 28px 25px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 21px;
}

.results_page_results_footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  font-size: 24px;
  color: var(--text-color-main);
  margin: 10px 0px;
  gap: 35px;
}

.results_page_results_footer a {
  color: var(--color-core);
}

.results_page_gridSingleRecord {
  border: none;
  text-align: left;
  font-family: helvetica;
  font-weight: 100;
  flex: 0 0 225px;
  height: 369px;
  background-color: var(--grid-item-background);
  box-shadow: 3px 3px 6px #00000029;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  padding-left: 2px;
  padding-right: 2px;
}

.results_page_gridSingleRecord:hover {
  background-color: var(--color-hover);
}

.results_page_gridSingleRecord .singleRecord_select {
  height: auto;
  padding: 6px 0px 12px 6px;
}

.gridSingleRecord_cover {
  width: 128px;
  height: 195px;
  margin-bottom: 23px;
  text-align: center;
}

.gridSingleRecord_title {
  text-align: center;
  max-width: 240px;
  height: 55px;
  color: var(--text-color-dark);
  font-size: var(--font-size-xs);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.gridSingleRecord_author {
  text-align: center;
  width: 211px;
  height: 27px;
  color: var(--text-color-dark);
  font-size: var(--font-size-xxs);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results_page_selectLabel {
  font-size: var(--font-size-m);
  font-size: 20px;
  color: var(--color-core);
  padding: 12px 0px 8px 43px;
}

.results_page_singleRecord {
  padding: 40px 30px 40px 43px;
  font-size: var(--font-size-xs);
  border-bottom: 1px solid #eaedee;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.results_page_singleRecord:hover {
  background-color: var(--color-hover);
}

.singleRecord_select {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: flex-start;
}

.singleRecord_dataWrapper {
  /* width: 725px; */
  flex: 1 1 725px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.singleRecord_fieldNames {
  color: var(--text-color-recordLabels);
  flex: 0 0 122px;
  /* align-self: flex-end; */
  text-align: right;
}

.singleRecord_fieldNames p {
  margin-top: 1rem;
}

.singleRecord_recordDetails {
  width: 469px;
  color: var(--text-color-main);
  /* align-self: flex-end; */
  padding: 0px 0px 0px 41px;
}

.singleRecord_recordDetails p {
  margin-top: 1rem;
}

.singleRecord_title {
  margin-top: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* this is not working correctly */
  /* width: calc(100vw - 1100px); */
  width: 600px;
  min-width: 216px;
  color: var(--text-color-main);
}

.singleRecord_title a {
  color: var(--text-color-main);
}

.singleRecord_cover {
  flex: 0 0 120px;
}

@media only screen and (max-width: 58em) {
  .results_page_singleRecord {
    padding: 20px 20px 20px 16px;
  }
  .results_page_selectLabel {
    display: none;
  }
}

@media screen and (max-width: 35em) {
  .results_page_singleRecord {
    padding: 20px 5px 10px 5px;
    font-size: var(--font-size-xxs);
    align-items: flex-start;
  }

  .singleRecord_fieldNames {
    flex: 0 0 74px;
  }

  .singleRecord_cover {
    flex: 0 0 70px;
  }

  .results_page_gridSingleRecord {
    flex: 0 0 152px;
    height: 225px;
    font-size: var(--font-size-xxxs);
    background-color: var(--grid-item-background);
  }

  .gridSingleRecord_title,
  .gridSingleRecord_author {
    width: 145px;
    font-size: var(--font-size-xxxs);
  }
}

@media only screen and (max-width: 23em) {
  .absolute_on_small_mobile {
    position: absolute;
  }
  .results_page_results_grid {
    padding: 20px 5px 25px 5px;
  }
  .results_page_gridSingleRecord {
    flex: 0 0 125px;
  }
  .gridSingleRecord_cover {
    width: 125px;
  }
  .gridSingleRecord_title,
  .gridSingleRecord_author {
    width: 125px;
    font-size: var(--font-size-xxxs);
  }
}

/* New singleRecord layout */

.singleRecord_data_grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  /* grid-template-rows: repeat(5, minmax(33px, auto)); */
  grid-template-rows: repeat(5, auto);
  line-height: 1.5;
}

.grid_item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.grid_item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.grid_item3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid_item4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.grid_item5 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.grid_item6 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.grid_item7 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.grid_item8 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.grid_item9 {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}

.grid_item10 {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
}

.grid_item11 {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
}

.grid_item12 {
  grid-column: 2 / 3;
  grid-row: 6 / 7;
}

.singleRecord_label {
  text-align: end;
  padding-top: 6px;
  padding-bottom: 6px;
}

.singleRecord_dataCell {
  padding-left: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.singleRecord_title_grid {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* this is not working correctly */
  /* width: calc(100vw - 1100px); */
  width: 600px;
  min-width: 216px;
  color: var(--text-color-main);
}

@media only screen and (max-width: 35em) {
  .singleRecord_dataCell {
    padding-left: 10px;
  }
}

/* end of singleRecord layout */

.singleRecord_view {
  height: 100%;
}

.singleRecord_view_navigationBar {
  height: 55px;
  border-top: solid 2px var(--color-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 25px;
  width: 919px;
  margin-right: auto;
  margin-left: auto;
}

.singleRecord_view_flexContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 22px 72px 72px 72px;
}

.singleRecord_view_mainData {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 100px;
  overflow: auto;
}

.singleRecord_view_imageSection {
  flex: 0 0 198px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-core);
  font-size: 20px;
  gap: 22px;
}

.singleRecord_view_imageSection form {
  /* width of the buttons' column */
  width: 90%;
}

.singleRecord_view_imageSection .button {
  /* width of the buttons' column */
  width: 100%;
}

.singleRecord_view_bookCover img {
  max-width: 198px;
  height: 100%;
}

.singleRecord_view_starRatingContainer img {
  width: 108px;
}

/* .singleRecord_view_stars {
  margin-top: 25px;
  margin-bottom: 7px;
  width: 108px;
} */

.singleRecord_view_shareButton {
  width: 30px;
  height: 34px;
}

.singleRecord_exportButton {
  background-color: transparent;
  border: none;
}

.singleRecord_view_dataSection {
  flex: 1 1 815px;
}

.singleRecord_view_dataSection h2 {
  color: var(--text-color-main);
  font-size: var(--font-size-m);
  font-weight: normal;
  margin-bottom: 2rem;
}

.singleRecord_view_dataSection p {
  font-size: var(--font-size-xs);
  margin-bottom: 2rem;
}

.singleRecord_view_accessionData {
  border: 1px solid #d9e1e3;
  margin-top: 20px;
  width: 100%;
}

.singleRecord_view_label {
  color: var(--text-color-main);
}

.singleRecord_view_data {
  color: var(--text-color-main);
}

/* .singleRecord_view_reserve {

} */

.singleRecord_view_reserve button {
  font-size: 20px;
  background-color: transparent;
  color: var(--color-core);
  border: 1px solid #bfc1bf;
  border-radius: 5px;
  padding: 7px 6px 6px 9px;
}

.singleRecord_view_accDataTable {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-xs);
  padding: 0px 30px;
  text-align: left;
}

.accDataTable_headerRow {
  height: 46px;
}

.singleRecord_view_accDataTable th {
  color: var(--text-color-main);
  padding: 3px 10px 3px 10px;
  font-weight: lighter;
}

.singleRecord_view_accDataTable td {
  color: var(--text-color-main);
  padding: 3px 10px 3px 10px;
  /* Prevent from overflow with long acc no's */
  max-width: 163px;
}

@media only screen and (max-width: 73.5rem) {
  .results_page_centerSection {
    flex: 0 1 100%;
    padding-right: 10px;
  }
  .singleRecord_view_navigationBar {
    width: auto;
  }
  .singleRecord_view_flexContainer {
    padding: 22px 20px 42px 20px;
  }

  .singleRecord_view_mainData {
    gap: 30px;
  }

  .singleRecord_view_dataSection {
    flex: 1 1 100%;
  }

  .results_page_results_footer {
    gap: 20px;
  }
}

@media only screen and (max-width: 48rem) {
  .singleRecord_view_imageSection {
    flex: 1 1 170px;
    gap: 18px;
  }

  .singleRecord_view_imageSection .button {
    font-size: var(--font-size-xxs);
  }
  .singleRecord_view_bookCover img {
    max-width: 100%;
  }

  .singleRecord_view_accDataTable {
    padding: 0px 5px;
  }

  .results_page_results_footer {
    gap: 10px;
  }
}

@media only screen and (max-width: 35rem) {
  .results_page_centerSection {
    padding-right: 0px;
  }
  .singleRecord_view_dataSection p {
    font-size: var(--font-size-xxxs);
    margin-bottom: 1rem;
  }
  .singleRecord_view_dataSection h2 {
    font-size: var(--font-size-s);
    margin-bottom: 1rem;
  }
  .singleRecord_view_dataSection .button {
    font-size: var(--font-size-xxxs);
    padding: 4px 4px 4px 4px;
  }
  .singleRecord_view_imageSection img {
    max-width: 100px;
  }
  .singleRecord_view_imageSection .button {
    font-size: var(--font-size-xxxs);
    padding: 4px 4px 4px 4px;
  }
  .results_page_results_footer {
    font-size: var(--font-size-s);
    margin: 0px;
  }
  .singleRecord_view_accDataTable {
    font-size: var(--font-size-xxxs);
  }
  .singleRecord_view_accDataTable th,
  .singleRecord_view_accDataTable td {
    padding: 0px 2px;
  }
  .fLabel th:first-child,
  .fDataS td:first-child {
    display: none;
  }
}

@media only screen and (max-width: 23em) {
  .singleRecord_view_flexContainer {
    padding: 10px 5px 10px 5px;
  }
  .singleRecord_view_mainData {
    gap: 6px;
  }
}

/* expand-collapse google desc */
.trimGoogleData {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.textExpandContainer {
  margin-bottom: 20px;
}

.singleRecord_view_dataSection .trimGoogleData {
  margin-bottom: 0px;
}

.textExpandContainer > label {
  cursor: pointer;
  color: var(--color-core);
  font-size: var(--font-size-xs);
}

.textExpandContainer > input[name="collapse"] {
  display: none;
}

.textExpandContainer > input[name="collapse"]:checked ~ label::before {
  content: "show less";
}

.textExpandContainer > label::before {
  content: "show more";
}

.textExpandContainer > input[name="collapse"]:checked ~ .trimGoogleData {
  -webkit-line-clamp: 180;
  transition: -webkit-line-clamp 0.5s;
}
/* endexpand-collapse google desc */

/* end Results Page (Legacy) */

/* common modal classes */

.modal_menu_header {
  height: 76px;
  border-bottom: solid 1px rgb(243, 244, 245);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 23px 0px 43px;
  color: var(--text-color-main);
}

.modal_menu_header h3 {
  font-size: var(--font-size-xl);
}

.modal_menu_header a {
  font-size: 2.125rem;
  color: #7d8ca5;
  text-decoration: none;
}

/* end common modal classes*/

/* export menu */

#modal_handle_exportMenu:target {
  opacity: 1;
  visibility: visible;
}

/* AK this is most likely not necessary here and in all other examples - test */
#modal_handle_exportMenu:target,
#modal_handle_exportMenu.modal_window {
  opacity: 1;
  transform: translateY(1);
}

.export_menu {
  position: fixed;
  width: 740px;
  /* height: 575px; */
  padding-bottom: 56px;
  z-index: 3;
  top: 14px;
  left: 174px;
}

.export_menu_mainSection {
  /* height: 464px; */
  border-bottom: solid 1px rgb(243, 244, 245);
  width: 100%;
  padding: 22px 0px 15px 68px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  color: var(--color-core);
}

.export_menu_citation {
  width: 100%;
}

.export_menu_mainSection_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* height: 60px; */
}

.export_menu_button {
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 11px;
  border-radius: 6px;
  font-family: inherit;
}

#custom-tooltip {
  display: none;
  margin-left: 40px;
  padding: 8px 16px;
  background-color: var(--main-color-shade);
  border-radius: 6px;
  color: #fff;
}

.export_menu_button:hover {
  /* background-color: var(--text-color-secondary-lighter); */
  color: black;
}

.svg_icon_exportMenu {
  display: inline-block;
  width: 44px;
  height: 44px;
  background-size: cover;
  margin-right: 55px;
}

@media only screen and (max-width: 58em) {
  .export_menu {
    width: 90%;
    top: initial;
    left: initial;
  }
  .export_menu_mainSection {
    padding: 22px 0px 0px 50px;
  }
}

@media only screen and (max-width: 35em) {
  .export_menu {
    width: 100%;
    height: 555px;
    top: 0px;
    left: 0px;
  }
  .export_menu .svg_icon {
    width: 20px;
    height: 20px;
  }
  .export_menu .modal_menu_header h3 {
    font-size: var(--font-size-m);
  }
  .modal_menu_header {
    padding: 0px 10px 0px 10px;
  }
  .export_menu_mainSection {
    padding-left: 10px;
  }
  .svg_icon_exportMenu {
    width: 26px;
    height: 26px;
    margin-right: 20px;
  }
}

/* end export menu  */

/* sort menu */

#modal_handle_sortMenu:target {
  opacity: 1;
  visibility: visible;
}

#modal_handle_sortMenu:target,
#modal_handle_sortMenu.modal_window {
  opacity: 1;
  transform: translateY(1);
}

.sort_menu {
  position: fixed;
  width: 725px;
  height: 300px;
  z-index: 3;
  top: 30vh;
  left: 10vw;
}

.sort_menu_mainSection {
  height: 100%;
  width: 100%;
  padding: 30px 95px 50px 122px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  gap: 35px;
}

.sort_menu_labels {
  color: #707070;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 53px;
}

.sort_menu_center {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.sort_menu_controls {
  color: #707070;
  text-align: center;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 45px;
}

.sort_menu_control {
  width: 555px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  /* the line below is temporary and will be removed when the sorting will get added */
  padding-right: 95px;
}

.sort_menu_buttonWrapper {
  text-align: right;
}

#SortOrder2 {
  width: 500px;
  padding: 6px;
  border-radius: 6px;
  background-color: var(--color-background);
  color: var(--color-core);
  font-size: 18px;
}

@media only screen and (max-width: 58em) {
  .sort_menu {
    width: 580px;
    top: initial;
    left: initial;
  }
  .sort_menu_mainSection {
    padding: 30px 95px 50px 50px;
  }
}

@media only screen and (max-width: 35em) {
  .sort_menu {
    width: 100%;
    height: 300px;
    top: 0px;
    left: 0px;
  }
  .sort_menu .modal_menu_header h3 {
    font-size: var(--font-size-m);
  }
  .sort_menu .svg_icon {
    width: 20px;
    height: 20px;
  }
  .sort_menu_mainSection {
    padding: 30px 10px 0px 10px;
  }
  .sort_menu_center {
    justify-content: center;
  }
  .sort_menu_control {
    flex: 1 1 auto;
    padding: 0px;
    justify-content: center;
  }
  .sort_menu_control #SortOrder2 {
    width: 100%;
    /* flex: 1 1 370px; */
  }
}

/* end sort menu */

/* BuildSearchForm adjustments*/

#advsrchfmSimple {
  font-size: 22px;
  color: var(--text-color-main);
}

#advsrchfmSimple table {
  height: 370px;
}

#advsrchfmSimple input {
  height: 28px;
  border: 1px solid #bfc1bf;
  border-radius: 4px;
}

#advsrchfmSimple tr {
  margin-bottom: 5px;
}

.buildSearch_menu_mainSection_legacy {
  width: 100%;
  padding: 8px 0px 0px 56px;
  font-size: 24px;
  color: var(--color-core);
}

.searchbox input {
  width: 516px;
}

.build_search_submitButton {
  margin-top: 10px;
  float: right;
  margin-right: 56px;
}

#advsrchfmSimple .mediumbox input {
  border: none;
  height: 1rem;
}

.mediumbox a {
  border-radius: 4px;
}

#advsrchfmSimple .searchbox .srchNumber {
  width: 130px;
}

/* those two classes below are the fix for build search window overflow. must be adjuted separately for mobile view */
.multiSelectOptions {
  height: 152px;
}

.multiSelectClose {
  padding-bottom: 0px;
}

/* end BuildSearchForm */
/* Font-Size corrections */

.libDetails {
  font-size: var(--font-size-m);
}

/* end of Font-Size corrections */

/* clear button styles for record item */
.clear_button {
  width: 100%;
  border: none;
  background-color: transparent;
  text-align: left;
  font-family: helvetica;
  font-weight: 100;
}

.no-navbar {
  margin-top: 0px;
}