$c-cms-tabs: #cd332b;
$menu-left-offset: 20px;
.bridge-cms-pages {

  .stepbystep-wrapper,
  .footer-container {
    position: relative;
    z-index: 1;
  }
  .main-container {
    z-index: 1;
    @media (max-width: 850px) {
      .main {
        display: table;
        .col-main {
          display: table-footer-group;
        }
        .col-left.sidebar {
          display: table-header-group;
        }
      }
    }
    .main {
      .sidebar {
        width: 24.3%;
        margin-top: 5px;

        .cms-tree {

          top: 105px;

          position: fixed;
          //padding-top: 10px;
          padding: 10px;
          background-color: #fff;
          margin-left: -20px;
          margin-top: -20px;
          z-index: 0;

          //@include transition(top 0.75s linear);
          @include transition(padding 0.75s linear);

          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

          &.footer-sticky {
            position: absolute;
          }

        }

        @media (max-width: 850px) {
          .cms-tree {
            position: relative !important;
            top: 0 !important;
            padding-top: 0 !important;
            display: none;
          }
        }

        @media (min-width: 850px) {
          .cms-tree {
            position: fixed !important;
            top: 105px !important;
            padding-top: 108px !important;
          }
        }

        @include bp(max-width, $bp-medium) {
          width: 100%;

          .cms-tree {
            position: static;
            margin: 0;
          }
        }

        @include bp(max-width, $bp-small) {
          .cms-tree {
           // display: none;
          }
        }

        // appearance
        .cms-tree { // ul.cms-tree
          li {
            ul {
              li {
                font-size: 16px;
                margin-bottom: 12px;

                a {
                  color: $main-blue;
                  padding-left: $menu-left-offset;

                  @include transform(translateX(0));
                  @include transition(all .3s);

                  &:hover {
                    @include transform(translateX(-5px));
                    font-weight: 700;
                  }
                }

                &.active {
                  & > a {
                    font-weight: 700;
                    padding-left: 0;
                    color: $main-color;
                  }

                  ul {
                    overflow: hidden;
                    padding-top: 11px;

                    & > li {
                      font-size: 12px;
                      margin-bottom: 9px;

                      &.highlighted {
                        font-weight: bold;
                      }

                      &:last-child {
                        margin-bottom: 5px;
                      }

                      a {
                        color: $main-color;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        // behavior
        .cms-tree { // ul.cms-tree

          ul,
          li {
            display: none;
          }


          & > li {
            & > a {
              display: none;
            }
            &.active {
              display: block;
              & > ul {
                display: block;
                li {
                  display: block;

                  &.active {
                    & > ul {
                      display: block;
                    }
                  }
                }
              }
            }
          }
        }

      }
      .std {
        .ui-accordion {
          .ui-accordion-header {
            position: relative;
            padding: 0.5em;
            text-align: center;
            outline: 1px solid #e1e1e1;
            cursor: pointer;

            @include bp(max-width, $bp-small) {
              padding: 0.5em 2em;
            }

            @include transition(background-color 0.35s, outline 0.35s );

            .ui-icon {
              position: absolute;
              right: 0.8em;
              top: 0.7em;
              color: #e1e1e1;
              @include fa-icon();
              &:before {
                content: '\f078';
              }

            }

            &.ui-state-active {
              color: #fff;
              background-color: $c-cms-tabs;
              outline-color: transparent;

              .ui-icon {
                @include transform(rotate(180deg));
                color: #B51F18;
              }
            }


          }
          .ui-accordion-content {
            & > .inner {
              padding: .5em 0px 1.5em;
            }
          }
        }
      }
    }
  }


  #header.show {
    + * + * + .main-container {
      .main .sidebar .cms-tree {
        //top: calc(105px + 108px);
        padding-top: 108px;
      }
    }
  }

}

#header .cms-submenus,
#top-cms-links-mobile .cms-tree {
  .anchors {
    display: none !important;
  }
}

#top-cms-links-mobile .cms-tree {
  & > li > ul {
    display: none !important;
  }
}

body.cms-page-view {
  .page {
    margin-top: 147px;
  }
  .mobile-courses-search {
    margin-bottom: 0;
    border-top: 1px solid #e1e1e1;
    margin-top: 0;
    padding-top: 10px;
    @media (min-width: 850px) {
      border-top: 0;
    }
    .skip-content {
      overflow: hidden;
    }
  }
  .cms-tree a {
    @media (max-width: 850px) {
      padding-left: 0 !important;
      font-size: 18px;
    }
  }
  .cms-tree .active ul li.active ul.anchors li a{
    @media (max-width: 850px) {
      padding-left: 20px !important;
    }
  }
  .cms-navigation-wrapper {
    display: block;
    z-index: 1;
    position: relative;
    @media (min-width: 850px) {
      display: none;
    }
    p {
      font-size: 18px;
      letter-spacing: 0.4px;
      padding: 14px 15px;
      color: $main-color;
      cursor: pointer;
      .cms-page,
      .cms-separator {
        font-weight: 600;
      }
      i {
        float: right;
      }
    }
  }
}