.icon {
    display: inline-block;
    vertical-align: middle !important;
    width: 24px;
    height: 24px;
    background-color: var(--on-surface);
}

.icon.s1 {
    height: 1rem;
    width: 1rem;
}

.icon.s3 {
    height: 2rem;
    width: 2rem;
}

.icon.s4 {
    height: 2.5rem;
    width: 2.5rem;
}

.icon.s5 {
    height: 3rem;
    width: 3rem;
}

.icon.s6 {
    height: 3.5rem;
    width: 3.5rem;
}

.icon.chevron-left {
    -webkit-mask-image: url(/images/icon/chevron-left.svg);
    mask-image: url(/images/icon/chevron-left.svg);
}

.icon.chevron-right {
    -webkit-mask-image: url(/images/icon/chevron-right.svg);
    mask-image: url(/images/icon/chevron-right.svg);
}
.icon.chevron-down {
    -webkit-mask-image: url(/images/icon/chevron-down.svg);
    mask-image: url(/images/icon/chevron-down.svg);
}

.icon.chevron-up {
    -webkit-mask-image: url(/images/icon/chevron-up.svg);
    mask-image: url(/images/icon/chevron-up.svg);
}

.icon.close {
    -webkit-mask-image: url(/images/icon/close.svg);
    mask-image: url(/images/icon/close.svg);
}

.icon.menu-down {
    -webkit-mask-image: url(/images/icon/menu-down.svg);
    mask-image: url(/images/icon/menu-down.svg);
}

.icon.menu-open {
    -webkit-mask-image: url(/images/icon/menu-open.svg);
    mask-image: url(/images/icon/menu-open.svg);
}

.icon.dots-vertical {
    -webkit-mask-image: url(/images/icon/dots-vertical.svg);
    mask-image: url(/images/icon/dots-vertical.svg);
}

.icon.cog {
    -webkit-mask-image: url(/images/icon/cog.svg);
    mask-image: url(/images/icon/cog.svg);
}

.icon.magnify {
    -webkit-mask-image: url(/images/icon/magnify.svg);
    mask-image: url(/images/icon/magnify.svg);
}

.icon.arrow-left {
    -webkit-mask-image: url(/images/icon/arrow-left.svg);
    mask-image: url(/images/icon/arrow-left.svg);
}

.icon.arrow-right {
    -webkit-mask-image: url(/images/icon/arrow-right.svg);
    mask-image: url(/images/icon/arrow-right.svg);
}

.icon.check {
    -webkit-mask-image: url(/images/icon/check.svg);
    mask-image: url(/images/icon/check.svg);
}

.icon.check-all {
    -webkit-mask-image: url(/images/icon/check-all.svg);
    mask-image: url(/images/icon/check-all.svg);
}

.icon.calendar {
    -webkit-mask-image: url(/images/icon/calendar.svg);
    mask-image: url(/images/icon/calendar.svg);
}

.icon.account {
    -webkit-mask-image: url(/images/icon/account.svg);
    mask-image: url(/images/icon/account.svg);
}

.icon.onepassword {
    -webkit-mask-image: url(/images/icon/onepassword.svg);
    mask-image: url(/images/icon/onepassword.svg);
}

.icon.login {
    -webkit-mask-image: url(/images/icon/login.svg);
    mask-image: url(/images/icon/login.svg);
}

.icon.plus {
    -webkit-mask-image: url(/images/icon/plus.svg);
    mask-image: url(/images/icon/plus.svg);
}

.icon.phone {
    -webkit-mask-image: url(/images/icon/phone.svg);
    mask-image: url(/images/icon/phone.svg);
}

.icon.email {
    -webkit-mask-image: url(/images/icon/email.svg);
    mask-image: url(/images/icon/email.svg);
}

.icon.email-check {
    -webkit-mask-image: url(/images/icon/email-check.svg);
    mask-image: url(/images/icon/email-check.svg);
}

.icon.message-text-fast {
    -webkit-mask-image: url(/images/icon/message-text-fast.svg);
    mask-image: url(/images/icon/message-text-fast.svg);
}

.icon.target-account {
    -webkit-mask-image: url(/images/icon/target-account.svg);
    mask-image: url(/images/icon/target-account.svg);
}

.icon.send {
    -webkit-mask-image: url(/images/icon/send.svg);
    mask-image: url(/images/icon/send.svg);
}

.icon.alert-remove {
    -webkit-mask-image: url(/images/icon/alert-remove.svg);
    mask-image: url(/images/icon/alert-remove.svg);
}

.icon.upload {
    -webkit-mask-image: url(/images/icon/upload.svg);
    mask-image: url(/images/icon/upload.svg);
}

.icon.file-upload {
    -webkit-mask-image: url(/images/icon/file-upload.svg);
    mask-image: url(/images/icon/file-upload.svg);
}

.icon.cloud-upload {
    -webkit-mask-image: url(/images/icon/cloud-upload.svg);
    mask-image: url(/images/icon/cloud-upload.svg);
}

.icon.image {
    -webkit-mask-image: url(/images/icon/image.svg);
    mask-image: url(/images/icon/image.svg);
}

.icon.cogs {
    -webkit-mask-image: url(/images/icon/cogs.svg);
    mask-image: url(/images/icon/cogs.svg);
}

.icon.table-cog {
    -webkit-mask-image: url(/images/icon/table-cog.svg);
    mask-image: url(/images/icon/table-cog.svg);
}

.icon.menu {
    -webkit-mask-image: url(/images/icon/menu.svg);
    mask-image: url(/images/icon/menu.svg);
}

.icon.view-gallery-outline {
    -webkit-mask-image: url(/images/icon/view-gallery-outline.svg);
    mask-image: url(/images/icon/view-gallery-outline.svg);
}

.icon.text-box-outline {
    -webkit-mask-image: url(/images/icon/text-box-outline.svg);
    mask-image: url(/images/icon/text-box-outline.svg);
}

.icon.check-decagram-outline {
    -webkit-mask-image: url(/images/icon/check-decagram-outline.svg);
    mask-image: url(/images/icon/check-decagram-outline.svg);
}

.icon.account-group {
    -webkit-mask-image: url(/images/icon/account-group.svg);
    mask-image: url(/images/icon/account-group.svg);
}

.icon.information-outline {
    -webkit-mask-image: url(/images/icon/information-outline.svg);
    mask-image: url(/images/icon/information-outline.svg);
}

.icon.account-school-outline {
    -webkit-mask-image: url(/images/icon/account-school-outline.svg);
    mask-image: url(/images/icon/account-school-outline.svg);
}

.icon.handshake-outline {
    -webkit-mask-image: url(/images/icon/handshake-outline.svg);
    mask-image: url(/images/icon/handshake-outline.svg);
}

.icon.comment-quote-outline {
    -webkit-mask-image: url(/images/icon/comment-quote-outline.svg);
    mask-image: url(/images/icon/comment-quote-outline.svg);
}

.icon.tag-multiple-outline {
    -webkit-mask-image: url(/images/icon/tag-multiple-outline.svg);
    mask-image: url(/images/icon/tag-multiple-outline.svg);
}

.icon.image-text {
    -webkit-mask-image: url(/images/icon/image-text.svg);
    mask-image: url(/images/icon/image-text.svg);
}

.icon.star-box-multiple-outline {
    -webkit-mask-image: url(/images/icon/star-box-multiple-outline.svg);
    mask-image: url(/images/icon/star-box-multiple-outline.svg);
}

.icon.page-next-outline {
    -webkit-mask-image: url(/images/icon/page-next-outline.svg);
    mask-image: url(/images/icon/page-next-outline.svg);
}

.icon.swap-horizontal {
    -webkit-mask-image: url(/images/icon/swap-horizontal.svg);
    mask-image: url(/images/icon/swap-horizontal.svg);
}

.icon.minus {
    -webkit-mask-image: url(/images/icon/minus.svg);
    mask-image: url(/images/icon/minus.svg);
}
.icon.seat-passenger {
    -webkit-mask-image: url(/images/icon/seat-passenger.svg);
    mask-image: url(/images/icon/seat-passenger.svg);
}

.icon.circle-outline {
    -webkit-mask-image: url(/images/icon/circle-outline.svg);
    mask-image: url(/images/icon/circle-outline.svg);
}

.icon.airplane-landing {
    -webkit-mask-image: url(/images/icon/airplane-landing.svg);
    mask-image: url(/images/icon/airplane-landing.svg);
}


.icon.oneway{
    -webkit-mask-image: url(/images/icon/oneway.svg);
    mask-image: url(/images/icon/oneway.svg);
}

.icon.roundtrip{
    -webkit-mask-image: url(/images/icon/roundtrip.svg);
    mask-image: url(/images/icon/roundtrip.svg);
}

.icon.multiple{
    -webkit-mask-image: url(/images/icon/multiple.svg);
    mask-image: url(/images/icon/multiple.svg);
}

.icon.map-marker-outline{
    -webkit-mask-image: url(/images/icon/map-marker-outline.svg);
    mask-image: url(/images/icon/map-marker-outline.svg);
}

.icon.voucher-ticket{
    -webkit-mask-image: url(/images/icon/voucher-ticket.svg);
    mask-image: url(/images/icon/voucher-ticket.svg);
}

.icon.tag-check-outline{
    -webkit-mask-image: url(/images/icon/tag-check-outline.svg);
    mask-image: url(/images/icon/tag-check-outline.svg);
}

.icon.discount-tag{
    -webkit-mask-image: url(/images/icon/discount-tag.svg);
    mask-image: url(/images/icon/discount-tag.svg);
}

.icon.airplane{
    -webkit-mask-image: url(/images/icon/airplane.svg);
    mask-image: url(/images/icon/airplane.svg);
}


.icon.wallet-travel{
    -webkit-mask-image: url(/images/icon/wallet-travel.svg);
    mask-image: url(/images/icon/wallet-travel.svg);
}
.icon.passport{
    -webkit-mask-image: url(/images/icon/passport.svg);
    mask-image: url(/images/icon/passport.svg);
}

.icon.shield-airplane-outline{
    -webkit-mask-image: url(/images/icon/shield-airplane-outline.svg);
    mask-image: url(/images/icon/shield-airplane-outline.svg);
}

.icon.facebook{
    -webkit-mask-image: url(/images/icon/facebook.svg);
    mask-image: url(/images/icon/facebook.svg);
}
.icon.youtube{
    -webkit-mask-image: url(/images/icon/youtube.svg);
    mask-image: url(/images/icon/youtube.svg);
}
.icon.tiktok{
    -webkit-mask-image: url(/images/icon/tiktok.svg);
    mask-image: url(/images/icon/tiktok.svg);
}

.icon.vertical-airplane{
    -webkit-mask-image: url(/images/icon/vertical-airplane.svg);
    mask-image: url(/images/icon/vertical-airplane.svg);
}

.icon.filters{
    -webkit-mask-image: url(/images/icon/filters.svg);
    mask-image: url(/images/icon/filters.svg);
}
.icon.account-circle{
    -webkit-mask-image: url(/images/icon/account-circle.svg);
    mask-image: url(/images/icon/account-circle.svg);
}

.icon.file-word{
    -webkit-mask-image: url(/images/icon/file-word.svg);
    mask-image: url(/images/icon/file-word.svg);
}

.icon.numeric-1-circle{
    -webkit-mask-image: url(/images/icon/numeric-1-circle.svg);
    mask-image: url(/images/icon/numeric-1-circle.svg);
}

.icon.numeric-2-circle{
    -webkit-mask-image: url(/images/icon/numeric-2-circle.svg);
    mask-image: url(/images/icon/numeric-2-circle.svg);
}
.icon.numeric-3-circle{
    -webkit-mask-image: url(/images/icon/numeric-3-circle.svg);
    mask-image: url(/images/icon/numeric-3-circle.svg);
}

.icon.numeric-4-circle{
    -webkit-mask-image: url(/images/icon/numeric-4-circle.svg);
    mask-image: url(/images/icon/numeric-4-circle.svg);
}

.icon.zalo{
    -webkit-mask-image: url(/images/icon/zalo.svg);
    mask-image: url(/images/icon/zalo.svg);
}