@import url('https://fonts.googleapis.com/css?family=Inter:400,400i,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

:root {
  --cyan60: #377EA0;
  --cyan70: #2A6480;
  --cyan80: #1F4E66;
  --cyan90: #133455;
  --orange10: #FCF0E7;
  --orange20: #FAE0CE;
  --orange30: #F5C3A1;
  --neutral10: #F2F3F5;
  --neutral20: #E2E4E9;
  --neutral30: #CCCFD7;
  --blue10: #EDF4FE;
  --blue40: #93BBF9;
  --white: #ffffff;
}


/*Custom fonts*/
@page{
  font-family: 'Inter', sans-serif;
}

body,
.topictitle1,
.topictitle2,
.topictitle3,
.topictitle4,
.topictitle5,
.topictitle6,
*[class~='front-page/front-page-title'],
*[class~="toc/title"],
*[class~="map/topicref"],
*[class~='topic/title'],
*[class~='topic/thead'],
*[class~="placeholder/figurelist"],
*[class~="placeholder/tablelist"],
*[class~="index/groups"]::before,
*[class~="index/group"] > *[class~="index/label"],
.wh_publication_title,
.wh_top_menu,
.wh_tile_title .topicref,
.wh_main_page_toc_entry .topicref,
.wh_index_terms span.wh_first_letter,
.wh-letters li a
{
  font-family: 'Inter', sans-serif;
}

/*code-font*/
*[class~='pr-d/codeblock'],
*[class~='codeblock'],
*[class~='pr-d/codeph'],
*[class~='codeph'],
*[class~='userinput'],
*[class~='filepath']{
  font-family: 'Roboto Mono', monospace;
}

/*user-input-colour*/
*[class~='userinput']{
  background-color: var(--neutral20);
  color: var(--cyan90);
  border-radius: 4px;
}

/*user-input-colour*/
code, pre {
  background-color: var(--neutral20);
  border-radius: 4px;
}

/* Top menu */
.wh_logo img {
    height: 24px;
    width: 24px;
}

header.navbar {
    background-color: var(--neutral10);
}

.wh_publication_title,
.ph.uicontrol,
h2.sectiontitle,
strong {
    font-weight: bold;
}

.navbar a,
.navbar a:hover,
.navbar a:visited,
.wh_top_menu ul li a {
	color: var(--cyan70);
}

a, a:hover, a:visited {
    color: var(--cyan90);
}

.wh_top_menu ul ul {
    background-color: var(--neutral10);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='rgba(0, 50, 83, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.search-breadcrumb li a {
	color: #003253;
}

h2.title,
h3.title {
	margin-top: 40px
}

/* TOC */
#wh_publication_toc {
    border-right: none;
}

/* remove bolding of conrefs in menus and page title */
#wh_publication_toc .ph.uicontrol,
.wh_topic_toc .ph.uicontrol,
h1 .ph.uicontrol,
.dropdown-item .ph.uicontrol {
	font-weight: 400;
}

div.wh_tile,
.wh_search_textfield {
	border-radius: 4px;
}

.wh_tile_shortdesc,
.wh_tile_title {
    text-align: left;
}

.wh_tile:hover {
    background-color: var(--orange10);
	border-color: var(--orange20);
}

.wh_search_button {
	border-bottom-right-radius: 4px;
}

.wh_search_page .pagination a.page-link {
	color: var(--cyan90);
}

.wh_search_page .pagination .active a.page-link {
	color: white;
	background: var(--cyan90);
}

th {
    text-align: left;
}

#star .curr {
    background:url("resources/icons/starsSmall.png") 0 25px;
}

#star .star {
    background: url("resources/icons/starsSmall.png") repeat-x 0 -25px;
}

footer {
	border-top: 1px solid var(--neutral20);
	text-align: center;
	font-size: 90%;
}

footer.navbar {
	background-color: var(--neutral10);
}

#go2top {
	background-color: var(--orange30);
	border-color: var(--orange30);
	border-radius: 4px;
}

/*notes-style-box*/
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
  border-radius: 4px;
}
/*notes-colors-titles-background*/
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
  color: #133445;
  background-color: var(--blue10);
  border: 2px solid var(--blue40);
}

span.highlight {
	background-color: var(--orange20);
	border-radius: 4px;
}

a.dropdown-item {
	background-color: white;
}

a.dropdown-item:hover {
	background-color: var(--orange20);
	color: var(--cyan80);
}

.wh_top_menu ul ul li.has-children:after {
    content: "";
    display: block;
    line-height: 2.5em;
    position: absolute;
    right: 5px;
	top: 50%; 
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background-image: url('resources/icons/chevron-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
    
/* Icons for notes etc. */
div.note {
    background-image:url("resources/icons/info.svg");
	background-position: 10px;
}

div.warning {
    background-image:url("resources/icons/trigle-alert.svg");
	background-position: 10px;
}

div.trouble {
    background-image:url("resources/icons/octagon-alert.svg");
	background-position: 10px;
}

span.permalink {
	background-image:url("resources/icons/link.svg");
}

button.oxy-icon-print {
	color: transparent;
	background-image:url("resources/icons/printer.svg");
	background-size: 16px 16px;
	background-repeat: no-repeat;
    background-position: center;
}

button.wh_search_button {
	color: transparent;
	background-image:url("resources/icons/search-white.svg");
	background-repeat: no-repeat;
    background-position: center;
}

button.translatebutton {
	color: transparent;
	background-image:url("resources/icons/languages.svg");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	height: 24px;
	width: 24px;
	vertical-align: middle;
	background-color: transparent;
}

/* Translate modal */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	background-color: #fff;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 400px;
	text-align: center;
	border-radius: 4px;
}

#google_translate_element {
	margin: 20px 0;
}

 label[for="languageSelect"] {
     display: block;
     margin-top: 10px;
     margin-bottom: 5px;
     font-weight: bold;
     text-align: left;
 }

 #languageSelect {
     width: 100%;
     padding: 8px;
     margin-bottom: 15px;
     border: 1px solid var(--neutral30);
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 15px;
 }

 .translate-action-button {
     display: inline-block;
     margin-top: 20px;
     margin-right: 10px;
     padding: 10px 20px;
     background-color: var(--cyan90);
     color: var(--orange20);
     border: 1px solid var(--cyan90);
     border-radius: 4px;
     cursor: pointer;
     font-size: 15px;
 }

 .translate-action-button:hover {
     background-color: var(--cyan70);
 }

 .close-button {
     display: inline-block;
     margin-top: 20px;
     padding: 10px 20px;
     background-color: white;
     color: var(--cyan90);
	 border: 1px solid var(--neutral30);
     border-radius: 4px;
     cursor: pointer;
     font-size: 15px;
 }

 .close-button:hover {
     background-color: var(--neutral20);
}

/* Expandable field properties */

.field-properties,
.table-properties,
.field-relations {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .field-properties .simpletable-container,
  .table-properties .simpletable-container,
  .field-relations .table-container  {
    display: none;
    padding: 12px;
    border-top: none !important;
  }

  .field-properties .toggle-button,
  .table-properties .toggle-button,
  .field-relations .toggle-button {
    cursor: pointer;
    color: var(--cyan70);
    font-weight: bold;
    text-align: left;
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: 2px solid var(--neutral20);
    background: var(--neutral10);
  }

  .field-properties .toggle-button:hover,
  .table-properties .toggle-button:hover,
  .field-relations .toggle-button:hover {
    color: var(--cyan70);
    border: 2px solid var(--cyan70);
    background: var(--orange10);

  }

  .field-properties .toggle-button::after,
  .table-properties .toggle-button::after,
  .field-relations .toggle-button::after   {
    content: "";
    float: right;
    font-weight: normal;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url('resources/icons/chevron-down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 0.5em;
  }

  .field-properties.expanded .toggle-button::after,
  .table-properties.expanded .toggle-button::after,
  .field-relations.expanded .toggle-button::after  {
    background-image: url('resources/icons/chevron-up.svg');
  }

  .field-properties.expanded .simpletable-container,
  .table-properties.expanded .simpletable-container,
  .field-relations.expanded .table-container {
    display: block;
    border: 2px solid var(--cyan80);
    border-radius: 0 0 4px 4px;
  }

  .field-properties.expanded .toggle-button,
  .table-properties.expanded .toggle-button,
  .field-relations.expanded .toggle-button {
    border: 2px solid var(--cyan80);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
  }

  .field-properties.expanded:hover .simpletable-container,
  .table-properties.expanded:hover .simpletable-container,
  .field-relations.expanded:hover .table-container {
    border: 2px solid var(--cyan70);
  }
  
  .field-relations caption,
  .table--title-label,
  .tablecap .permalink,
  *[class~='topic/title'] .permalink
  {
    display: none;
  }