.navbar-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: #fff; }
.site-header { height: 100px; }
.dropdown-menu-inner {display: flex; }

@media (max-width: 991px) {
  .site-header { height: 84px; }
  .dropdown-menu-inner {display: block; }
}

.dropdown-menu-inner h4 { font-size: 14px; margin: 0 10px 5px 10px; font-weight: normal; text-transform: none; line-height: 1.8; letter-spacing: .04em; color: #4777ff; }

{# default navbar styling #}
.navbar { line-height: 1.5; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.navbar-nav { padding: 10px 0; justify-content: flex-end; display: flex; flex-direction: column; margin: 0; list-style: none; }
.navbar-nav .nav-item { display: flex; flex-direction: column; justify-content: center; }
.navbar-nav .nav-link { text-decoration: none; display: block; }
.navbar-nav .dropdown-menu { position: static; float: none; }
.navbar-nav-wrapper { flex-basis: 100%; flex-grow: 1; }

{# utility #}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.collapse { display: none; }
.collapse.show { display: block }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .35s ease }

{# toggler #}
.navbar-toggler { cursor: pointer; margin-left: auto; padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; cursor: pointer; }
.navbar-toggler:hover, 
.navbar-toggler:focus { text-decoration: none; }
.navbar-toggler { height: 44px; width: 54px; position: relative; transition: .5s ease-in-out; cursor: pointer }
.navbar-toggler span { transition: all 150ms ease-in-out; transform-origin: 50% 50%; opacity: 1; top: 50%; position: absolute; height: 2px; left: 50%; margin-left: -12px; width: 24px }
.navbar-toggler span:nth-child(1) { opacity: 0; margin-top: -8px; transform: scale(.3)}
.navbar-toggler span:nth-child(2) { opacity: 0; transform: scale(.3); }
.navbar-toggler span:nth-child(3) { opacity: 0; margin-top: 8px; transform: scale(.3); }

.navbar-toggler span:nth-child(4) { margin-top: 0; transform: rotate(-45deg) scale(1); }
.navbar-toggler span:nth-child(5) { margin-top: 0; transform: rotate(45deg)  scale(1); }

.navbar-toggler.collapsed span:nth-child(1),
.navbar-toggler.collapsed span:nth-child(2),
.navbar-toggler.collapsed span:nth-child(3) { opacity: 1;  transform: scale(1); }

/* .navbar-toggler.collapsed  span:nth-child(1) { transform: rotate(0); }
.navbar-toggler.collapsed  span:nth-child(3) { transform: rotate(0); } */

.dropdown. > a > svg { transform: translateY(-1px); }
.dropdown.show > a > svg { transform: translateY(-1px) scaleY(-1); }


.navbar-toggler.collapsed  span:nth-child(4),
.navbar-toggler.collapsed  span:nth-child(5) { opacity: 0; transform: scale(.3); }

{# dropdown #}
.dropdown { position: relative; }

.dropdown-toggle:empty:after { margin-left: 0; }
.dropdown-menu {
  padding-top: 20px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
}
.dropdown-menu-inner {
  padding: 15px;
  min-width: 160px;
  margin: 0;
  font-size: 14px;
  color: #262628;
  text-align: left;
  white-space: nowrap;
  list-style: none;
  background-color: #fff;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.05), 0px 5px 20px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.dropdown-menu.navbar-show { display: block; }
.navbar-nav .dropdown-menu { border-color: #E4E7ED; }
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus { color: #4777FF !important; background-color: #F9FCFF; }

.dropdown-item { text-decoration: none; display: flex; padding: 9px 10px; border-radius: 4px; align-items: center; white-space: nowrap; font-weight: 500; font-size: 14px; color: #262628; }
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover { background: #F6F2F9!important; color: #562872; }
.dropdown-item .dropdown-item__icon { display: block; margin-right: 10px; height: 20px; width: 20px; object-fit: contain; }
.dropdown-item .dropdown-item__icon > span { display: block; }
.dropdown-item .dropdown-item__icon > span > svg { display: block; height: 20px; width: 20px; object-fit: contain; }
.dropdown-item .dropdown-item__icon svg path { fill: #4777FF; }
.dropdown-item > span { display: block; padding-right: 40px; }


.show { display: block; }
@media (min-width: 992px) {
  .dropdown-menu { display: none; }
  .dropdown > a > svg { transform: none!important; }
  .dropdown:hover > a > svg { transform: translateY(-1px) scaleY(-1)!important; }
  .dropdown .dropdown-menu { display: none!important; }
  .dropdown:hover .dropdown-menu { display: block!important; }
}


{# buttons #}
.navbar .btn {
}

.dropdown-item { white-space: nowrap; display: flex; align-items: center; }
.dropdown-item__icon { margin-right: 10px; min-width: 16px; text-align: center; }