/*
 * ============LICENSE_START==========================================
 * ONAP Portal SDK
 * ===================================================================
 * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
 * ===================================================================
 *
 * Unless otherwise specified, all software contained herein is licensed
 * under the Apache License, Version 2.0 (the "License");
 * you may not use this software except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *             http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Unless otherwise specified, all documentation contained herein is licensed
 * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
 * you may not use this documentation except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *             https://creativecommons.org/licenses/by/4.0/
 *
 * Unless required by applicable law or agreed to in writing, documentation
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * ============LICENSE_END============================================
 *
 * 
 */
 $topnav-background-color: #f2f2f2;

 .siderbar-height-noHeader{
     top: 0px;
 }
 
 .siderbar-height{
     top: 56px;
 }
 
 .sidebar-list {
     border-radius: 0;
     position: fixed;
     z-index: 1000;
     left: 235px;
     width: 235px;
     //height: 100%;
     height: 76%;
     margin-left: -235px;
     //margin-bottom: 48px;
     margin-bottom: 0px;
     border: none;
     border-radius: 0;
     overflow-y: auto;
     background-color: $topnav-background-color;
     top: 7.2em;
     //top: 0em;
     overflow-x: hidden;
     //padding-bottom: 40px;
     padding-bottom: 5em;
     white-space: nowrap;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -ms-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     .list-group {
         a.list-group-item {
             background: $topnav-background-color;
             border: 0;
             border-top: 1px solid #999;
             border-radius: 0;
             color: #0568ae;
             text-decoration: none;
             .fa {
                 margin-right: 10px;
                 color: #000;
             }
         }
         a:hover {
             background: darken($topnav-background-color, 5%);
             color: #fff;
         }
         a.router-link-active {
             background: darken($topnav-background-color, 5%);
             color: #fff;
         }
         .header-fields {
             padding-top: 10px;
 
             > .list-group-item:first-child {
                 border-top: 1px solid rgba(255, 255, 255, 0.2);
             }
         }
     }
     .sidebar-dropdown {
         *:focus {
             border-radius: none;
             border: none;
         }
         .panel-title {
             font-size: 1rem;
             height: 50px;
             margin-bottom: 0;
             a {
                 color: #999;
                 text-decoration: none;
                 font-weight: 400;
                 background: $topnav-background-color;
                 span {
                     position: relative;
                     display: block;
                     padding: 0.75rem 1.5rem;
                     padding-top: 1rem;
                 }
             }
             a:hover,
             a:focus {
                 color: #fff;
                 outline: none;
                 outline-offset: -2px;
             }
         }
         .panel-title:hover {
             background: darken($topnav-background-color, 5%);
         }
         .panel-collapse {
             border-radious: 0;
             border: none;
             .panel-body {
                 .list-group-item {
                     border-radius: 0;
                     background-color: $topnav-background-color;
                     border: 0 solid transparent;
                     a {
                         color: #999;
                     }
                     a:hover {
                         color: #fff;
                     }
                 }
                 .list-group-item:hover {
                     background: darken($topnav-background-color, 5%);
                 }
             }
         }
     }
 }
 
 .nested-menu {
     .list-group-item {
         cursor: pointer;
     }
     .nested {
         list-style-type: none;
     }
     ul.submenu {
         display: none;
         height: 0;
     }
     & .expand {
         ul.submenu {
             display: block;
             list-style-type: none;
             height: auto;
             li {
                 a {
                     color: #0568ae;
                     padding: 10px;
                     display: block;
                 }
             }
         }
     }
 }
 @media screen and (max-width: 992px) {
     .sidebar {
         top: 54px;
         left: 0px;
     }
 }
 @media print {
     .sidebar {
         display: none !important;
     }
 }
 @media (min-width: 992px) {
     .header-fields {
         display: none;
     }
 }
 
 ::-webkit-scrollbar {
     width: 8px;
 }
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
     border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
     border-radius: 3px;
     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
 }
 .sidebar{
     position: relative;
 }
 .toggle-button {
     position: fixed;
     width: 236px;
     cursor: pointer;
     padding: 12px;
     // bottom: 5.5em;
     top: 3.5em;
     left: 0;
     z-index: 1001;
     color: #000;;
     background: #f2f2f2;
     i {
         font-size: 23px;
     }
     &:hover {
         background: darken($topnav-background-color, 5%);
         color: #fff;
     }
     border-bottom: 1px solid #999;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -ms-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
 }
 
 .collapsed {
     width: 60px;
     span {
         display: none;
     }
 }