.search-icon {
    display: block;
    height: 15px;
    position: relative;
    width: 15px
}

.search-icon:after,
.search-icon:before {
    content: "";
    display: block;
    position: absolute;
    transition: all .1s
}

.search-icon:before {
    border: 2px solid var(--icon-color);
    border-radius: 50%;
    height: 100%;
    left: -2px;
    top: -2px;
    width: 100%
}

.search-icon:after {
    background-color: var(--icon-color);
    height: 2px;
    left: 11px;
    top: 14px;
    transform: rotate(45deg);
    width: 8px
}

.search-icon.active:before {
    border-radius: 0;
    border-width: 1px;
    left: 4px;
    top: -1px;
    transform: rotate(45deg);
    width: 0
}

.search-icon.active:after {
    left: -1px;
    top: 4px;
    width: 12px
}

.show-search {
    display: flex;
    margin: -.5rem auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
    z-index: 9999
}

button.search-icon {
    background: transparent;
    border: none
}

.search-icon-nav:before {
    border: 2px solid var(--navbar-color) !important
}

.search-icon-nav:after {
    background-color: var(--navbar-color) !important
}

.menu-icon {
    background-color: var(--icon-color);
    display: block;
    height: 2px;
    position: relative;
    width: 12px
}

.menu-icon:hover {
    cursor: pointer
}

.menu-icon:after,
.menu-icon:before {
    background-color: var(--icon-color);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all .1s;
    width: 100%
}

.menu-icon:before {
    bottom: 5px
}

.menu-icon:after,
.menu-icon:before {
    background-color: var(--icon-color);
    height: 2px;
    width: 14px
}

.menu-icon:after {
    top: 5px
}

.menu-icon-nav,
.menu-icon-nav:after,
.menu-icon-nav:before {
    background-color: var(--navbar-color) !important
}

.menu-icon-cross:after,
.menu-icon-cross:before {
    background-color: var(--color-white);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 2rem;
    transition: all .1s;
    width: 100%
}

.menu-icon-cross:before {
    transform: rotate(-45deg)
}

.menu-icon-cross:after,
.menu-icon-cross:before {
    background-color: var(--color-white);
    height: 2px;
    top: 31px;
    width: 19px
}

.menu-icon-cross:after {
    transform: rotate(45deg)
}

.icon-bell,
.icon-bell:before {
    border: 1px solid var(--icon-color);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px
}

.icon-bell {
    border: 2px solid var(--icon-color);
    border-bottom: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 14px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 14px
}

.icon-bell:after,
.icon-bell:before {
    border: 1px solid var(--icon-color-light);
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-bell:before {
    background: var(--icon-color-light);
    height: 4px;
    left: 3px;
    top: -4px;
    width: 4px
}

.icon-bell:after {
    border: 6px solid transparent;
    border-radius: 3px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-top: 1px solid var(--icon-color-light);
    box-shadow: inset 0 0 0 3px var(--icon-color-light), 0 -1px 0 0 var(--icon-color-light);
    height: 10px;
    left: -2px;
    top: 14px;
    width: 14px
}

.icon-bell-green,
.icon-bell-green:before {
    border: 1px solid #0adf0a;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px
}

.icon-bell-green {
    background-color: #0adf0a;
    border: 2px solid #0adf0a
}

.icon-bell-green:before {
    background: #0adf0a
}

.icon-bell-green:after {
    border-top: 1px solid #0adf0a;
    box-shadow: inset 0 0 0 3px #0adf0a, 0 -1px 0 0 #0adf0a
}

.icon-shopping-bag {
    transform: scale(var(--ggs, 1))
}

.icon-shopping-bag,
.icon-shopping-bag:after {
    border: 2px solid hsla(0, 0%, 100%, .17);
    border-radius: 3px;
    box-sizing: border-box;
    display: block;
    height: 20px;
    position: relative;
    width: 20px
}

.icon-shopping-bag:after {
    border-bottom-left-radius: 120px;
    border-bottom-right-radius: 120px;
    border-top: 0;
    content: "";
    height: 6px;
    left: 3px;
    position: absolute;
    top: 2px;
    width: 10px
}

.icon-chart {
    border-bottom: 2px solid;
    border-left: 2px solid;
    box-sizing: border-box;
    display: block;
    height: 10px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 10px
}

.icon-chart:after,
.icon-chart:before {
    border: 2px solid;
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-chart:before {
    border-top-right-radius: 100px;
    height: 8px;
    right: -2px;
    top: -2px;
    width: 8px
}

.icon-chart:after {
    border-radius: 100px;
    border-right-color: transparent;
    height: 18px;
    left: -10px;
    transform: rotate(-45deg);
    width: 18px
}

.icon-share {
    border-radius: 100px;
    box-shadow: 10px -6px 0 var(--icon-color), 10px 6px 0 var(--icon-color);
    height: 6px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 6px
}

.icon-share,
.icon-share:after,
.icon-share:before {
    background: var(--icon-color);
    box-sizing: border-box;
    display: block
}

.icon-share:after,
.icon-share:before {
    border-radius: 3px;
    content: "";
    height: 2px;
    left: 2px;
    position: absolute;
    width: 10px
}

.icon-share:before {
    top: 0;
    transform: rotate(-35deg)
}

.icon-share:after {
    bottom: 0;
    transform: rotate(35deg)
}

.icon-profile,
.icon-profile:after,
.icon-profile:before {
    border: 2px solid var(--icon-color);
    border-radius: 100px;
    box-sizing: border-box;
    display: block
}

.icon-profile {
    height: 22px;
    overflow: hidden;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.icon-profile:after,
.icon-profile:before {
    content: "";
    height: 8px;
    left: 5px;
    position: absolute;
    top: 2px;
    width: 8px
}

.icon-profile:after {
    border-radius: 200px;
    height: 18px;
    left: 0;
    top: 11px;
    width: 18px
}

.icon-trash-empty {
    border: 2px solid var(--icon-color-light);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    box-shadow: 0 0 0 2px var(--icon-color-light);
    box-sizing: border-box;
    display: block;
    height: 12px;
    margin-top: 4px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 10px
}

.icon-trash-empty:after,
.icon-trash-empty:before {
    background-color: var(--icon-color);
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-trash-empty:after {
    background: var(--icon-color);
    border-radius: 3px;
    height: 2px;
    left: -5px;
    top: -4px;
    width: 16px
}

.icon-trash-empty:before {
    border: 2px solid var(--icon-color);
    border-bottom: var(--icon-color);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    height: 4px;
    left: -2px;
    top: -7px;
    width: 10px
}

.icon-user-add {
    background: linear-gradient(to left, var(--icon-color) 8px, transparent 0) no-repeat 14px 6px/6px 2px, linear-gradient(to left, var(--icon-color) 8px, transparent 0) no-repeat 16px 4px/2px 6px;
    box-sizing: border-box;
    display: block;
    height: 18px;
    transform: scale(var(--ggs, 1));
    width: 20px
}

.icon-user-add:after,
.icon-user-add:before {
    border: 2px solid var(--icon-color);
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-user-add:before {
    border-radius: 30px;
    height: 8px;
    left: 2px;
    top: 0;
    width: 8px
}

.icon-user-add:after {
    border-bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 9px;
    top: 9px;
    width: 12px
}

.icon-heart,
.icon-heart:after {
    background-color: var(--icon-color);
    border: 2px solid var(--icon-color);
    border-bottom: 0;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    height: 8px;
    width: 10px
}

.icon-heart {
    box-sizing: border-box;
    display: block;
    position: relative;
    transform: translate(calc(-5px*var(--ggs, 1)), calc(-3px*var(--ggs, 1))) rotate(-45deg) scale(var(--ggs, 1))
}

.icon-heart:after,
.icon-heart:before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-heart:after {
    background-color: var(--icon-color);
    right: -9px;
    top: 5px;
    transform: rotate(90deg)
}

.icon-heart:before {
    background-color: var(--icon-color);
    border-bottom: 2px solid var(--icon-color);
    border-left: 2px solid var(--icon-color);
    height: 11px;
    left: -2px;
    top: 3px;
    width: 11px
}

.icon-log-out {
    border: 2px solid var(--icon-color);
    border-bottom-left-radius: 2px;
    border-right: 0;
    border-top-left-radius: 2px;
    box-sizing: border-box;
    display: block;
    height: 16px;
    margin-left: -10px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 6px
}

.icon-log-out:after,
.icon-log-out:before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-log-out:after {
    border-left: 2px solid var(--icon-color);
    border-top: 2px solid var(--icon-color);
    bottom: 2px;
    height: 8px;
    left: 4px;
    transform: rotate(-45deg);
    width: 8px
}

.icon-log-out:before {
    background: var(--icon-color);
    border-radius: 3px;
    bottom: 5px;
    height: 2px;
    left: 5px;
    width: 10px
}

.icon-log-in {
    border: 2px solid var(--icon-color);
    border-bottom-right-radius: 2px;
    border-left: 0;
    border-top-right-radius: 2px;
    box-sizing: border-box;
    display: block;
    height: 16px;
    margin-right: -10px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 6px
}

.icon-log-in:after,
.icon-log-in:before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-log-in:after {
    border-right: 2px solid var(--icon-color);
    border-top: 2px solid var(--icon-color);
    bottom: 2px;
    height: 8px;
    left: -8px;
    transform: rotate(45deg);
    width: 8px
}

.icon-log-in:before {
    background: var(--icon-color);
    border-radius: 3px;
    bottom: 5px;
    height: 2px;
    left: -11px;
    width: 10px
}

.icon-mail,
.icon-mail:after {
    border: 2px solid  #707793;
    box-sizing: border-box;
    display: block;
    height: 20px;
}

.icon-mail {
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 26px;
}

.icon-mail:after {
    border-radius: 3px;
    
    bottom: 10px;
    content: "";
    left: .15px;
    position: absolute;
    transform: rotate(-45deg);
    width: 26px;
}

.icon-notes {
    border: 2px solid var(--icon-color);
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 20px
}

.icon-notes,
.icon-notes:after,
.icon-notes:before {
    border-radius: 3px;
    box-sizing: border-box;
    display: block
}

.icon-notes:after,
.icon-notes:before {
    background: var(--icon-color);
    content: "";
    height: 2px;
    left: 2px;
    position: absolute
}

.icon-notes:before {
    background-color: var(--icon-color);
    box-shadow: 0 4px 0, 0 8px 0;
    top: 2px;
    width: 12px
}

.icon-notes:after {
    background-color: var(--icon-color);
    top: 14px;
    width: 6px
}

.icon-pin {
    border-radius: 100% 100% 0 100%;
    height: 18px;
    margin-top: -4px;
    position: relative;
    transform: rotate(45deg) scale(var(--ggs, 1));
    width: 18px
}

.icon-pin,
.icon-pin:before {
    border: 2px solid var(--icon-color);
    box-sizing: border-box;
    display: block
}

.icon-pin:before {
    border-radius: 40px;
    content: "";
    height: 8px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 8px
}

.close-icon:after {
    content: "\00d7";
    display: inline-block
}

.icon-report:before {
    border: 1px solid #000;
    border-radius: 50%;
    color: #000;
    content: "!";
    display: block;
    font-weight: 400;
    height: 20px;
    line-height: 22px;
    text-align: center;
    width: 20px
}

.icon-edit-unmask,
.icon-edit-unmask:after {
    border-radius: 22px;
    box-sizing: border-box;
    display: block
}

.icon-edit-unmask {
    border: 2px solid transparent;
    height: 20px;
    position: relative;
    transform: scale(var(--ggs, 1));
    transition: all .5s;
    width: 20px
}

.icon-edit-unmask:after {
    background: currentColor;
    background-color: var(--icon-color);
    box-shadow: 0 7px 0 1px var(--icon-color), 0 -7px 0 1px var(--icon-color), -7px 0 0 1px var(--icon-color), 7px 0 0 1px var(--icon-color);
    content: "";
    height: 4px;
    left: 6px;
    position: absolute;
    top: 6px;
    width: 4px
}

.icon-image {
    border: 2px solid var(--icon-color);
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    height: 16px;
    overflow: hidden;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 20px
}

.icon-image:after,
.icon-image:before {
    border: 2px solid var(--icon-color);
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-image-dark,
.icon-image-dark:after,
.icon-image-dark:before {
    border: 2px solid #000 !important
}

.icon-image:after {
    border-radius: 3px;
    height: 16px;
    left: 6px;
    top: 9px;
    transform: rotate(45deg);
    width: 16px
}

.icon-image:before {
    border-radius: 100%;
    height: 6px;
    left: 2px;
    top: 2px;
    width: 6px
}

.icon-add {
    border: 2px solid var(--icon-color);
    border-radius: 22px;
    box-sizing: border-box;
    display: block;
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.icon-add:after,
.icon-add:before {
    background: var(--icon-color);
    border-radius: 5px;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 2px;
    left: 4px;
    position: absolute;
    top: 8px;
    width: 10px
}

.icon-add-dark {
    border: 2px solid #000 !important
}

.icon-add-dark:after,
.icon-add-dark:before {
    background-color: #000 !important
}

.icon-add:after {
    height: 10px;
    left: 8px;
    top: 4px;
    width: 2px
}

.active:before {
    border-color: hsla(0, 0%, 100%, 0) hsla(0, 0%, 100%, 0) #fff;
    border-width: 7px;
    margin-left: -7px
}

.active:after,
.active:before {
    border: solid transparent;
    bottom: 100%;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 7%;
    width: 0
}

.active.useraccount:after,
.active.useraccount:before {
    right: 4%
}

.icon-right {
    border: 2px solid;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.icon-right:after,
.icon-right:before {
    border-right: 2px solid;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 8px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 2px
}

.icon-right:after {
    border-bottom: 2px solid;
    height: 6px;
    right: 9px;
    top: 6px;
    transform: rotate(-45deg);
    width: 6px
}

.icon-left {
    border: 2px solid;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.icon-left:after,
.icon-left:before {
    border-left: 2px solid;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 8px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 2px
}

.icon-left:after {
    border-bottom: 2px solid;
    height: 6px;
    left: 9px;
    top: 6px;
    transform: rotate(45deg);
    width: 6px
}

.icon-check {
    border: 2px solid #000;
    border-radius: 100px;
    box-sizing: border-box;
    display: block;
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.icon-check-completed {
    border-color: green !important
}

.icon-check:after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 10px;
    left: 3px;
    position: absolute;
    top: -1px;
    transform: rotate(45deg);
    transform-origin: bottom left;
    width: 6px
}

.icon-check-completed:after {
    border-color: green !important
}

.home-icon {
    background: linear-gradient(270deg, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px, linear-gradient(270deg, currentColor 5px, transparent 0) no-repeat 100% 100%/4px 2px;
    border: 2px solid;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-sizing: border-box;
    color: #fff;
    display: block;
    height: 14px;
    margin-bottom: -2px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 18px
}

.home-icon:after,
.home-icon:before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.home-icon:before {
    border-left: 2px solid;
    border-radius: 3px;
    border-top: 2px solid;
    border-top-left-radius: 4px;
    color: #fff;
    height: 14px;
    left: 0;
    top: -5px;
    transform: rotate(45deg);
    width: 14px
}

.home-icon:after {
    border: 2px solid;
    border-bottom: 0;
    border-radius: 100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    height: 10px;
    left: 3px;
    width: 8px
}

.play-button-icon-o {
    border: 2px solid;
    border-radius: 20px;
    box-sizing: border-box;
    display: block;
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.play-button-icon-o:before {
    border-bottom: 5px solid transparent;
    border-left: 6px solid;
    border-top: 5px solid transparent;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 10px;
    left: 8px;
    position: absolute;
    top: 5px;
    width: 0
}

.s-post:before {
    left: 7px !important;
    top: 4px !important
}

.close-icon-r {
    border: 2px solid;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    height: 22px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 22px
}

.close-icon-r:after,
.close-icon-r:before {
    background: currentColor;
    border-radius: 5px;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 2px;
    left: 3px;
    position: absolute;
    top: 8px;
    transform: rotate(45deg);
    width: 12px
}

.close-icon-r:after {
    transform: rotate(-45deg)
}

.icons-heart,
.icons-heart:after {
    border: 2px solid;
    border-bottom: 0;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    height: 8px;
    width: 10px
}

.icons-heart {
    box-sizing: border-box;
    color: #e46060;
    display: block;
    position: relative;
    transform: translate(calc(-5px*var(--ggs, 1)), calc(-3px*var(--ggs, 1))) rotate(-45deg) scale(var(--ggs, 1))
}

.icons-heart-filled {
    background-color: #e46060
}

.icons-heart:after,
.icons-heart:before {
    box-sizing: border-box;
    color: #e46060;
    content: "";
    display: block;
    position: absolute
}

.icons-heart-filled:after,
.icons-heart-filled:before {
    background-color: #e46060;
    color: #e46060
}

.icons-heart:after {
    right: -9px;
    top: 5px;
    transform: rotate(90deg)
}

.icons-heart:before {
    border-bottom: 2px solid;
    border-left: 2px solid;
    height: 11px;
    left: -2px;
    top: 3px;
    width: 11px
}

.icon-instagram {
    border: 2px solid transparent;
    border-radius: 4px;
    box-shadow: 0 0 0 2px;
    box-sizing: border-box;
    display: block;
    height: 20px;
    position: relative;
    transform: scale(1);
    width: 20px
}

.icon-instagram:after,
.icon-instagram:before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-instagram:after {
    border: 2px solid;
    border-radius: 100%;
    height: 10px;
    left: 3px;
    top: 3px;
    width: 10px
}

.icon-instagram:before {
    background: currentColor;
    border-radius: 3px;
    height: 2px;
    right: 1px;
    top: 1px;
    width: 2px
}

.icon-facebook {
    box-sizing: border-box;
    display: block;
    height: 20px;
    position: relative;
    transform: scale(1);
    width: 20px
}

.icon-facebook:after,
.icon-facebook:before {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute
}

.icon-facebook:before {
    border-left: 4px solid;
    border-top: 4px solid;
    border-top-left-radius: 5px;
    height: 20px;
    left: 6px;
    width: 8px
}

.icon-facebook:after {
    background: currentColor;
    height: 4px;
    left: 4px;
    top: 7px;
    transform: skew(-5deg);
    width: 10px
}

.icon-twitter {
    box-sizing: border-box;
    display: block;
    height: 20px;
    position: relative;
    transform: scale(1);
    width: 20px
}

.icon-twitter:after,
.icon-twitter:before {
    box-sizing: border-box;
    content: "";
    display: block;
    left: 4px;
    position: absolute
}

.icon-twitter:before {
    background: linear-gradient(270deg, currentColor 12px, transparent 0) no-repeat center 2px/10px 4px;
    border-bottom: 4px solid;
    border-bottom-left-radius: 6px;
    border-left: 4px solid;
    height: 14px;
    top: 4px;
    width: 9px
}

.icon-twitter:after {
    background: currentColor;
    border-radius: 20px;
    box-shadow: 7px 4px 0, 7px 12px 0;
    height: 4px;
    top: 2px;
    width: 4px
}

.icon-info {
    border: 2px solid;
    border-radius: 40px;
    box-sizing: border-box;
    display: block;
    height: 20px;
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 20px
}

.icon-info:after,
.icon-info:before {
    background: currentColor;
    border-radius: 3px;
    box-sizing: border-box;
    content: "";
    display: block;
    left: 7px;
    position: absolute;
    width: 2px
}

.icon-info:after {
    bottom: 2px;
    height: 8px
}

.icon-info:before {
    height: 2px;
    top: 2px
}

.icon-youtube,
.icon-youtube::before {
    display: block;
    box-sizing: border-box
}

.icon-youtube {
    position: relative;
    transform: scale(var(--ggs, 1));
    width: 2.5rem;
    height: 2rem;
    box-shadow: 0 0 0 3px;
    border-radius: 15px/45px
}

.icon-youtube::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: .6rem;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent
}