/*=========== svg icons =============*/
.om {
 display: inline-block;
 position: relative;
 top: 0.3rem;
 left: 0.4rem;
 width: 19px;
 height: 19px;
 background-size: cover;
 cursor: pointer;
}

.om-top {
 display: inline-flex;
 position: relative;
 top: 9px;
 align-items: center;
 width: 40px;
 height: 40px;
 background-size: cover;
 margin: 5px;
 margin-top: 7px;
 padding: 2px;
}

.nav-cion {
 position: relative;
 display: inline-flex;
 align-items: self-end;
 width: 30px;
 height: 30px;
 top: 5px;
 margin-inline: 0.5rem;
 background-size: 100%;
 background-position: bottom;
 background-repeat: no-repeat;
 cursor: pointer;
 filter: invert(32%) sepia(84%) saturate(3624%) hue-rotate(208deg) brightness(99%) contrast(102%);
 opacity: 0.9;
}

/*------------ Navbar Icons --------------*/

.arrow-left {
 background-image: url(../../images/omicons/arrow-left.svg);
}

.arrow-right {
 background-image: url(../../images/omicons/arrow-right.svg);
}

.wt {
 color: #ffffff;
 filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(173deg) brightness(100%) contrast(104%);
}

.gd {
 filter: invert(98%) sepia(28%) saturate(6185%) hue-rotate(315deg) brightness(98%) contrast(98%);
}

.av-up,
.cyn {
 color: #7dc9f9;
 filter: invert(73%) sepia(66%) saturate(772%) hue-rotate(175deg) brightness(102%) contrast(95%);
}

.av-down,
.red {
 color: #f35b5b;
 filter: invert(56%) sepia(24%) saturate(6444%) hue-rotate(326deg) brightness(97%) contrast(95%);
}
.blu {
 color: #0d6efd;
 filter: invert(32%) sepia(84%) saturate(3624%) hue-rotate(208deg) brightness(99%) contrast(102%);
}
.indigo {
 color: #6610f2;
 filter: invert(13%) sepia(98%) saturate(7118%) hue-rotate(267deg) brightness(92%) contrast(108%);
}

/*


how to use:
 <span><i class="nav-cion arrow-right"></i></span>

 https://codepen.io/sosuke/pen/Pjoqqp

 */