/* ---------- Basic Style Setting ---------- */

body
{
  line-height: 1.6;
}
h1, h2, h3, b
{
  text-transform: initial;
  margin-top: 13px;
  padding-bottom: 2px;
  padding-top: 0px;
  font-family: 'Roboto Slab', sans-serif;
}
h2
{
  font-size: 14pt;
  font-weight: 800;
}
h3
{
  font-weight: bold;
  font-size: 95%;
}
h4
{
  margin-top: 13px;
  font-weight: bold;
  font-size: 1rem;
}

div.widthrestrictiondefault, div.widthrestrictiononek /* Unset the max-width so we can use most of the screen space*/
{
  max-width: 100%;
}
div.narrowcontainer
{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* ---------- Header Setting ---------- */

/* Temporary banner styling */
div#tempnousercontribution
{
  animation: flickerAnimation 3s infinite;
  text-align: center;
  background: rgb(191, 30, 45);
  color: white;
  padding: 10px 5vw;
}

/* Logo padding and positioning */
div#headertopcell
{
  padding: 0px 10px 0px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  float: right;
}

/* Language, navbar collapsed, and user links style */
div#toprightlinks
{
  padding-top: 5px;
  height: 100%;
  text-transform: uppercase;
  color: #B0B0B0;
  font-size: 90%;
  z-index: 5;
}
div#toprightlinks a
{
  color: #454545;
  padding: 2px;
}
div#toprightlinks a.active
{
  background-color: #E0E0E0;
}
div#toprightlinks a.pageactive
{
  background-color: rgb(191, 30, 45);
  color: #FFFFFF;
  border-radius: .25rem;
  -webkit-animation: flickerAnimation 3s infinite;
  animation: flickerAnimation 3s infinite;
}
div#toprightlinks a:hover
{
  color: rgb(191, 30, 45);
  text-decoration: none;
}
div#toprightlinks a.pageactive:hover
{
  color: white;
}

span#userlinks
{
  display: none;
}

/* Move navbar collapsed forward before search buttons and remove flex definitions for IE compatible */
div#navbarcollapsed
{
  flex: unset;
  min-width: 55px;
}

/* Set logo position, width and height */
div#headerbottomcell
{
  width: 100%;
  border-bottom: 5px solid rgb(191, 30, 45);
}

div#bannerlogo
{
  margin-top: 0;
  display: none;
  flex-basis: 600px;
}
div#bannerlogo img
{
  width:  211px;
  height: 50px;
}

.subtitle
{
  vertical-align: bottom;
  margin-left: 5px;
}

.temporaryhighlight
{
  font-weight: bold;
  background-color: #303030;
  color: #FFFFFF;
  border-radius: .25rem;
  padding: 2px 10px 2px 10px;
  margin-left: 40px;
  white-space: nowrap;
}

div#bannerlogosmall
{
  margin-top: -22px;
  padding-bottom: 2px;
  display: block;
}
div#bannerlogosmall img
{
  width:  100%;
  height: 100%;
  min-width: 200px;
}

/* ---------- Footer Setting ---------- */

footer#footer
{
  background-color: rgb(191, 30, 45);
  color: white;
}
footer#footer a
{
  text-decoration: underline;
  color: white;
}

/* Footer content style */
div#footercontent
{
  min-height: 32px;
}

/* Footer content orders */
div.copyrightcell
{
  order: 2;
  width: 100%;
  text-align: center;
}
div.poweredbycell
{
  order: 1;
  flex-basis: 100%;
  text-align: center;
  width: 100%;
}
div#footersocialbookmarks
{
  order: 3;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ---------- Navigation Bar Setting ---------- */

div#navbar
{
  background: -webkit-gradient(linear,left top, left bottom,color-stop(0, #e4e4e4),color-stop(39%, #e2e2e2),color-stop(79%, #ddd),color-stop(91%, #d5d5d5),color-stop(95%, #cfcfcf),color-stop(99%, #bebebe));
  background: -webkit-linear-gradient(top,#e4e4e4 0,#e2e2e2 39%,#ddd 79%,#d5d5d5 91%,#cfcfcf 95%,#bebebe 99%);
  background: -o-linear-gradient(top,#e4e4e4 0,#e2e2e2 39%,#ddd 79%,#d5d5d5 91%,#cfcfcf 95%,#bebebe 99%);
  background: linear-gradient(to bottom,#e4e4e4 0,#e2e2e2 39%,#ddd 79%,#d5d5d5 91%,#cfcfcf 95%,#bebebe 99%);
  width: 100%;
  height: 50px;
  display: flex;
  align-items: flex-end;
}
div#navbar .navbar
{
  padding-bottom: 0px; /* Overwrite the default Veridian padding-bottom style */
  padding-top: 0.25rem;
  width: 100%;
  border-bottom: 5px solid rgb(191, 30, 45);
}
nav.navbar
{
  padding-left: 15px;
  padding-right: 20px; /*taking into account the 5 px from the div#navbar a margin-left*/
}

/* Standard menu style setting */
div#navbar a
{
  color: white;
  background-color: rgb(191, 30, 45);
  margin-left: 5px;
  padding: 0.25rem 1rem;
  webkit-transition: all 0.3s ease-out; /* Safari */
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
div#navbar a.active
{
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
}
div#navbar a:hover
{
  background-color: #808080;
  border-color:  #808080;
  color: #FFFFFF;
}

/* Dropdown menu style setting */
div#navbar .dropdown-menu
{
  background-color: #808080;
  left: 5px;
}
div#navbar .dropdown-menu a
{
  border-left: 5px solid #808080;
  border-right: 5px solid #808080;
  background-color: #808080;
  margin: 0px;
}
div#navbar .dropdown-menu a.active
{
  background-color: #FFFFFF;
  border-bottom-color:  #808080;
}
div#navbar .dropdown-menu a:hover
{
  background-color: #D0D0D0;
}

div#navbarcollapsed a.dropdown-toggle
{
  color: #DC0018;
}
div#navbarcollapsed a.dropdown-toggle:hover
{
  color: #005580;
}

/* ---------- Breadscrumb Setting ---------- */

nav#breadcrumbscell .breadcrumb
{
  background: -webkit-gradient(linear,left top, left bottom,color-stop(0, #FFFFFF),color-stop(30%, #FFFFFF),color-stop(70%, #E0E0E0),color-stop(99%, #D0D0D0));
  background: -webkit-linear-gradient(top,#FFFFFF 0,#FFFFFF 30%,#E0E0E0 70%,#D0D0D0 99%);
  background: -o-linear-gradient(top,#FFFFFF 0,#FFFFFF 30%,#E0E0E0 70%,#D0D0D0 99%);
  background: linear-gradient(to bottom,#FFFFFF 0,#FFFFFF 30%,#E0E0E0 70%,#D0D0D0 99%);
}

/* ---------- Homepage Setting ---------- */
div#homepageconstitution
{
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
div#homepageconstitution div#homepageconstitutionfirstrow
{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
div#homepageconstitution div#homepageconstitutionfirstrow div
{
  color: #e26d45;
  text-align: left;
  padding-left: 10px;
  font-size: 100%;
  font-weight: bold;
  line-height: normal;
}
div#homepageconstitution img
{
  width: 90px;
}
div#homepageconstitution div h2
{
  margin-top: 15px;
  text-align: left!important;
}

/* Change so the scroll bar apprear next to the help text */
.modal-dialog
{
  position: relative;
  height: calc( 100% - 3.5rem);
}

.modal-content
{
  overflow-y: scroll;
  max-height: 100%;
}

/* Citation Button and Citation Popup customisations */
/* Expands the "Copy" button in the popup */
#citation-btn
{
  padding-top: 10px;
  font-style: normal;
}

.input-group-append
{
  display: flex;
}
/* Assign radius to the "Copy" button */
.input-group-append button
{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Removed the scrollbar of the popup */
#citationpopup .modal-content
{
  overflow-y: hidden;
}
/* Aligns the "Close" button to the center */
.footer-cell
{
  text-align: center;
}
.citation-heading
{
  font-weight: bold;
}
.citation-container
{
  padding-bottom: 15px;
}
#citation-warning
{
  font-style: italic;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Custom style for Google Analytics Usage Popup */
div#cookieusagepopup .modal-header>button
{
  display: none;
}

div#cookieenabledpopup>div
{
  padding-bottom: 30px;
}

div#cookieenabledpopup>button
{
  display: block;
  margin-left: auto;
  margin-right: auto;

  background-color: rgb(191, 30, 45);
  color: white;
  border-radius: 5px;
  border: 0px solid #303030;
  padding: 10px;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
}

div#cookieenabledpopup>button:hover
{
  background-color: #F2A2AB;
}

/* Homepage columns show vertically */
div#homepagecontent
{
  flex-direction: column;
}

/* Homepage display customisation */
div#homepagecontent h2
{
  text-align: left;
}
div#homepagecontent div.card
{
  border: 0px;
}
div#homepagecontent div.card-body
{
  border: 1px solid #B0B0B0;
  border-radius: .25rem;
}
div#homepageleftcolumn div.card-body
{
  background-color: #E4E4E4;
}
div#homepagecontent div#homepagenotice
{
  margin-top: 10px;
}

div.card-body h2
{
  margin-bottom: 10px;
}

div#homepagewelcomepane
{
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}

div#homepagewelcomepane div#homepagesampler
{
  margin-right: 0px;
  flex: 1 0 auto;
  order: 2;
}
div#homepagewelcomepane div#homepagesampler h2
{
  text-align: center;
}
div#homepagewelcomepane div#homepagesampler a img
{
  border: 1px solid #B0B0B0;
  min-height: 200px;
}
div#homepagewelcomepane div#homepageabouttext
{
  flex: 1 1 auto;
  order: 1;
}
div#homepagewelcomepane div#homepageabouttext p
{
  word-break: break-word;
}

/* Adjust homepage columns margin as only one column showing */
div#homepageleftcolumn
{
          flex: 1 0 auto;
  margin-right: 0;
}
div#homepagecontent div#homepagenotice 
{
  margin-bottom: 10px;
}

/* Right column wider to fit the map */
div#homepagerightcolumn
{
          flex: 1.25 0 auto;
  margin-left: 0;
  border: 0px;
}

/* ---------- Query Setting ---------- */

/* Adding the accent sensitive message [this should be removed after we enable the accent folding upgrade in 2020] */
div.accentsensitivediv
{
  font-size: 80%;
  text-align: left;
  color: #808080;
}

/* Set place holder div height */
.verticalcenter
{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  justify-content: center;
}

/* Form width */
div#searchpagesearchformcontainer.smallwidth, div#searchpagesearchextracontainer.smallwidth,
div#searchpagesearchfilterscontainer.smallwidth
{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
/* Hide button behind dropdown list */
span#searchsubmitbuttoncontainer 
{
  z-index: 3;
}

/* Advanced search content style */
.advancedsearchwrapper
{
  border: 2px solid #DC0018;
  border-radius: 0.25rem;
  margin: 1rem 0;
  padding: 1rem;
  display: none;
}
#advancedsearchcontrols
{
  text-align: center;
}
#advancedsearchcontrols button
{
  display: inline;
  margin: 4px;
}

/* Badge warning color */
div#searchpagesearchfilterscontainer .badge
{
  color: #454545 !important;
  background-color: #E0E0E0 !important;
  font-weight: normal;
}
div#searchpagesearchfilterscontainer .badge:hover 
{
  color: rgb(191, 30, 45) !important;
  background-color: #E0E0E0;
}

/* ---------- Fancy MAP Setting ---------- */

/* Map appearance */
#mapcontainer
{
  width: 100%;
  display: none;
  user-select: none;
}
/* Set svg image to fit its parent div's width */
#mapcontainer svg
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Area hover color and transition */
#mapcontainer .fil0 
{ 
  -webkit-transition: .4s fill; 
  -o-transition: .4s fill; 
  transition: .4s fill; 
}
#mapcontainer .fil0:hover,
#mapcontainer .fil0.highlighted
{ 
  fill: #F1F1F1; 
}
/* Digitized area hover color and transition */
#mapcontainer .digitized
{ 
  fill: #FBE7EA; 
  cursor: pointer;
}
#mapcontainer .digitized:hover,
#mapcontainer .digitized.highlighted
{ 
  fill: #F2A2AB; 
}
#mapcontainer .text0
{
  font-size: 25rem;
  fill: #505050;
}
/* On other platforms hover color and transition */
#mapcontainer .otherplatform
{ 
  fill: #DEDEDE; 
  cursor: pointer;
}
#mapcontainer .otherplatform:hover,
#mapcontainer .otherplatform.highlighted
{ 
  fill: #D0D0D0; 
}
/* No publication cantons hover color and transition */
#mapcontainer .nopublication
{ 
  cursor: default;
}
/* Digitized area name hover color and transition */
#mapcontainer .text0.digitized
{ 
  fill: #000000; 
  font-weight: bold;
}
#mapcontainer .text0.digitized:hover, 
#mapcontainer .text0.digitized.highlighted
{ 
  fill: black; 
}
/* Selected digitized area color */
#mapcontainer .selected
{ 
  fill: #F2A2AB; 
}

/* Canton list on small screens */
#cantonlistcontainer
{
  display: block;
}
#cantonlistcontainer ul
{
  list-style: none;
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  padding-left: 0px;
}

#cantonlegend
{
  border: 1px solid #D6D6D6;
  padding: 0px 10px;
  border-radius: 5px 15px; 
}

img.cantonstatus
{
  margin-bottom: 2px; 
}

li.cantonItem
{
  list-style: none;
}

/* ---------- Title Browser Setting ---------- */

/* Publication browser header on browse by titles page display flex */
#publicationbrowserheader
{
  display: flex;
  flex-direction: column;
}
/* Capical letter list on browse by titles page wider */
#publicationbrowserheader nav
{
  flex: 2 0 0;
}
/* Capical letter list on browse by titles page aligns left */	
ul#publicationbrowserhlist
{
  justify-content: flex-start;
}
/* Search form on browse by titles page thinner */	
#publicationbrowserheader .publicationclassifiersearchform
{
  flex: 1 0 0;
  margin-left: 0px;
}
/* Search form style on browse by titles page */	
.publicationclassifiersearchform
{
  margin-top: 10px;
}
/* Search form title on browse by titles page style */	
.publicationclassifiersearchform h3
{
  font-weight: bold;
}

/* Browse by title page --  publication level controls*/
div#publicationlevelcontrols .badge
{
  background-color: #dc0018;
  top: 1px;
}

div#publicationlevelcontrols .btn
{
  --bs-btn-padding-y: 0.2rem !important;
}

div#publicationlevelcontrols .btn.disabled
{
  background-color: #dfdfdf;
  border-color: #e2e2e2;
}

div#publicationlevelcontrols .calendar {
  padding-top: 0.4rem;
}

.form-control:focus, .form-select:focus
{
  box-shadow: inset 0 0 6px #dc0018;;
}



/* ---------- Publication Page Setting ---------- */

/* Adding some style rules to the sponsor logos */
div.sponsorlogos
{
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: top;
}

div.sponsorlogos img
{
  width: 150px;
  border: 1px solid #B0B0B0;
  margin: 5px;
  padding: 5px;
}

div.sponsorlogos img.widerlogo
{
  max-width: 310px;
  border: 1px solid #B0B0B0;
  margin: 5px;
  padding: 5px;
}

/* Publication metadata style on browse by titles page */	
div#publicationwrapper
{
  display: flex;
  flex-direction: column;
}
div#publicationmetawrapper
{
  order: 1; /* Let's display the publication information first when it is under small screen mode */
  flex: 2;
  border-left: 0px;
  margin-left: 0px;
  padding-left: 0px;
}
/* Publication metadata title style on browse by titles page */	
div#publicationmetawrapper h2
{
  font-weight: bold;
}
/* Month/day aligns left on browse by titles page and set width */	
div#publicationlevelcontentwrapper
{
  padding-top: 20px;
  order: 2; /* Let's display the publication information first when it is under small screen mode */
  flex: 2.5;
}

ul#publicationbrowsedecadelist
{
  margin-bottom: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

div#datebrowserrichardtoplevelcalendar > div
{
  padding-top: 0;
  margin-bottom: 0.25rem;
}

div#datebrowserrichardtoplevelcalendar > div > h2
{
  margin-top: 11px;
}

div#datebrowserrichardtoplevelcalendar ul > li 
{
  width: calc((100% - (2 * 0.25rem)) / 3);
}

#datebrowserrichardtoplevelcalendar span.nav-link,
div#datebrowserrichardtoplevelcalendar a.nav-link
{
  padding: 0.25rem;
}

/* ---------- Browse by Canton Page Setting ---------- */

/* Browse container on browse by cantons page display flex */	
#browsecontainer
{
  display: flex;
  flex-direction: column;
}

/* Map container on browse by cantons page wider for the map */	
#browseselectioncontainer
{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  order: 2;
}

/* Map container on browse by cantons page wider for the map */	
#browsemapcontainer
{
  flex-grow: 4;
  flex-shrink: 0;
  flex-basis: auto;
  order: 1;
}

/* Cantons query on browse by cantons page thinner */	
#browsequerycontainer
{
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: auto;
  padding-left: 0px;
  order: 3;
}

/* Cantons list on browse by cantons page thinner */	
ul.cantonbrowserlist
{
  padding-left: 0px;
}

/* Clear all on browse by cantons page thinner */	
#clearallcontainer
{
  margin-top: 1rem;
  margin-left: 0rem;
  margin-bottom: 1rem;
}

/* Selected publication list container on browse by cantons page style */	
#browsepublicationscontainer
{
  margin-top: 20px;
}
/* Selected publication list title on browse by cantons page style */	
#browsepublicationscontainer h3
{
  font-weight: bold;
}

/* Selected publication list on browse by cantons page style */	
.selectedpublicationlist
{
  display: none;
  flex-direction: column;
  margin-bottom: 5px;
  background-color: #FBE7EA;
  border: 1px solid #B0B0B0;
  border-radius: .25rem;
  padding: 10px 20px 10px 20px;
}
.selectedpublicationlist .selectedcanton
{
  border-bottom: 1px solid #B0B0B0;
  font-weight: bold;
  margin-bottom: 5px;
}
.selectedpublicationlist .selectedpublication
{
  font-size: 90%;
}

.moreonotherplatforms
{
  font-size: 70%;
  border-top: 1px solid #B0B0B0;
  margin-top: 5px;
  text-align: right;
}

.cantonitemlabel
{
  cursor: pointer;
}

/* ---------- Document Display Setting ---------- */

/* Prevent string with no spaces push the left pane too wide */
div#documentdisplayleftpanecontent
{
  word-break: break-word;
}

/* Set hint style on document display page */
div#documentdisplayheader span
{
  font-size: 0.8rem;
}
.metadatalabel
{
  font-weight: bold;
}
div.metadatacontent
{
  padding-left: 5px;
}

/* Metadata title edit style */
.metadatavaluebox:hover
{
  cursor: pointer;
}

#editvalueformbutton, #cancelvalueformbutton
{
  padding-top: 0px;  
  padding-bottom: 0px;  
}

#editvalueformnewvalue
{
  font-size: 1rem;
}

/* Transparent cross hair */
#centercrosshair
{
  position: absolute;
  height: 1px;
  width: 1px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* Set social bookmarks style on context menus */
div.panojsaddthislinkcontainer
{
  display: flex;
  color: #CAD0D3;
  align-items: center;
}

div#panojscontextmenupopup .addthis_toolbox
{
  display:flex;
      flex-wrap: nowrap;
  padding-left: 5px;
}
div#panojscontextmenupopup .addthis_toolbox a
{
  padding-left: 2px;
}

/* Set social bookmarks show on the left of logical section */
div#logicalsectioncontentwrapper
{
  display: flex;
}

div#largesocialbookmarks
{
  display: block;
  flex: 1 0 0;
}

div#addthis_large_container
{
  display: block;
}

/* Set article image on the right of logical section wider */
div#logicalsectionimagewrapper
{
  display: block;
  flex: 5 0 0;
}

/* Report vandalism wrapper style */
div#reportvandalismwrapper
{
  margin-bottom: 0.5rem;
}

/* Report vandalism form style */
div#reportvandalismtextwrapper
{
  height: 12rem;
  overflow-y: scroll;
  padding: 5px;
  border: 1px dashed #E0E0E0;
}

.textfadeout
{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0em;
  left: 0em;
  height: 4em;
  background: -webkit-linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  background-image: -o-linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(rgba(255, 255, 255, 0)),
    to(rgba(255, 255, 255, 1))
  );
  background-image: -webkit-linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  background-image: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  background-image: -ms-linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.citationlink
{
  font-size: 12px;
  font-style: italic;
  line-height: 18px;
  display: none;
}

/* copy link icon style */
.copylink
{
  fill: #CAD0D3;
}

/* copy link label style */
div#panojscontextmenupopup div.panojscopylinkcontainer a.copylinklabel
{
  color: #CAD0D3;
  padding-left: 3px;
}

/* copy link hover style */
div#panojscontextmenupopup div.panojscopylinkcontainer a.copylinklabel:hover
{
  color: white;
  text-decoration: underline;
}

div.documentdisplayleftpanesectiontextheader a.reportvandalismlink
{
  color: rgb(191, 30, 45);
  font-size: 80%;
  font-style: italic;
}
div.documentdisplayleftpanesectiontextheader div.reportvandalismlink
{
  line-height: 10px;
  padding-bottom: 5px;
}

div.documentstaticpdflinkcontainer
{
  display: inline;
}

div.expandcontractflag
{
  flex: 0;
  min-width: 24px;
  padding-top: 3px; 
}

div#documentdisplayleftpanetagscontainer .badge.bg-secondary
{
  color: #454545 !important;
  background-color: #E0E0E0 !important;
}
div#documentdisplayleftpanetagscontainer .badge:hover 
{
  color: rgb(191, 30, 45) !important;
  background-color: #E0E0E0;
}

/* ---------- Tutorial Popups Setting ---------- */

/* Tutorial layer style on document display page */
#viewertutorial
{
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 100;
}
/* Tutorial popup style on document display page */
.popper
{
  display: none;
  background-color: #FFF;
  border-radius: 8px;
  width: 250px;
  z-index: 105;
}
.popper .popper__arrow
{
  border-color: #FFF;
}

/* ---------- Browse by Collection Setting ---------- */

div#selectedcollectiontitle
{
  padding-right: 20px;
}

div#selectedcollection
{
  padding: 20px;
  background-color: #E4E4E4;
  border: 1px solid #B0B0B0;
  border-radius: .25rem;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

div#selectedcollection .collectionrelatedtitles li
{
  list-style-type: none;
}

div#selectedcollection .collectionheaderrow
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px dashed #606060;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* ---------- Browse by Region Setting ---------- */

div#selectedregion
{
  padding: 20px;
  background-color: #E4E4E4;
  border: 1px solid #B0B0B0;
  border-radius: .25rem;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}

div#selectedregion .regionheaderrow
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px dashed #606060;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

div#selectedregion .regionrelatedtitles li
{
  list-style-type: none;
}

/* ---------- Text Correctable Publication Setting ---------- */

div#textcorrectablepublicationlist > div
{
  margin-bottom: 20px;
}

div#seglevelsearchdiv
{
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #E4E4E4;
  border: 1px solid #B0B0B0;
  border-radius: .25rem;
  margin-bottom: 15px;
}

/* ---------- Other Pages Setting ---------- */


div#searchresultyeargraphtitle, .bg-secondary
{
  color: white !important;
  background-color: rgb(191, 30, 45) !important; 
}

h2.helpsectionspacer
{
  border-bottom: 1px solid #e0e0e0;
  padding-top: 40px;
  padding-bottom: 5px;
}

div#abouttextcorrectionhelp h3
{
  font-size: 14pt;
  font-weight: 800;
}

/* User account page style */
div#useraccountpagetabgroup
{
  display: flex;      
  justify-content:  space-between; 
}

/* Tag management page style */
input#deleteallbutton
{
  margin-left: 2rem;
}

/* Add to private list page style */
#adduserlistitemsform div.inputformwrappingdivtable500 > div > div input 
{
  max-width: unset;
}
#newuserlistcell > div
{
  vertical-align: top;
}
#newuserlistnote
{
  margin-top: 3px;
}

/* List note showing cell style */
.userlistnotecell
{
  padding-left: 0.9rem;
}

/* featured issue selection page style */
div.featuredissueselectionarea
{
  background-color: #F7F7F9;
  border: 1px solid #ECEEEF;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}
#featuredissueselectionformfields > div > div
{
  vertical-align: top;
}
#featuredissueselectionformfields legend
{
  font-weight: normal;
}
.selectionoption
{
  font-weight: bold;
}
/* platform and partnet pages style */
#platformlist p, #partnerlist p
{
  margin-bottom: 0rem;
}
#platformlist>div
{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  border: 1px solid #E0E0E0;
  background-color: #F7F7F7;
}
#platformlist>div>div.cantonheader
{
  font-weight: bold;
  border-bottom:1px solid #D0D0D0;
}
#platformlist>div>div.cantoncontent
{
  padding-left: 20px;
}
#platformlist>div.selected
{
  background-color: #D0D0D0;
  border: 1px solid #C0C0C0;
}
#platformlist>div.selected>div.cantonheader
{
  border-bottom:1px solid #B0B0B0;
}

/* ---------- JS Socials Setting ---------- */

.jssocials
{
  font-size: 14px;
}
.jssocials-share-link
{
  border-radius: 25%;
}
div#socialshare-article, div#socialshare-page
{
  padding-left: 6px;
  padding-right: 6px;
}
div#socialshare-base div.jssocials-shares div.jssocials-share a, div#socialshare-article div.jssocials-shares div.jssocials-share a, div#socialshare-page div.jssocials-shares div.jssocials-share a
{
  padding-left: 6px;
  font-size: 8px;
}

/* ---------- Animation Setting ---------- */

@-webkit-keyframes flickerAnimation
{
  1%   {  opacity: 1; }
  50%  {  opacity: 0.5; }
  100% {  opacity: 1; }
}
@keyframes flickerAnimation
{
  1%   {  opacity: 1; }
  50%  {  opacity: 0.5; }
  100% {  opacity: 1; }
}

.animate-flicker
{
    opacity: 1;
}

/* ---------- Tag Autocomplete Setting ---------- */

.autocomplete-suggestion.selected
{
  background-color: #e0e0e0;
}
.autocomplete-suggestion.dictionary-tag
{
  background-color: #fbe7ea;
}
.autocomplete-suggestion b  /* Used for the term highlighting */
{
  color: #069;
}

/* ---------- Media Setting ---------- */

/* Style on screens less than 800px */
@media (max-width: 800px)
{
  div#homepagecontent 
  {
    flex-wrap: unset;
  }
}

/* Style on screens greater than 400px */
@media (min-width: 400px)
{
  /* Prevent text in logo pictures covered by language bar */
  div#toprightlinks a
  {
    padding: 4px;
  }

  /* Set calendar style for four columns */
  div#datebrowserrichardtoplevelcalendar ul > li 
  {
    width: calc((100% - (3 * 0.25rem)) / 4);
  }
}

/* Style on screens greater than 500px */
@media (min-width: 500px)
{
  /* Show big logo and hide small logo */
  div#bannerlogo
  {
    display: flex;
    align-items: flex-end;
  }
  div#bannerlogosmall
  {
    display: none;
  }

  /* Set calendar style for six columns */
  div#datebrowserrichardtoplevelcalendar ul > li 
  {
    width: calc((100% - (5 * 0.25rem)) / 6);
  }
}

/* Style on screens greater than 550px */
@media (min-width: 550px)
{
  /* Publication classifier on small screens */
  div#selectedcollection .collectionheaderrow
  {
    flex-direction: row;
    align-items: flex-end;
  }

  /* Two columns list of cantons */
  #cantonlistcontainer ul
  {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}

/* Style on screens greater than 700px */
@media (min-width: 700px)
{
  /* User links on a line */
  span#userlinks
  {
    display: inline-block;
  }

  /* Remove exter border below the header */
  div#headerbottomcell
  {
    border-bottom: 0px;
  }

  /* Set logo size */
  div#bannerlogo img
  {
    width: 270px;
    height: 64px;
  }

  /* Show homepage columns horizontally */
  div#homepagewelcomepane
  {
    flex-direction: row;
  }
  div#homepagewelcomepane div#homepagesampler
  {
    flex: 1;
    margin-right: 50px;
    order: 1;
  }
  div#homepagewelcomepane div#homepageabouttext
  {
    flex: 1;
    order: 2;
  }

  /* Canton list on small screens */
  #mapcontainer
  {
    display: block;
  }
  #cantonlistcontainer
  {
    display: none;
  }

  /* Set calendar style for four columns */
  div#datebrowserrichardtoplevelcalendar ul > li 
  {
    width: calc((100% - (3 * 0.25rem)) / 4);
  }

  /* Show search form after letter list */
  div#publicationbrowserheader
  {
    flex-direction: row;
  }

  #publicationbrowserheader .publicationclassifiersearchform
  {
    margin-left: 20px;
  }

  .citationlink
  {
    display: block;
  }
}

/* Style on screens greater than 900px */
@media (min-width: 900px)
{
  /* Adjust date browser width as there is extra stuff in this page */
  div#datebrowserrichardtoplevelcalendar ul > li 
  {
    width: calc((100% - (5 * 0.25rem)) / 6);
  }

  /* Footer content orders */
  div.copyrightcell
  {
    width: 120px;
    order: 1;
  }
  div.poweredbycell
  {
    width: unset;
    order: 2;
    flex-basis: unset;
  }
  div#footersocialbookmarks
  {
    width: 120px;
  }

  /* Publication metadata style on browse by titles page */	
  div#publicationwrapper
  {
    flex-direction: row;
  }
  div#publicationmetawrapper
  {
    order: 2;
    border-left: 1px solid black;
    margin-left: 20px;
    padding-left: 20px;
  }
  div#publicationlevelcontentwrapper
  {
    order: 1;
    padding-top: 0px;
  }
}

/* Style on screens greater than 1200px */
@media (min-width: 1200px)
{
  /* Adjust date browser width and wrap as there is extra stuff in this page */
  div#datebrowserrichardtoplevelcalendar ul 
  {
    border-bottom: 1px solid #ECEEEF;
    flex-wrap: wrap;
  }
  div#datebrowserrichardtoplevelcalendar ul > li 
  {
    margin-bottom: 0.25rem;
    text-align: center;
    width: calc((100% - (11 * 0.25rem)) / 12);
  }

  /* Homepage columns show horizontally */
  div#homepagecontent
  {
    flex-direction: row;
  }
  /* Adjust homepage columns margin as only two columns showing */
  div#homepageleftcolumn
  {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0px;
    margin-right: 0.5rem;
  }
  div#homepagecontent div#homepagenotice 
  {
    margin-bottom: 0px;
  }
  /* Right column wider to fit the map */
  div#homepagerightcolumn
  {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0px;
    margin-left: 0.5rem;
  }

  /* Browse by canton columns show in three columns */
  #browsecontainer
  {
    flex-direction: row;
  }
  div#browseselectioncontainer
  {
    order: 1;
    flex-basis: 0px;
  }
  div#browsemapcontainer
  {
    order: 2;
    flex-basis: 0px;
  }
  #browsequerycontainer
  {
    padding-left: 40px;
    flex-basis: 0px;
  }
}
/* SWISSPRESSONLINE CUSTOMISATION: add some padding around the content on the article clipping print page */
div#articleclippingpagecontent
{
  padding:20px;
}
form#edituserdisplaynameform div.invalid-feedback
{
  width: inherit;
}

/* SWISSPRESSONLINE CUSTOMISATION: eIAM icon for login button (local site) */
form#authenticateeiamform input.button250local
{
  background: var(--bs-btn-bg) url('/custom/swisspressonline/web/images/eiam_logo.svg') no-repeat 95%; background-size: 26px;
}

/* SWISSPRESSONLINE CUSTOMISATION: eIAM icon for login button (testing site) */
form#authenticateeiamform input.button250beta
{
  background: var(--bs-btn-bg) url('/testing/custom/swisspressonline-testing/web/images/eiam_logo.svg') no-repeat 95%; background-size: 26px;
}

/* SWISSPRESSONLINE CUSTOMISATION: eIAM icon for login button (staging site) */
form#authenticateeiamform input.button250staging
{
  background: var(--bs-btn-bg) url('/staging/custom/swisspressonline-staging/web/images/eiam_logo.svg') no-repeat 95%; background-size: 26px;
}

/* SWISSPRESSONLINE CUSTOMISATION: eIAM icon for login button (live site) */
form#authenticateeiamform input.button250production
{
  background: var(--bs-btn-bg) url('/custom/swisspressonline/web/images/eiam_logo.svg') no-repeat 95%; background-size: 26px;
}


/* SWISSPRESSONLINE CUSTOMISATION: Style for a 'permanently' disabled login button (due to eIAM error) */
form#authenticateeiamform input.unavailable
{
  background-color:var(--bs-gray-400);
  border-color:var(--bs-gray-400);
  color:var(--bs-body-color);
  cursor:not-allowed;
}

/* SWISSPRESSONLINE CUSTOMISATION: I have a div I want to pretend to be a button */
div.button250
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
  width: 100%;
}

/* SWISSPRESSONLINE CUSTOMISATION: Do not underline links in a div pretending to be a button */
#edituserdisplaynameformcontrols a:hover
{
  text-decoration: none;
}

/* SWISSPRESSONLINE CUSTOMISATION: The 'privacy' checkbox is hidden so doesn't need padding anymore */
div#registernewuserformfields .form-check, div#confirminvitenewuserformfields .form-check {
  padding-left: 0;
}

/* SWISSPRESSONLINE CUSTOMISATION: Externalising this style as it is a great idea to clearly mark all versions of the site */
span.bannerlogoextra
{
  animation: flickerAnimation 3s infinite;
  color:white;
  font-size: 120%;
  margin-right: 20px; 
  padding: 2px 10px 2px 10px;
}

span.bannerlogoextralocal
{
  background-color: var(--bs-yellow);
}

span.bannerlogoextrabeta
{
  background-color: var(--bs-orange);
}

span.bannerlogoextrastaging
{
  background-color: var(--bs-green);
}

a.changedisplaynamelink
{
  font-size:0.9rem;
  margin-left:15px;
}

/* SWISSPRESSONLINE CUSTOMISATION: Article clip on document display page */
#articleclipwrap > div
{
  padding: 1rem;
  margin-bottom: 1rem;
}
#articleclipwrap div.articleclippage
{
  position: relative;
}
#articleclipwrap div.imagecontainer
{
  margin: 0px;
}
div#articleclipwrap > div > h3
{
  margin-bottom: 25px;
  margin-top: 10px;
}