/*Publication titles*/
@media only screen and (min-width : 768px){
    .wh_header_flex_container {
        flex-direction: column;
        align-items: stretch;
    }
    .wh_logo_and_publication_title_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        align-self: stretch;
        width: 100%;
        gap: 1em;
    }
    .wh_indexterms_link a:before {
        padding-left: .5em !important;
    }
    .wh_toggle_button {
        display: inline-block !important;
        float: none;
        line-height: 1em;
        /*  margin: 10px 10px; */
        order: 2;
    }
    .wh_top_menu ul ul{
        display: none;
    }

    .wh_top_menu ul li.active > ul {
        display: block;
        padding-left: .5em;
    }
    .wh_top_menu ul li a {
        display: block;
        padding: .5em;
        text-decoration: none;
    }
    .wh_top_menu_and_indexterms_link.navbar-collapse:not(.show) {
	    float: none;
        display: none !important;
        vertical-align: middle;
    }
    .wh_top_menu_and_indexterms_link.navbar-collapse.in {
        display: block !important;
    }
    .wh_top_menu {
        display: block;
    }
    .wh_top_menu ul {
        position: static;
        display: block;
        z-index: 999;
        margin-bottom: 0;
        text-align: left;
    }
    .wh_top_menu > ul > li {
        display: list-item;
    }
    .wh_indexterms_link {
        text-align: left;
        display: block;
    }
    .wh_indexterms_link a:before {
        display: block;
        margin: 0;
        padding: 0;
    }
}

.wh_top_menu_and_indexterms_link {
    padding-top: 1em;
}

.table {
    width:100%;
}

*[class~='topic/table'] {
  margin: 0em;
}


@media screen and (max-width: 436px){
	.distributors table {
    font-size: 3vw;
	}
}
.distributors table {
	background-color: #feef19;
}

@media screen and (max-width: 900px) {
    .ol {
    padding-inline-start: 25px;
    }
}
@media only screen and (max-width: 767px){
	.wh_top_menu ul {
    display: flex;
    text-align: left;
    flex-direction: column;
    align-content: flex-start;
	flex-wrap: wrap;
	}
}
.glyphicon-arrow-left:before,.oxy-icon-arrow-left:before {
	content: ' ';
	display: none;
	position: relative;
	height: 30px;
	width: 26px;
	/*top: 5px;*/	
}

.glyphicon-arrow-right:before,.oxy-icon-arrow-right:before {
    content: ' ';
	display: inline-block;
	position: relative;
	height: 30px;
	width: 26px;
	/*
	top: 5px;
	left: 0.6em;
	right: 0em;
	*/
}
.mainbooktitle {
    display: none;
}
.wh_publication_title > a{
    display: none;
    font-size: 1.4em;
    vertical-align: middle;
}
.wh_header {
    background-color: #12193D;   /*#0c2340;*/
    position: relative; /* To position the pseudo-element */
}

.wh_top_menu > ul > li a, .wh_indexterms_link a::before {
    color: #fff;
}
.wh_tile {
    border-radius: 8px;
    background-color: #feef19;
}
.wh_footer {
    display: none;
    background-color: #0c2340;
}
.wh_search_input {
    display: none;
    background-color: #0c2340;
	padding: 0px;
}
.wh_search_button {
    border-color: #ffffff;
}
.wh_tools {
    background-color: #fff;
}
.wh_breadcrumb ol a {
    color: #0c2340;
}
.wh_breadcrumb ol {
    font-size: 1.2em;
}
.wh_breadcrumb img {
    display: none;
}
.wh_breadcrumb {
    display: inline-block;
    width: 100%;
}
.wh_right_tools {
    display: none;
    /*display: flex;
    flex-direction: row;
    width: 100%;*/
}
.wh_right_tools > .wh_navigation_links {
    width: 100%;
    order: 1;
    align-self: center;
    /*font-size: 2.5em;*/
}
.webhelp_expand_collapse_sections {
    margin-right: 0;
    order: 2;
    align-self: center;
	font-size: 1.5em;
}
.wh_right_tools>.wh_print_link {
    margin-right: 0;
    order: 3;
    align-self: center;
	font-size: 1.5em;
}
@media only screen and (max-width: 767px){
	.wh_right_tools {
    flex-direction: row-reverse;
    width: 100%;
	}
	.wh_breadcrumb {
    width: 45%;
	margin-right: 8px;
	}
	.webhelp_expand_collapse_sections {
    order: 1;
	}
}
@media screen and (min-width: 830px){
	.wh_breadcrumb ol {
    font-size: 1.2em;
	}
}
@media screen and (max-width: 829px){
	.wh_breadcrumb ol {
    font-size: 1em;
	}
	.wh_right_tools > .wh_navigation_links {
    /*font-size: 2em;*/
	}
	/*
	.glyphicon-arrow-left:before,.oxy-icon-arrow-left:before {
	top: 0;
	height: 30px;
	width: 30px;
	}
	.glyphicon-arrow-right:before,.oxy-icon-arrow-right:before {
	top: 0;
	height: 30px;
	width: 30px;
	}
	*/
}
@media screen and (max-width: 750px){
	.wh_breadcrumb ol {
    font-size: 0.8em;
	}
	.wh_right_tools > .wh_navigation_links {
    /*font-size: 2em;*/
	}
}

@media (max-width: 407px){
	.wh_logo_and_publication_title {
    /*  width: 60%; */
    display: none;
	}
}

/* Topic title block */
.d-sm-block {
    display: block!important;
}

/* Axkid logo width in header*/
.d-sm-block img {
	width: 70% !important;
}

.wh_welcome:not(:empty) {
    color: #0c2340;
    display: block;
    font-family: 'BrandingFont';
    font-size: 2.5em;
	font-weight: bold;
    margin: 0 auto .5em;
    padding: .5em;
    text-align: center;
	text-shadow: none;
    width: 80%;
}
a, a:hover, a:visited {
    color: #0c2340;
}
body {
    color: #0c2340;
}
.wh_top_menu ul li:hover {
    background-color: #1b3555;
    padding-top: 0em;
}
.wh_top_menu ul ul {
    position:relative;
    text-align: left;
    background-color: #111d32;
}
.wh_top_menu ul ul li {
    border-top-color: unset;
    border-top: 2px solid;
    float: none;
    min-width: 210px;
    position: relative;
}
.wh_top_menu ul li.active>ul {
    padding-left: 20px;
}
.footer-container, .footer-container a {
    text-align: center;
	color: white;
}
.wh_navigation_links, .wh_navigation_links .navnext, .wh_navigation_links .navprev {
    display: inline-flex;
    /*font-size: xxx-large;*/
    justify-content: center;
    margin-right: 10px;
}
.wh_navigation_links, .wh_navigation_links .navnext, .wh_navigation_links .navnext {
    margin-left: 10px;
}
/*Used to hide the .navnext button on the last topic. Issue with unwanted visibility 
 * of the navnext button on last topic (a reusable). Should be hidden on last topic page. 
 * Possibly because the topic is a reusable using keyref. date: 2024/05/02*/
a[rel="next"][href="../../topics/up/installation.html"] {
  display: none;
}
/*main page toc behaviour*/
.wh_main_page_toc_accordion_header {
	border-bottom: 4px solid white;
	background-color: #feef19;
	padding: 1em;
	color: #0c2340;
	font-size: x-large;
	font-weight: bold;
	word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
.wh_main_page_toc .wh_main_page_toc_accordion_header, .wh_main_page_toc > .wh_main_page_toc_entry {
    border-bottom: 4px solid white;
	padding: 1em 1em 1em 2em;
}
.wh_main_page_toc>.wh_main_page_toc_entry {
    border-bottom: 4px solid white;
    background-color: #feef19;
    padding: 1em;
}
.wh_main_page_toc .wh_main_page_toc_entry a {
    color: #0c2340;
    font-size: x-large;
    font-weight: bold;
}
.wh_toc_shortdesc {
    color: #0c2340;
    font-size: 1em;
}
.wh_tools {
    align-items: center;
    background-color: #fff;
    display: flex;
    flex: 1 0;
    justify-content: space-between;
    margin-bottom: 0.2em;
    padding: 5px 10px 5px 10px;
    position: relative;
}

.topictitle1, .topictitle2, .topictitle3, .topictitle4, .topictitle5, .topictitle6, *[class~="toc/title"], *[class~="placeholder/figurelist"] > *[class~="topic/title"], *[class~="placeholder/tablelist"] > *[class~="topic/title"], *[class~="index/groups"]::before {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

@media screen and (max-width: 591px) {
	.topictitle1 {
    font-size: 1.2em;
	}
	.topictitle1 .image {
	width: 9vw;
	margin-right: 0.5em;
	}
	.installation .image {
	width: 50%;
	}
}
/* .installation .ph {
    display: none;
}*/
.wh_top_menu ul .image:first-child {
	display: none;
}
.wh_top_menu ul .image:only-child {
	display: inline-block;
	width: 2em;
	padding-right: 0.5em;
}

.warningTable {
	background-color: #D7282F;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 10px;
	border: 1px solid #D7282F;
	padding: 0.5em;
}

.warningTable p {
	font-size: 1.5em;
	color: white;
}

@media screen and (min-width:1600px){
    .warningtable {
        width:80%;
    }
}

/*
.yellowTable {
	position: relative;
	background: no-repeat;
	background-image: url('oxygen-webhelp/template/resources/images/yellow_area.svg');
	z-index: -1;
	tr{
		line-height: 0.5;	
	}
}
*/
@media screen and (min-width: 1180px) {
	.yellowTable {
    max-width: 80%;
    height: auto;
    background-color: #feef19;
	}
}
@media screen and (max-width: 1179px) {
	.yellowTable {
    width: 100%;
    height: auto;
    background-color: #feef19;
 }
}

/*Hiding video controls (doesn't seem to work)
.video::-webkit-media-controls {
    display: none;
}*/

/* Limit video height to screen height. 
 * Outputclass "tr_video" must be on parent element, ie the table row or other.*/
.tr_video * {
    display:block;
    text-align:left;
    max-height:75vh;
    max-width:800px;
    background-color: #ffffff00 !important; /* Overwrites black default background*/
}

/* Limit width of text and other elements underneath videos.
 * Outputclass "tr_text" must be on parent element, ie the table row or other. */
.tr_text * {
    max-width:800px;
}

/* Custom width desktop table //
Makes tables take up less than 100% of screen width when shown on desktop*/
@media screen and (min-width: 1080px){
    .customtable {
        width:80%;
    }
}    

/* Table image size and alignment */
.restraining_image {
    width:500px;
    max-height:200px;
    object-fit:contain;
}

.adjustments_image {
    max-width:500px;
}


/* CSS from Daniel with new classes for styling the custom Axkid header etc----------------------------------------------------------------------*/

/* This adds the yellow line under the header. */
.wh_header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Thickness of the bottom border */
    background-color: #FEEF19; /* Color of the bottom border */
}

/* Size of logo in start page header */
.wh_logo img {
    max-height: 40px;
    object-fit:contain;
}

.navbar-toggler {
    order: 1; /* First */
    padding: 0;
}

.landscape-nav-container {
    order: 2; /* Second */
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
}

.wh_logo_and_publication_title {
    display: none;
    order: 3; /* Last */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}

/* Add an invisible placeholder to act like a third element */
.header-placeholder {
    order: 3;
    display: inline-block; /* Ensure it behaves like an inline element */
    visibility: hidden;    /* Invisible but taking space */
}

/* Topic title customization */
#ariaid-title1{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 18px !important;
    font-weight: bold;
    color: #BEC3D7;
}
/* Styling of step numbers in header */
#ariaid-title1 img{
    width:20px;
}

#wh_menu_mobile_button{
    border: 0;
}

/* Change styling/size for the menu-button here */
.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='%23BEC3D7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    height: 2.5em;
    width: 2.5em;
    margin-right: 1em;
}
 
 /* Change placement/size for the turn_device.png here */
.rotation-image {
    display: block;
    max-width: 60%; /* Ensure the image is responsive */
    height: auto;
    z-index: -1;  
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust back both horizontally and vertically */
}

.wh_publication_title{
    display: none;
} 

h1{
    margin: 0;
}

/* End of CSS from Daniel------------------------------------------------------------------------------------------------------------------- */

.wh_header {
    padding-top:0.5em !important;    
}

/* Vertical middle placement of content in table cells (overwrites default alignment )*/
.valignmiddle td, .valignmiddle th .valignmiddle entry {
    vertical-align: middle !important;
}

/* Parts table width on different screens */
.partstable {
    width:70vw;
}

@media screen and (max-width:1080px){
    .partstable {
        width:90vw;
    }
}

.partstable img {
    max-width:400px;
    object-fit:contain;
}

.partstable p {
    line-height:1.1;
    margin:0;
}

/* Symbol images in parent chapters (like Installation, Uninstall etc)*/
.chapterstart {
    display:flex;
    justify-content:center;
}

/* Max width of Distributors table */
.distTable {
    max-width:900px;
}

/* Max width of Recycling your car seat-table */
.recycleTable {
    max-width:700px;
}


/* Settings for the navbar and title container on LAST page
#recycling_your_car_seat .landscape-nav-container {
    justify-content: flex-start !important;
}      */

#recycling_your_car_seat #ariaid-title1 {
    margin-left:30px !important;
}

.yellowtablediv {
    background-color: #feef19;
    padding:10px;
    margin: 5px 0px 5px 0px;
}

/* INSTÄLLNINGAR FÖR SUB-SUB-MENY */
.wh_top_menu ul ul ul {
    left: 0% !important;
    position: relative !important;
    top: 0 !important;
}

/* Hide Axkid logo on Distributors page */
.axkidlogo {
    display:none;
}

/* Outputclass to hide elements in html output */
.htmlhide {
    display:none;
}

/* Distributors space between countries */
.distcountry {
    margin-top:30px;
}

.fontH2 {
	font-size: 18px !important;
	font-weight: bold !important;
	padding-top: 5px !important;
    padding-bottom: 0;
    color:#12193D;
}