/* FONT COLOR AND OTHER GENERAL STYLING */
a, a:hover, a:visited {
    color: #0c2340;
}

body {
    color: #0c2340;
}

/* NOTES, WARNINGS, IMPORTANT ETC */
/*hazard-content-border*/
                *[class~="hazard-d/hazardstatement"] th,
                *[class~="hazard-d/hazardstatement"] td {
                  border: 0;
                }
                /*notes-style-borders-box*/
                *[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
                  border: 1px solid;
                  border-radius: 11px;
                }
                /*notes-colors-colorful*/
                *[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
                  background-color: rgba(0, 120, 160, 0.09);
                  border-color: #0078A0;
                  padding: 1em 1.5em 1em 4em;
                  background-position: 1em;
                  margin:1em 0em 1em 0em;

                }
                *[class~="topic/note"].note_danger,
                *[class~="topic/note"].note_caution {
                  background-color: rgba(255, 202, 45, 0.1);
                  border-color: #606060;
                  padding: 1em 1.5em 1em 4em;
                  background-position: 1em;
                  margin:1em 0em 1em 0em;

                }
                *[class~="topic/note"].note_warning,
                *[class~="topic/note"].note_attention,
                *[class~="topic/note"].note_important {
                  background-color: rgba(255, 202, 45, 0.1);
                  border-color: #FFCA2D;
                  padding: 1em 1.5em 1em 4em;
                  background-position: 1em;
                  margin:1em 0em 1em 0em;

                }
                *[class~="topic/note"].note_restriction {
                  background-color: rgba(255, 226, 225, 0.32);
                  border-color: #FF342D;
                  padding: 1em 1.5em 1em 4em;
                  background-position: 1em;
                  margin:1em 0em 1em 0em;
                }



/*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: 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: #FDF8B2;
    position: sticky;
    top:0px;
    z-index:1;
    padding-top:0.5em !important;    
}

.wh_top_menu > ul > li a, .wh_indexterms_link a::before {
    color: #12193D;
}
.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;*/
    }    	
}

@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%;
}


.wh_top_menu ul li:hover {
    background-color: #FDF8B2 !important;
    padding-top: 0em;
}

.wh_top_menu a:hover {
    font-weight:bold !important;
    background-color:#FDF8B2;
}

.wh_top_menu ul ul {
    position:relative;
    text-align: left;
    background-color: #ffffff;
    border:none;
    
}
.wh_top_menu ul ul li {
    border:none;
    float: none;
    min-width: 210px;
    position: relative;
}

.wh_top_menu ul ul li a:hover {
    background-color: #ffffff;
}

.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; */
    display:none;
}

.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;
}

/* MISC TABLE SETTINGS*/

        /* .Customtable for decreasing width when shown on desktop*/
        @media screen and (min-width: 1080px){
            .customtable {
                width:80%;
            }
        }   
        
        #placement_in_car_up table {
            max-width:980px !important;
        }
        
        .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%;
            }
        }
        
        @media screen and (min-width: 1180px) {
            .yellowTable {
                max-width: 80%;
                height: auto;
            	}
        }
        @media screen and (max-width: 1179px) {
            .yellowTable {
                width: 100%;
                height: auto;
                background-color: #feef19;
             }
        }
        
        .yellowTable td {
            background-color: #feef19 !important;
        }


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


/* Size of logo in start page header */
.wh_logo img {
    display:none;
}

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

/* Header elements container */
.landscape-nav-container {
    order: 2; /* Second */
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    gap: 2em;
}


.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: #12193D;
}
/*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='%2312193D' 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;
    text-align: center;
}

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

/* 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;
}

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

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



/* LANGUAGES WITH SPECIAL CHARACTERS *--------------------------------------------------------------------------------------------------------------------------------------------------------------/
/* Thai */
:lang(th){
    font-family: 'Tahoma', 'Arial Unicode MS', sans-serif;
}

/* Korean */
:lang(ko) {
    font-family: 'Malgun Gothic', 'Arial Unicode MS', sans-serif;
}

/* Arabic */
:lang(ar) {
    font-family: 'Amiri', 'Arial Unicode MS', sans-serif;
}

:lang(ja) {
    font-family: 'Meiryo', 'Arial Unicode MS', sans-serif;
}

/* Order of header elements for RTL languages */
    html[dir=rtl] .landscape-nav-container {
        flex-direction: row-reverse;
    }
    
    /* Menu styling for RTL languages */
     html[dir=rtl] .wh_top_menu> ul {
         display:flex;
         flex-direction:column !important;
         align-items:flex-start;
         justify-content:flex-start;
     }
     
     html[dir=rtl] .wh_top_menu {
         float: right;
    }


/* First page table styling*/
        .start-arrow {
            max-width: 15vw !important;
        }
        
        .startpagetable tr td {
           vertical-align: middle !important;
           max-height:80vh !important;
        }
        
        @media screen and (min-width:1180px) {
            .startpagetable {
                max-width:70vw;
            }
            
            .start-arrow {
            max-width: 10vw !important;
        }
        }

/* Hide pdf page header images with opc .iconhead*/
        .iconhead {
            display:none;
        }
        
        .up_anchoragetypes {
            display:none;
        }

/* Product overview table */
        .product_overview_table tr td {
            vertical-align:middle !important;
        }
        
        .product_overview_table p {
            margin-top:1em;
        }
        
        .product_overview_table img {
            margin-right:1.5em;
            max-width:450px;
        }
        

   
/*Merged instruction topics settings. Add instructiontopic opc to <topic> element. */
        .instructiontopic .body * {
            max-width:800px !important;
        }
        
        /* Set responsive video height and overwrite black video background */
         .instructiontopic .video-container, .video {
            display:block;
            max-height:75vh !important;
            background-color: #ffffff00 !important; 
            margin-top:1em;
            margin-bottom:1em;
        }

/* NEW START PAGE STYLING */
    
    .startpage_layout {
        display:flex;
        flex-direction:row;
        justify-content:space-evenly;   
        align-items: center;
 }
    
    .installation_shortcut {
        width:70%;
        display:flex;
        align-items:center;
        justify-content:center;
        max-height: 50vh;
    } 

    @media screen and (min-width:760px) {
        .installation_shortcut {
        width:70%;
        display:flex;
        align-items:center;
        justify-content:center;
        }    
        .startpage_layout {
        padding-left:200px;
        display:flex;
        flex-direction:row;
        justify-content:space-between;   
        align-items:center;
        } 
    }
    
    .installation_shortcut div {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        margin-bottom:1em;
        padding:10px 10px 5px 10px;
        width:300px;
        background-color:#F8F8F8;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        font-weight:bold;
        text-align:center;
        font-size:14pt;
        max-height:75vh;
    }

    @media screen and (min-height:320px){    
            .installation_shortcut div {
            max-height: 75vh;
            font-size:16pt;           
            }
        
            .installation_shortcut img {
            max-height:55vh;
            }
    }   
    
    .installation_shortcut img {
        max-height:35vh;
    }


    .buttongroup {
        display:flex;
        flex-direction:column;
        justify-content:right;
    }
 
    .buttongroup div {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-bottom:1em;
    padding:10px 5px 5px 10px;
    width:140px;
    background-color:#F8F8F8;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-weight:bold;
    text-align:center;
    font-size:12pt;
}

@media screen and (min-height:350px){
     .buttongroup div {
     padding: 10px 10px 5px 10px;
     }
}

/* Hide button icons on small screens */
@media screen and (max-height:400px) {
         .buttongroup img {
             display:none;
         }
     }


/* Opc to add space above any element*/
.topmargin {
    margin-top:2em;
}

/* Anchorage choice buttons */
    .anchoragechoices {
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
    }
    
    .anchoragechoices div {
        display:flex;
        flex-direction:row;
        align-items:center;
        text-align:center;
        justify-content:space-evenly;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        margin:2vw;
        padding:20px;
        max-width:25vw;
        max-height:75vh;
        background-color:#F8F8F8;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    @media screen and (min-width: 820px) {
        .anchoragechoices div {
            width:200px;
            margin:2em;
        }
    }

    #anchorage_choices p {
        text-align:center;
    }
    


@media screen and (min-width:980px){
    .wh_content_area {
        padding-right:10vw;
        padding-left:10vw;
    }
}


/* New css classes from Daniel 2025-05-07 */

.circle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #12193D;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
}

.sidebar {
  width: 250px;
  background-color: #FDF8B2;
  padding: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  position: fixed;
  top: 55.25;
  left: 0;
  height: 100vh;           /* Full height */
  z-index: 10;           /* Keep it above other content */
  overflow-y: auto;        /* Scroll if content is long */
}


.sidebar.visible {
  transform: translateX(0);
}

.main-content {
  flex: 1;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.sidebar.visible ~ .main-content {
  margin-left: 250px;
}

.sidebar.no-transition {
  transition: none !important;
}