.close.css-icon {
top: 0;
left: 0;
width: 24px;
height: 24px;
}

.close.css-icon::before {
top: 10px;
width: 26px;
height: 2px;
background-color: currentColor;
transform: rotate(-45deg);
left: 50%;
margin-left: -15px;
}

.close.css-icon::after {
top: 10px;
width: 26px;
height: 2px;
background-color: currentColor;
transform: rotate(45deg);
left: 50%;
margin-left: -15px;
}

/* ------ */

.menu.css-icon {
margin-left: -7px;
margin-top: 10px;
width: 17px;
height: 1px;
background-color: currentColor;
}

.menu.css-icon::before {
top: -5px;
left: 0;
width: 17px;
height: 1px;
background-color: currentColor;
}

.menu.css-icon::after {
top: 5px;
left: 0;
width: 17px;
height: 1px;
background-color: currentColor;
}

/* ------ */

.plus.css-icon {
left: 50%;
top: 50%;
margin: -3px 0 0 -7px;
}

.plus.css-icon::before {
width: 14px;
height: 2px;
background-color: currentColor;
}

.plus.css-icon::after {
width: 14px;
height: 2px;
background-color: currentColor;
transform: rotate(90deg);
}

/* ------ */

.check.css-icon {
margin-left: -7px;
margin-top: 4px;
width: 14px;
height: 8px;
border-bottom: solid 1px currentColor;
border-left: solid 1px currentColor;
transform: rotate(-45deg);
}

/* ------ */

.clock.css-icon {
margin-left: -7px;
width: 15px;
height: 15px;
border: solid 1px currentColor;
border-radius: 8px;
}

.clock.css-icon::before {
top: 7px;
left: 7px;
width: 5px;
height: 1px;
background-color: currentColor;
transform-origin: 0% 0%;
}

.clock.css-icon::after {
top: 2px;
left: 7px;
width: 1px;
height: 6px;
background-color: currentColor;
transform-origin: 0% 0%;
}

/* ------ */

.profile.css-icon {
margin-left: -7px;
margin-top: 6px;
width: 12px;
height: 6px;
border-left: solid 1px currentColor;
border-right: solid 1px currentColor;
border-top: solid 1px currentColor;
border-bottom: solid 1px transparent;
border-radius: 6px 6px 0 0;
}

.profile.css-icon::before {
left: 2px;
top: -8px;
width: 6px;
height: 6px;
border-radius: 50%;
border: solid 1px currentColor;
}

/* ------ */

.community.css-icon {
margin-left: -7px;
margin-top: 6px;
width: 12px;
height: 4px;
border-left: solid 2px currentColor;
border-right: solid 2px currentColor;
border-top: solid 2px currentColor;
border-bottom: solid 2px transparent;
border-radius: 6px 6px 0 0;
}

.community.css-icon::before {
left: 1px;
top: -10px;
width: 6px;
height: 6px;
border-radius: 50%;
border: solid 2px currentColor;
}

/* ------ */

.heart.css-icon {
margin-top: 6px;
margin-left: -7px;
width: 9px;
height: 9px;
border-left: solid 1px currentColor;
border-bottom: solid 1px currentColor;
transform: rotate(-45deg);
}

.heart.css-icon::before {
top: -5px;
left: -1px;
width: 8px;
height: 5px;
border-radius: 5px 5px 0 0;
border-top: solid 1px currentColor;
border-left: solid 1px currentColor;
border-right: solid 1px currentColor;
}

.heart.css-icon::after {
top: 0;
left: 8px;
width: 5px;
height: 8px;
border-radius: 0 5px 5px 0;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}

/* ------ */

.card.css-icon {
margin-left: -8px;
margin-top: 2px;
width: 15px;
height: 10px;
border-radius: 1px;
border: solid 1px currentColor;
}

.card.css-icon::before {
top: 1px;
left: -1px;
width: 17px;
height: 2px;
background-color: currentColor;
}

.card.css-icon::after {
right: 1px;
bottom: 2px;
width: 4px;
height: 1px;
background-color: currentColor;
}

/* ------ */

.lock.css-icon {
margin-left: -7px;
margin-top: 5px;
width: 13px;
height: 6px;
border-radius: 1px;
border: solid 1px currentColor;
}

.lock.css-icon::before {
left: 3px;
top: -8px;
width: 5px;
height: 6px;
border-radius: 4px 4px 0 0;
border-top: solid 1px currentColor;
border-left: solid 1px currentColor;
border-right: solid 1px currentColor;
}

/* ------ */

.unlock.css-icon {
margin-left: -7px;
margin-top: 10px;
width: 13px;
height: 6px;
border: solid 1px currentColor;
border-radius: 1px;
}

.unlock.css-icon::before {
left: 3px;
top: -8px;
width: 5px;
height: 3px;
border-radius: 4px 4px 0 0;
border-top: solid 1px currentColor;
border-left: solid 1px currentColor;
border-right: solid 1px currentColor;
}

.unlock.css-icon::after {
left: 3px;
top: -4px;
width: 1px;
height: 3px;
background-color: currentColor;
}

/* ------ */
.modify_isFavorite .css-icon.heart,
.heart-solid.css-icon {
margin-top: 6px;
margin-left: -7px;
width: 9px;
height: 9px;
border-left: solid 1px currentColor;
border-bottom: solid 1px currentColor;
background-color: currentColor;
transform: rotate(-45deg);
}

.modify_isFavorite .css-icon.heart:before,
.heart-solid.css-icon::before {
top: -5px;
left: -1px;
width: 8px;
height: 5px;
border-radius: 5px 5px 0 0;
border-top: solid 1px currentColor;
border-left: solid 1px currentColor;
border-right: solid 1px currentColor;
background-color: currentColor;
}

.modify_isFavorite .css-icon.heart:after,
.heart-solid.css-icon::after {
top: 0;
left: 8px;
width: 5px;
height: 8px;
border-radius: 0 5px 5px 0;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
border-bottom: solid 1px currentColor;
background-color: currentColor;
}

/* ------ */

.arrow-up.css-icon {
margin-left: 0;
margin-top: 3px;
width: 1px;
height: 16px;
background-color: currentColor;
}

.arrow-up.css-icon::before {
left: -5px;
top: 1px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(-45deg);
}

/* ------ */

.arrow-down.css-icon {
margin-left: 0;
margin-top: 2px;
width: 1px;
height: 16px;
background-color: currentColor;
}

.arrow-down.css-icon::before {
left: -5px;
top: 3px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(135deg);
}

/* ------ */

.pin.css-icon {
width: 14px;
height: 14px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg) translate(-25%, -25%);
border: 1px solid;
left: 50%;
}

.pin.css-icon::before {
width: 4px;
height: 4px;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: currentColor;
}

/* ------ */
.star.css-icon {
top: 0;
left: 0;
text-align: center;
width: 100%;
display: inline-block;
}

.star.css-icon::before {
top: 0;
left: 0;
content: "\2605";
font-size: 22px;
line-height: 1;
}

/* ------ */

.asterisk.css-icon::after {
transform: rotate(58deg);
}

.asterisk.css-icon::before {
transform: rotate(-58deg);
}

.asterisk.css-icon::after, .asterisk.css-icon::before {
margin: 0;
left: 0;
top: 0;
}

.asterisk.css-icon, .asterisk.css-icon::after, .asterisk.css-icon::before {
width: 4px;
height: 20px;
box-shadow: inset 0 0 0 32px;
border-radius: 1px;
margin: 7px 15px;
}

/* ------ */

.time.css-icon {
margin-left: -3px;
margin-top: 0;
width: 5px;
height: 19px;
border-radius: 1px;
border: solid 1px currentColor;
}

.time.css-icon::before {
left: -4px;
top: 3px;
width: 11px;
height: 11px;
border-radius: 50%;
border: solid 1px currentColor;
background-color: white;
}

.time.css-icon::after {
left: 2px;
top: 5px;
width: 3px;
height: 4px;
border-left: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}

/* ------ */

.instant.css-icon::before {
top: 0;
left: -4px;
width: 0;
height: 0;
border-right: solid 6px currentColor;
border-top: solid 11px transparent;
}

.instant.css-icon::after {
top: 8px;
left: 0;
width: 0;
height: 0;
border-left: solid 6px currentColor;
border-bottom: solid 11px transparent;
}

/* ------ */

.list.css-icon {
margin-left: -6px;
margin-top: 2px;
width: 12px;
height: 5px;
border-top: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}

.list.css-icon::before {
top: 2px;
left: 0;
width: 12px;
height: 5px;
border-top: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}

/* ------ */

.pencil.css-icon::before {
background: linear-gradient(to bottom, currentColor 0%, currentColor 15%, transparent 15%, transparent 25%, currentColor 25%, currentColor 100%);
height: 1em;
width: 0.25em;
transform: rotate(45deg);
left: 0;
top: -0.2em;
}

.pencil.css-icon::after {
top: 0.63333333333em;
left: -0.5em;
border-style: solid;
background: transparent;
border-width: 0.25em 0.166666em 0 0.166666em;
border-color: currentColor transparent transparent transparent;
transform: rotate(45deg) translateY(0.041666666em);
}

.eye.css-icon {
color: #fff;
position: absolute;
margin-left: 0;
margin-top: 0;
width: 12px;
height: 12px;
border-radius: 70% 15%;
border: solid 2px currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 2px;
top: 2px;
}

.eye.css-icon:before {
content: '';
position: absolute;
left: 1px;
top: 1px;
width: 6px;
height: 6px;
border-radius: 50%;
border: solid 2px currentColor;
}

.noeye.css-icon {
color: #fff;
position: absolute;
margin-left: 0;
margin-top: 0;
width: 12px;
height: 12px;
border-radius: 70% 15%;
border: solid 2px currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 2px;
top: 2px;
}

.noeye.css-icon:before {
content: '';
position: absolute;
left: 1px;
top: 1px;
width: 6px;
height: 6px;
border-radius: 50%;
border: solid 2px currentColor;
}

.noeye.css-icon:after {
border: 1px solid #66bfa6;
top: 3px;
width: 22px;
height: 2px;
background: currentColor;
left: -5px;
}

.css-icon::after, .css-icon::before {
content: '';
position: absolute;
}

.css-icon {
position: absolute;
display: inline-block;
color: currentColor;
}

.icon-wrap {
display: inline-block;
width: 16px;
height: 16px;
padding: 2px;
position: relative;
text-align: center;
vertical-align: middle;
}