.container-all-menu {
  height: calc(100% - 113px);
  overflow: hidden !important;
  position: absolute;
  z-index: 3;
  background-color: white;
  top: 80px;
  border-top-right-radius: 10px !important;
  border-radius: 0px 10px 0px 0px;
  box-shadow: 0 0 0 1px #4169e2;
  margin-bottom: 20px;
  cursor: pointer;
}

.container-left-menu-title-and-icon {
  text-align: center;
  width: 100%;
  background-color: #ebf0ff;
  font-family: "Merriweather Sans Regular",sans-serif;
  color: #1a1a1c;
  font-size: 16px;
  display: flex;
  align-items: center;
}

/* .container-left-menu-title-and-icon.expanded {
  text-align: start;
  margin-left: 5px;
} */

/* .container-left-menu-title.menu-title-expanded::before {

} */

.container-left-menu-title-and-icon::before {
  content: "";
  background-image: url(/themes/custom/assets/svgs/Notebook.svg);
  width: 25px;
  height: 25px;
  background-size: cover;
  display: block;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
}

.container-left-menu-title {
  text-align: center;
  width: 100%;
  background-color: #ebf0ff;
  font-family: "Merriweather Sans Regular",sans-serif;
  color: #1a1a1c;
  font-size: 16px;
}
.container-left-menu-title-and-icon:not(.active) {
  cursor: pointer;
}

.container-left-menu-title-and-icon span.icon-right {
  height: 100%;
  background-color: #c9d5f9;
  padding: 25px 8px 25px 5px;
  border-top-right-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer;
}

.container-left-menu-title-and-icon span.icon-right::before {
  content: "";
  background-image: url(/themes/custom/assets/svgs/next-2.svg);
  width: 20px;
  height: 20px;
  background-size: 75%;
  display: block;
  border: 2px solid #4169e2;
  border-radius: 25px;
  background-position: 2px 2.2px;
  cursor: pointer;
  background-repeat: no-repeat;
}

.container-left-menu-title-and-icon span.icon-right.icon-expanded::before {
  transform: rotate(180deg);
}

.container-left-menu-title.menu-title-expanded {
  /* display: none; */
  text-align: start;
  margin-left: 5px;
  font-family: "Merriweather Sans Regular",sans-serif;
  color: #1a1a1c;
  font-size: 14px;
}

.overflow-ellipsis {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unfccc-sidebar-nav::-webkit-scrollbar {
  width: 10px;
}
 
.unfccc-sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgb(176, 192, 238);
  border-radius: 8px;
}

.unfccc-sidebar-nav .tree {
  display: flex;
}

.unfccc-sidebar-nav .tree > a {
  display: none;
}

.unfccc-sidebar-nav .tree, .section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

@media (min-width: 991px) {

  .paragraph--type--related-content-boxes-paragraph .field--name-field-rcb-body-paragraph ul {
    min-width: unset;
  }

  .unfccc-sidebar-nav .tree, .section ul {
    min-width: 400px;
    cursor: pointer;
  }

  .container-all-menu {
    max-width: 450px;
    left:0;
  }

  .container-left-menu-title-and-icon.expanded {
    min-width: 450px !important;
  }
}

.unfccc-sidebar-nav ul li {
  border-bottom: 1px solid #ebf0ff;
}

.unfccc-sidebar-nav ul > li > ul > li > a:hover{
  background-color: #abbdf0;
}

.unfccc-sidebar-nav .tree li > a {
  width: calc(100% - 40px);
}

/* @TODO - refactor this to avoid this repetitive styling. Define common styles together */
.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > a {
  padding-left: 45px;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > a:hover {
  background-color: #abbdf0;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > ul > li > a {
  padding-left: 60px;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > ul > li > a:hover {
  background-color: #abbdf0;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > ul > li > ul > li > a {
  padding-left: 75px;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > ul > li > ul > li > a:hover {
  background-color: #abbdf0;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > a.sidebar-nav-active-trail {
  color: #4169e2;
  background: #ebf0ff;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > a.sidebar-nav-active-trail {
  color: #4169e2;
  background: #ebf0ff;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > ul > li > a.sidebar-nav-active-trail {
  color: #4169e2;
  background: #ebf0ff;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > ul > li > ul > li > ul > li > a.sidebar-nav-active-trail {
  color: #4169e2;
  background: #ebf0ff;
}


.unfccc-sidebar-nav .tree ul > li > a{
  padding: 16px 36px 17px 26px;
  margin: 0;
  color: #4169e2;
  font-size: 14px;
  font-family: "Merriweather Sans Bold",sans-serif;
  position: relative;
}

.unfccc-sidebar-nav .tree > ul > li > ul > li > a {
  padding-left: 35px;
}

.unfccc-sidebar-nav .tree ul.toggle-active > li > a {
  font-family: "Merriweather Sans Regular",sans-serif;
  color: #424245;
  min-height: 45px;
}

.unfccc-sidebar-nav .tree li:last-child {
  border: 0;
}

.unfccc-sidebar-nav .section {
  position: relative;
}

.unfccc-sidebar-nav .section ul {
  margin-top: 10px;
}

nav.unfccc-sidebar-nav.contextual-region.active {
  align-items: center;
  display: block;
  outline: 1px solid #4169e2;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 71px);
  display: none;
}

#block-inpagesidenavigation.contextual-region {
  position: revert;
}

nav.unfccc-sidebar-nav.contextual-region.active.expanded{
 display: block;
}

.unfccc-sidebar-nav ul.has-children.section li.has-children ul.has-children.section {
  display: none;
}

.sidebar-parent-link > li a[target="_blank"]:hover, .sidebar-parent-link > li a[target="_self"]:hover {
  background-color: #abbdf0;
  padding-right: 20px;
}

.unfccc-sidebar-nav a:not([href]):hover{
  background-color: transparent !important;
}

.unfccc-sidebar-nav ul.has-children.section li.has-children ul.has-children.section.toggle-active {
  display: block;
}

.unfccc-sidebar-nav.caret-toggle {
  cursor: pointer;
}

#block-inpagesidenavigation > div > div > nav > div.tree > span::before {
  display: none;
}

.unfccc-sidebar-nav .caret-toggle::before {
  content: "";
  background-image: url(/themes/custom/assets/svgs/right-arrow.svg);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 10px;
  position: absolute;
  right: 1px;
  transform: rotate(90deg) translate(-50%,0px);
  background-position: center;
  margin-top: 27px;
  cursor: pointer;
}

.unfccc-sidebar-nav .caret-expanded {
  cursor: pointer;
}

.unfccc-sidebar-nav .caret-expanded::before {
  transform: rotate(-90deg) translate(-50%,0px);
  cursor: pointer;
  margin-top: -17px;
}

.unfccc-sidebar-nav .toggle-active {
  display: block;
}

.last-word {
  display: inline-block;
}

.unfccc-sidebar-nav > .tree ul li > a.ext .overflow-ellipsis .last-word:after{
  content: "";
  background-image: url("../../../../themes/custom/assets/svgs/Icons-External-link-blue.svg");
  width: 18px;
  height: 18px;
  background-size: cover;
  position: relative;
  border: none;
  background-color: transparent;
  transform: translate(0px, -18%);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 6px;
  bottom: -1px;
}

main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon {
  flex-direction: column;
  height: 68px;
  justify-content: center;
  min-width: 120px;
  position: relative;
  border-bottom: 1px solid rgb(65, 105, 226);
}

main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon::before {
  margin: 0;
  margin-right: 30px;
}

main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon .container-left-menu-title {
  width: auto;
  margin-right: 30px;
}

main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon span.icon-right {
  position: absolute;
  right: 0;
}

@media (min-width: 991px) and (max-width: 1200px) {
  body:not(.user-logged-in) .container-all-menu  {
    position: fixed;
    height: calc(100% - 224px);
    top: 224px;
  }

  body.user-logged-in .container-all-menu {
    position: fixed;
    height: calc(100% - 385px);
    top: 385px;
  }
  
}

@media (min-width: 1201px) {
  body:not(.user-logged-in) .container-all-menu {
    position: fixed;
    height: calc(100% - 200px);
    top: 200px;
  }

  body.user-logged-in .container-all-menu {
    position: fixed;
    height: calc(100% - 322px);
    top: 322px;
  }
}



@media (max-width: 990px) {

  main .section article .container-full-page{
    margin-top: 95px;
  }

  main .section #block-inpagesidenavigation .container-all-menu {
    width: 100%;
    height: auto;
  }

  main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon {
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: 68px;
  }

  main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon::before {
    margin: 0;
  }

  main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon .container-left-menu-title {
    width: auto;
    margin-right: 0;
  }

  main .section #block-inpagesidenavigation .container-all-menu .container-left-menu-title-and-icon span.icon-right {
    position: absolute;
    right: 0;
  }

  main .section #block-inpagesidenavigation .container-left-menu-title-and-icon span.icon-right::before {
    transform: rotate(90deg);
  }

  main .section #block-inpagesidenavigation .container-left-menu-title-and-icon span.icon-right.icon-expanded::before {
    transform: rotate(-90deg);
  }
}