nav.nav-extended { height: auto } nav.nav-extended .nav-wrapper { min-height: 56px; height: auto } nav.nav-extended .nav-content { position: relative; line-height: normal } nav a { /* color: #fff */ } nav i,nav [class^="mdi-"],nav [class*="mdi-"],nav i.material-icons { display: block; font-size: 24px; /* height: 56px; */ line-height: 56px; } nav .nav-wrapper { position: relative; height: 100% } @media only screen and (min-width: 993px) { nav a.button-collapse { display:none } } nav .button-collapse { float: left; position: relative; z-index: 1; height: 56px; margin: 0 18px } nav .button-collapse i { height: 56px; line-height: 56px } nav .brand-logo { position: absolute; color: #fff; display: inline-block; font-size: 2.1rem; padding: 0 } nav .brand-logo.center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } @media only screen and (max-width: 992px) { nav .brand-logo { left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } nav .brand-logo.left,nav .brand-logo.right { padding: 0; -webkit-transform: none; transform: none } nav .brand-logo.left { left: 0.5rem } nav .brand-logo.right { right: 0.5rem; left: auto } } nav .brand-logo.right { right: 0.5rem; padding: 0 } nav .brand-logo i,nav .brand-logo [class^="mdi-"],nav .brand-logo [class*="mdi-"],nav .brand-logo i.material-icons { float: left; margin-right: 15px } nav .nav-title { display: inline-block; font-size: 32px; padding: 28px 0 } nav ul { /* margin: 0 */ } nav ul li { -webkit-transition: background-color .3s; transition: background-color .3s; /* float: left; */ /* padding: 0 */ position:relative; } nav ul li.active { background-color: rgba(0,0,0,0.1) } nav ul a { -webkit-transition: background-color .3s; transition: background-color .3s; font-size: 1rem; color: #fff; display: block; padding: 0 15px; cursor: pointer } nav ul a.btn,nav ul a.btn-large,nav ul a.btn-large,nav ul a.btn-flat,nav ul a.btn-floating { margin-top: -2px; margin-left: 15px; margin-right: 15px } nav ul a.btn>.material-icons,nav ul a.btn-large>.material-icons,nav ul a.btn-large>.material-icons,nav ul a.btn-flat>.material-icons,nav ul a.btn-floating>.material-icons { height: inherit; line-height: inherit } nav ul a:hover { background-color: rgb(0 0 0 / 0%); color: #000; } nav ul.left { float: left } nav form { height: 100% } nav .input-field { margin: 0; height: 100% } nav .input-field input { height: 100%; font-size: 1.2rem; border: none; padding-left: 2rem } nav .input-field input:focus,nav .input-field input[type=text]:valid,nav .input-field input[type=password]:valid,nav .input-field input[type=email]:valid,nav .input-field input[type=url]:valid,nav .input-field input[type=date]:valid { border: none; -webkit-box-shadow: none; box-shadow: none } nav .input-field label { top: 0; left: 0 } nav .input-field label i { color: rgba(255,255,255,0.7); -webkit-transition: color .3s; transition: color .3s } nav .input-field label.active i { color: #fff } .navbar-fixed { position: relative; height: 56px; z-index: 997 } .navbar-fixed nav { position: fixed } @media only screen and (min-width: 601px) { nav.nav-extended .nav-wrapper { min-height:64px } nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i { /* height: 64px; */ /* line-height: 64px */ } .navbar-fixed { height: 64px } } @font-face { font-family: "Roboto"; src: local(Roboto Thin),url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"),url("../fonts/roboto/Roboto-Thin.woff") format("woff"); font-weight: 100 } @font-face { font-family: "Roboto"; src: local(Roboto Light),url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),url("../fonts/roboto/Roboto-Light.woff") format("woff"); font-weight: 300 } @font-face { font-family: "Roboto"; src: local(Roboto Regular),url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),url("../fonts/roboto/Roboto-Regular.woff") format("woff"); font-weight: 400 } @font-face { font-family: "Roboto"; src: local(Roboto Medium),url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),url("../fonts/roboto/Roboto-Medium.woff") format("woff"); font-weight: 500 } @font-face { font-family: "Roboto"; src: local(Roboto Bold),url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),url("../fonts/roboto/Roboto-Bold.woff") format("woff"); font-weight: 700 } .side-nav .collapsible,.side-nav.fixed .collapsible { border: none; -webkit-box-shadow: none; box-shadow: none } .side-nav .collapsible li,.side-nav.fixed .collapsible li { padding: 0 } .side-nav .collapsible-header,.side-nav.fixed .collapsible-header { background-color: transparent; border: none; line-height: inherit; height: inherit; padding: 0 16px } .side-nav .collapsible-header:hover,.side-nav.fixed .collapsible-header:hover { background-color: rgba(0,0,0,0.05) } .side-nav .collapsible-header i,.side-nav.fixed .collapsible-header i { line-height: inherit } .side-nav .collapsible-body,.side-nav.fixed .collapsible-body { border: 0; background-color: #fff } .side-nav .collapsible-body li a,.side-nav.fixed .collapsible-body li a { padding: 0 23.5px 0 31px } .side-nav { position: fixed; width: 300px; left: 0; top: 0; margin: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); height: 100%; height: calc(100% + 60px); height: -moz-calc(100%); padding-bottom: 60px; background-color: #fff; z-index: 99999; overflow-y: auto; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-105%); transform: translateX(-105%); } .side-nav.right-aligned { right: 0; -webkit-transform: translateX(105%); transform: translateX(105%); left: auto; -webkit-transform: translateX(100%); transform: translateX(100%) } .side-nav .collapsible { margin: 0 } .side-nav li { float: none; line-height: 48px } .side-nav li.active { background-color: rgba(0,0,0,0.05) } .side-nav li>a { color: rgba(0,0,0,0.87); display: block; font-size: 14px; font-weight: 500; height: 48px; line-height: 48px; } .side-nav li>a:hover { background-color: rgba(0,0,0,0.05) } .side-nav li>a.btn,.side-nav li>a.btn-large,.side-nav li>a.btn-large,.side-nav li>a.btn-flat,.side-nav li>a.btn-floating { margin: 10px 15px } .side-nav li>a.btn,.side-nav li>a.btn-large,.side-nav li>a.btn-large,.side-nav li>a.btn-floating { color: #fff } .side-nav li>a.btn-flat { color: #343434 } .side-nav li>a.btn:hover,.side-nav li>a.btn-large:hover,.side-nav li>a.btn-large:hover { background-color: #2bbbad } .side-nav li>a.btn-floating:hover { background-color: #26a69a } .side-nav li>a>i,.side-nav li>a>[class^="mdi-"],.side-nav li>a li>a>[class*="mdi-"],.side-nav li>a>i.material-icons { /* float: left; */ height: 48px; line-height: 45px; margin: 0 15px 0 0; width: 24px; color: rgba(0,0,0,0.54); } .side-nav .divider { margin: 8px 0 0 0 } .side-nav .subheader { cursor: initial; pointer-events: none; color: rgba(0,0,0,0.54); font-size: 14px; font-weight: 500; line-height: 48px } .side-nav .subheader:hover { background-color: transparent } .side-nav .user-view,.side-nav .userView { position: relative; padding: 32px 32px 0; margin-bottom: 8px } .side-nav .user-view>a,.side-nav .userView>a { height: auto; padding: 0 } .side-nav .user-view>a:hover,.side-nav .userView>a:hover { background-color: transparent } .side-nav .user-view .background,.side-nav .userView .background { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1 } .side-nav .user-view .circle,.side-nav .user-view .name,.side-nav .user-view .email,.side-nav .userView .circle,.side-nav .userView .name,.side-nav .userView .email { display: block } .side-nav .user-view .circle,.side-nav .userView .circle { height: 64px; width: 64px } .side-nav .user-view .name,.side-nav .user-view .email,.side-nav .userView .name,.side-nav .userView .email { font-size: 14px; line-height: 24px } .side-nav .user-view .name,.side-nav .userView .name { margin-top: 16px; font-weight: 500 } .side-nav .user-view .email,.side-nav .userView .email { padding-bottom: 16px; font-weight: 400 } .drag-target { height: 100%; width: 0; position: fixed; top: 0; z-index: 998; } .side-nav.fixed { left: 0; -webkit-transform: translateX(0); transform: translateX(0); position: fixed } .side-nav.fixed.right-aligned { right: 0; left: auto } @media only screen and (max-width: 992px) { .side-nav.fixed { -webkit-transform:translateX(-105%); transform: translateX(-105%) } .side-nav.fixed.right-aligned { -webkit-transform: translateX(105%); transform: translateX(105%) } .side-nav a { padding: 0 16px } .side-nav .user-view,.side-nav .userView { padding: 16px 16px 0 } } .side-nav .collapsible-body>ul:not(.collapsible)>li.active a,.side-nav.fixed .collapsible-body>ul:not(.collapsible)>li.active a { color: #fff } .side-nav .collapsible-body { padding: 0 } #sidenav-overlay { position: fixed; top: 0; left: 0; right: 0; height: 120vh; background-color: rgba(0,0,0,0.5); z-index: 1; will-change: opacity; } .preloader-wrapper { display: inline-block; position: relative; width: 50px; height: 50px } .preloader-wrapper.small { width: 36px; height: 36px } .preloader-wrapper.big { width: 64px; height: 64px } .preloader-wrapper.active { -webkit-animation: container-rotate 1568ms linear infinite; animation: container-rotate 1568ms linear infinite } @-webkit-keyframes container-rotate { to { -webkit-transform: rotate(360deg) } } @keyframes container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @media screen and (max-width: 767px){ .mobile_header_section nav ul { display: block; } .mobile_header_section ul#nav-mobile ul { position: relative; width: 100%; background: none; border-bottom: 1px solid #dbdbdb; } .collapsible-header{ position:relative; } .collapsible-header span{ position: absolute; right: 0; font-size: 16px; } .mobile_header_section ::-webkit-scrollbar { height: 10px; width: 4px!important; } .mobile_header_section nav ul li{ color: rgba(0,0,0,0.87); display: block; font-size: 14px; font-weight: 500; border-bottom: solid 1px #fff !important; width: 100% !important; background: white; position:relative; height: auto; display: inline-block; line-height: normal; } .mobile_header_section nav { background: none;    z-index: 2; } ul.collapsible.collapsible-accordion .collapsible-header i { float: left; height: 48px; line-height: 48px; margin: 0 15px 0 0; width: 24px; color: rgba(0,0,0,0.54); } ul.collapsible.collapsible-accordion .collapsible-body a.waves-effect.waves-blue{ border-bottom: solid 1px #fff !important; } .mobile_header_section nav ul.collapsible.collapsible-accordion .collapsible-body li{ border-bottom: solid 1px #fff !important; } .sidebar { width:100%; height: 100%; position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sidebar #leftside-navigation ul, .sidebar #leftside-navigation ul ul { margin: -2px 0 0; padding: 0; } .sidebar #leftside-navigation ul li { list-style-type: none; } .sidebar #leftside-navigation ul li.active ul { display: block; } .sidebar #leftside-navigation ul li a { text-decoration: none; display: block; padding: 0 0 0 15px; font-size: 13px; outline: 0; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; border-bottom: solid 1px #fff !important; -o-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; transition: all 200ms ease-in; } .sidebar #leftside-navigation ul li a span { display: inline-block; } .sidebar #leftside-navigation ul li a i { width: 20px; font-size: 16px; } .sidebar #leftside-navigation ul li a i .fa-angle-left, .sidebar #leftside-navigation ul li a i .fa-angle-right { padding-top: 3px; } .sidebar #leftside-navigation ul ul { display: none; } .sidebar #leftside-navigation ul ul li { margin-bottom: 0; margin-left: 0; margin-right: 0; border-bottom: none;    display: inline-flex; } .sidebar #leftside-navigation ul ul li a.menu-bold { font-size: 13px !important; color: #06804a !important; } .sidebar #leftside-navigation ul ul li a { font-size: 13px; padding-top: 0; padding-bottom: 0; /* font-size: 10px; */ font-weight: 100; color: #646464; } nav ul li:hover a { color: rgba(0,0,0,0.87); } .side-nav li>a:hover { background-color: rgb(255 255 255 / 5%); } li.logo_li { display: inline-block !important; } .listing_wishlist_sec a:focus { background-color: #c6213b !important; } .mobile_header_section nav ul li a { color: #2b2b2b; font-size: 13px; padding: 0 0 0 0; border-bottom: solid 1px #fff !important; width: 100% !important; float: left; height: auto; line-height: 34px; } li.logo_li img{ width:100%; } .mobile_header_section .icon_user_mobile img{ display: none; } .mobile_header_section nav ul li .signup-sec a { line-height: 40px; text-transform: uppercase; font-weight: 600;    color: #212121; } } .sidebar #leftside-navigation ul li.sub-menu{position:relative;} .sidebar #leftside-navigation ul li.sub-menu a{width:75%!important;} .sidebar #leftside-navigation ul li.sub-menu a i.arrow.fa.fa-angle-right.pull-right { position: absolute; right: 0; }