/* ### Root || */

/* Variabel */
:root {
    --ext-orange-900: #4D2601;
    --ext-orange-800: #6E3602;
    --ext-orange-700: #A65203;
    --ext-orange-600: #D46904;
    --ext-orange-500: #F77B04;
    --ext-orange-400: #F99537;
    --ext-orange-300: #FAAE64;
    --ext-orange-200: #FBC797;
    --ext-orange-100: #FDE3CA;
    --ext-orange-50: #FEF5EC;

    --ext-yellow-900: #4D3E04;
    --ext-yellow-800: #735E08;
    --ext-yellow-700: #9A7D0F;
    --ext-yellow-600: #CCA818;
    --ext-yellow-500: #EDC31C;
    --ext-yellow-400: #FAD74B;
    --ext-yellow-300: #FAE07B;
    --ext-yellow-200: #FCEBA4;
    --ext-yellow-100: #FFF5CC;
    --ext-yellow-50: #FFFBEB;

    --ext-navy-900: #031120;
    --ext-navy-800: #04162A;
    --ext-navy-700: #061D36;
    --ext-navy-600: #072545;
    --ext-navy-500: #08294C;
    --ext-navy-400: #395470;
    --ext-navy-300: #5A7087;
    --ext-navy-200: #8D9CAD;
    --ext-navy-100: #B2BDC8;
    --ext-navy-50: #E6E9ED;

    --ext-red-900: #4D0404;
    --ext-red-800: #730606;
    --ext-red-700: #990F0F;
    --ext-red-600: #BF1919;
    --ext-red-500: #E31B1B;
    --ext-red-400: #ED4747;
    --ext-red-300: #F77979;
    --ext-red-200: #FAACAC;
    --ext-red-100: #FFD9D9;
    --ext-red-50: #FFEDED;

    --ext-green-900: #044D3C;
    --ext-green-800: #067259;
    --ext-green-700: #0F9978;
    --ext-green-600: #17BF98;
    --ext-green-500: #1BDEAF;
    --ext-green-400: #63E5C7;
    --ext-green-300: #7FF2D7;
    --ext-green-200: #AAFAE7;
    --ext-green-100: #C7FAEE;
    --ext-green-50: #EBFFFA;

    --ext-cyan-900: #00394D;
    --ext-cyan-800: #076482;
    --ext-cyan-700: #0C82A8;
    --ext-cyan-600: #16A8D8;
    --ext-cyan-500: #1CBAED;
    --ext-cyan-400: #49C8F1;
    --ext-cyan-300: #7AD5F3;
    --ext-cyan-200: #AFE7FA;
    --ext-cyan-100: #D4F0F9;
    --ext-cyan-50: #EAFAFF;

    --ext-blue-900: #08254D;
    --ext-blue-800: #0B3873;
    --ext-blue-700: #114B99;
    --ext-blue-600: #175FBF;
    --ext-blue-500: #1876F2;
    --ext-blue-400: #4E95F5;
    --ext-blue-300: #87B7F6;
    --ext-blue-200: #A7CBF9;
    --ext-blue-100: #C9DFFB;
    --ext-blue-50: #EAF3FE;

    --ext-neutral-900: #112030;
    --ext-neutral-700: #364C63;
    --ext-neutral-500: #566A80;
    --ext-neutral-300: #98A5B3;
    --ext-neutral-100: #D3D9DF;
    --ext-neutral-50: #F9FAFB;

    --ext-dark-900: #0B1826;
    --ext-dark-700: #132233;
    --ext-dark-500: #1A2A3B;
    --ext-dark-300: #223447;
    --ext-dark-100: #314459;
    --ext-dark-50: #40556B;

    --ext-light-900: #C3CED9;
    --ext-light-700: #D3DCE5;
    --ext-light-500: #E4EAF0;
    --ext-light-300: #EDF2F7;
    --ext-light-100: #F5F7FA;
    --ext-light-50: #FFFFFF;
}

/* END */

/* ### Color || */

/* Orange Color */

.ext-orange-900 {
    color: var(--ext-orange-900) !important;
}

.ext-orange-800 {
    color: var(--ext-orange-800) !important;
}

.ext-orange-700 {
    color: var(--ext-orange-700) !important;
}

.ext-orange-600 {
    color: var(--ext-orange-600, #E87100) !important;
}

.ext-orange-500 {
    color: var(--ext-orange-500, #F77B04) !important;
}

.ext-orange-400 {
    color: var(--ext-orange-400, #F99537) !important;
}

.ext-orange-300 {
    color: var(--ext-orange-300, #FAB068) !important;
}

.ext-orange-200 {
    color: var(--ext-orange-200, #FCCA9B) !important;
}

.ext-orange-100 {
    color: var(--ext-orange-100, #FDE5CD) !important;
}

.ext-orange-50 {
    color: var(--ext-orange-50) !important;
}

/* END */

/* Yellow Color */
.ext-yellow-900 {
    color: var(--ext-yellow-900) !important;
}

.ext-yellow-800 {
    color: var(--ext-yellow-800) !important;
}

.ext-yellow-700 {
    color: var(--ext-yellow-700) !important;
}

.ext-yellow-600 {
    color: var(--ext-yellow-600, #F3CA28) !important;
}

.ext-yellow-500 {
    color: var(--ext-yellow-500, #EDC31C) !important;
}

.ext-yellow-400 {
    color: var(--ext-yellow-400, #FAD74B) !important;
}

.ext-yellow-300 {
    color: var(--ext-yellow-300, #FFE88B) !important;
}

.ext-yellow-200 {
    color: var(--ext-yellow-200, #FFEFB2) !important;
}

.ext-yellow-100 {
    color: var(--ext-yellow-100, #FFF7D8) !important;
}

.ext-yellow-50 {
    color: var(--ext-yellow-50) !important;
}

/* END */

/* Navy Blue Color */
.ext-navy-900 {
    color: var(--ext-navy-900) !important;
}

.ext-navy-800 {
    color: var(--ext-navy-800) !important;
}

.ext-navy-700 {
    color: var(--ext-navy-700) !important;
}

.ext-navy-600 {
    color: var(--ext-navy-600) !important;
}

.ext-navy-500 {
    color: var(--ext-navy-500, #08294C) !important;
}

.ext-navy-400 {
    color: var(--ext-navy-400, #395470) !important;
}

.ext-navy-300 {
    color: var(--ext-navy-300, #6B7F94) !important;
}

.ext-navy-200 {
    color: var(--ext-navy-200, #9CA9B7) !important;
}

.ext-navy-100 {
    color: var(--ext-navy-100, #CED4DB) !important;
}

.ext-navy-50 {
    color: var(--ext-navy-50) !important;
}

/* END */

/* Red Color */

.ext-red-900 {
    color: var(--ext-red-900) !important;
}

.ext-red-800 {
    color: var(--ext-red-800) !important;
}

.ext-red-700 {
    color: var(--ext-red-700) !important;
}

.ext-red-600 {
    color: var(--ext-red-600, #D62020) !important;
}

.ext-red-500 {
    color: var(--ext-red-500, #E31B1B) !important;
}

.ext-red-400 {
    color: var(--ext-red-400, #E95A5A) !important;
}

.ext-red-300 {
    color: var(--ext-red-300, #EE8383) !important;
}

.ext-red-200 {
    color: var(--ext-red-200, #F4ACAC) !important;
}

.ext-red-100 {
    color: var(--ext-red-100, #F9D6D6) !important;
}

.ext-red-50 {
    color: var(--ext-red-50) !important;
}

/* END */

/* Green Color */
.ext-green-900 {
    color: var(--ext-green-900) !important;
}

.ext-green-800 {
    color: var(--ext-green-800) !important;
}

.ext-green-700 {
    color: var(--ext-green-700) !important;
}

.ext-green-600 {
    color: var(--ext-green-600, #26C69F) !important;
}

.ext-green-500 {
    color: var(--ext-green-500, #1BDEAF) !important;
}

.ext-green-400 {
    color: var(--ext-green-400, #5ADABB) !important;
}

.ext-green-300 {
    color: var(--ext-green-300, #83E3CC) !important;
}

.ext-green-200 {
    color: var(--ext-green-200, #ACECDD) !important;
}

.ext-green-100 {
    color: var(--ext-green-100, #D6F6EE) !important;
}

.ext-green-50 {
    color: var(--ext-green-50) !important;
}

/* END */

/* Light Blue Color */
.ext-cyan-900 {
    color: var(--ext-cyan-900) !important;
}

.ext-cyan-800 {
    color: var(--ext-cyan-800) !important;
}

.ext-cyan-700 {
    color: var(--ext-cyan-700) !important;
}

.ext-cyan-600 {
    color: var(--ext-cyan-600, #12ADDF) !important;
}

.ext-cyan-500 {
    color: var(--ext-cyan-500, #1CBAED) !important;
}

.ext-cyan-400 {
    color: var(--ext-cyan-400, #49C8F1) !important;
}

.ext-cyan-300 {
    color: var(--ext-cyan-300, #77D6F4) !important;
}

.ext-cyan-200 {
    color: var(--ext-cyan-200, #A4E3F8) !important;
}

.ext-cyan-100 {
    color: var(--ext-cyan-100, #D2F1FB) !important;
}

.ext-cyan-50 {
    color: var(--ext-cyan-50) !important;
}

/* END */

/* Sky Blue Color */
.ext-blue-900 {
    color: var(--ext-blue-900) !important;
}

.ext-blue-800 {
    color: var(--ext-blue-800) !important;
}

.ext-blue-700 {
    color: var(--ext-blue-700) !important;
}

.ext-blue-600 {
    color: var(--ext-blue-600, #2074E2) !important;
}

.ext-blue-500 {
    color: var(--ext-blue-500, #1876F2) !important;
}

.ext-blue-400 {
    color: var(--ext-blue-400, #4E95F5) !important;
}

.ext-blue-300 {
    color: var(--ext-blue-300, #7FB3F7) !important;
}

.ext-blue-200 {
    color: var(--ext-blue-200, #AACCFA) !important;
}

.ext-blue-100 {
    color: var(--ext-blue-100, #D4E5FC) !important;
}

.ext-blue-50 {
    color: var(--ext-blue-50) !important;
}

/* END */

/* Neutral Color */
.ext-neutral-900 {
    color: var(--ext-neutral-900, #262641) !important;
}

.ext-neutral-700 {
    color: var(--ext-neutral-700, #5C5C77) !important;
}

.ext-neutral-500 {
    color: var(--ext-neutral-500, #9797AA) !important;
}

.ext-neutral-300 {
    color: var(--ext-neutral-300, #EEF2F5) !important;
}

.ext-neutral-100 {
    color: var(--ext-neutral-100, #FBFCFE) !important;
}

.ext-neutral-50 {
    color: var(--ext-neutral-50, #FFFFFF) !important;
}

/* END */

/* Gradient Bg Color */
.ext-gradient-orange {
    background-image: linear-gradient(45deg, var(--ext-orange-500), var(--ext-orange-400)) !important;
}

.ext-gradient-navyblue {
    background-image: linear-gradient(45deg, var(--ext-navy-500), var(--ext-navy-400)) !important;
}

/* END */

/* Dark Mode Color */
.ext-dark-900 {
    color: var(--ext-dark-900, #000000) !important;
}

.ext-dark-700 {
    color: var(--ext-dark-700, #141414) !important;
}

.ext-dark-500 {
    color: var(--ext-dark-500, #1F1F1F) !important;
}

.ext-dark-300 {
    color: var(--ext-dark-300, #262626) !important;
}

.ext-dark-100 {
    color: var(--ext-dark-100, #434343) !important;
}

.ext-dark-50 {
    color: var(--ext-dark-50, #595959) !important;
}

/* END */

/* Light Mode Color */
.ext-light-900 {
    color: var(--ext-light-900, #FFFFFF) !important;
}

.ext-light-700 {
    color: var(--ext-light-700, #FAFAFA) !important;
}

.ext-light-500 {
    color: var(--ext-light-500, #F5F5F5) !important;
}

.ext-light-300 {
    color: var(--ext-light-300, #F0F0F0) !important;
}

.ext-light-100 {
    color: var(--ext-light-100, #D9D9D9) !important;
}

.ext-light-50 {
    color: var(--ext-light-50, #BFBFBF) !important;
}

/* END */

/* ### Shadow || */

/* Shadow */
.ext-shadow-sm {
    box-shadow: 1px 2px 10px 0px rgba(11, 24, 38, 0.05);
}

.ext-shadow {
    box-shadow: 1px 3px 10px 0px rgba(11, 24, 38, 0.10);
}

.ext-shadow-md {
    box-shadow: 4px 6px 10px 0px rgba(11, 24, 38, 0.1), -1px 0px 10px 0px rgba(11, 24, 38, 0.1);
}

.ext-shadow-lg {
    box-shadow: 10px 15px 24px 0px rgba(11, 24, 38, 0.1), -3px 0px 24px 0px rgba(11, 24, 38, 0.1);
}

.ext-shadow-xl {
    box-shadow: 20px 25px 24px 0px rgba(11, 24, 38, 0.1), -5px 0px 24px 0px rgba(11, 24, 38, 0.1);
}

.ext-shadow-inner {
    box-shadow: 2px 4px 10px 0px rgba(11, 24, 38, 0.1) inset;
}

.ext-shadow-none {
    /* box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.05) inset; */
    border: 1px solid rgba(211, 220, 229, 1);
}

.ext-shadow-dark-sm {
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.1);
}

.ext-shadow-dark {
    box-shadow: 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
}

.ext-shadow-dark-md {
    box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.2), -1px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.ext-shadow-dark-lg {
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.2), -3px 0px 24px 0px rgba(0, 0, 0, 0.2);
}

.ext-shadow-dark-xl {
    box-shadow: 20px 25px 24px 0px rgba(0, 0, 0, 0.2), -5px 0px 24px 0px rgba(0, 0, 0, 0.2);
}

.ext-shadow-dark-inner {
    box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.1) inset;
}

.ext-shadow-dark-none {
    border: 1px solid rgba(34, 52, 71, 1);
}

/* END */

/* ### Icons || */

/* General */

.ext-icon-academy {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/academy.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-allocation {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/allocation.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-announce {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/announce.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-archive {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/archive.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-large-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-large-type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-large-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-large-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-large-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-large-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-large-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-large-type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-small-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-small-type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-small-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-small-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-small-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-small-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-size-small-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow/size-small-type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-90-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-90/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-90-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-90/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-90-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-90/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-90-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-90/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-bar-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-bar/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-bar-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-bar/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-bar-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-bar/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-bar-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-bar/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-return-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-return/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-arrow-return-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/arrow-return/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-attachment {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/attachment.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-award {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/award.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-backspace-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/backspace/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-backspace-type-reverse {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/backspace/type-reverse.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bag {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bag.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bell-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bell/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bell-type-silent {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bell/type-silent.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-book {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/book.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bookmark-type-add {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bookmark/type-add.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bookmark-type-check {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bookmark/type-check.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bookmark-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bookmark/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bookmark-type-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bookmark/type-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bookmark-type-multiple {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bookmark/type-multiple.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-bookmark-type-remove {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/bookmark/type-remove.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-in-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-in/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-in-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-in/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-in-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-in/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-in-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-in/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-out-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-out/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-out-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-out/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-out-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-out/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-box-arrow-out-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/box-arrow-out/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-branch {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/branch.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-briefcase {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/briefcase.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-calculator {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/calculator.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-calendar-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/calendar/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-calendar-type-duration {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/calendar/type-duration.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-car {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/car.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-caret-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/caret/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-caret-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/caret/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-caret-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/caret/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-caret-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/caret/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chat-property-1-round {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chat/property-1-round.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chat-property-1-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chat/property-1-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chat-property-1-round-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chat/property-1-round-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chat-property-1-square-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chat/property-1-square-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-check-property-1-check {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/check/property-1-check.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-check-property-1-circle-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/check/property-1-circle-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-check-property-1-circle-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/check/property-1-circle-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-check-property-1-double {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/check/property-1-double.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-check-property-1-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/check/property-1-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-large-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-large-type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-large-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-large-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-large-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-large-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-large-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-large-type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-small-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-small-type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-small-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-small-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-small-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-small-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-size-small-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron/size-small-type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-chevron-expand {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/chevron-expand.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-clipboard-property-1-clipboard {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/clipboard/property-1-clipboard.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-clipboard-property-1-graph {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/clipboard/property-1-graph.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-clipboard-list {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/clipboard-list.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-clock-type-clock {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/clock/type-clock.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-clock-type-history {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/clock/type-history.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-close-property-1-circle-filled-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/close/property-1-circle-filled-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-close-property-1-close {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/close/property-1-close.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-close-property-1-filled-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/close/property-1-filled-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-close-property-1-outline-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/close/property-1-outline-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-close-property-1-outline-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/close/property-1-outline-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-cloud-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/cloud/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-cloud-type-download {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/cloud/type-download.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-cloud-type-upload {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/cloud/type-upload.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-code-type-empty {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/code/type-empty.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-code-type-with-slash {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/code/type-with-slash.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-coffee {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/coffee.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-columns-gap {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/columns-gap.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-court-2 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/court-2.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-court {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/court.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-dash-type-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/dash/type-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-dash-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/dash/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-dash-type-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/dash/type-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-delete {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/delete.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-disable {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/disable.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-doc {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-doc.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-jpg {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-jpg.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-pdf {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-pdf.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-png {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-png.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-ppt {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-ppt.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-xls {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-xls.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-document-format-type-zip {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/document-format/type-zip.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-dot-big {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/dot-big.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-dot-small {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/dot-small.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-double-chevron-size-large-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/double-chevron/size-large-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-double-chevron-size-large-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/double-chevron/size-large-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-double-chevron-size-medium-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/double-chevron/size-medium-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-double-chevron-size-medium-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/double-chevron/size-medium-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-double-chevron-size-small-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/double-chevron/size-small-type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-double-chevron-size-small-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/double-chevron/size-small-type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-download {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/download.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-drag {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/drag.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-duplicate {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/duplicate.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-exclamation-type-circle-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/exclamation/type-circle-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-exclamation-type-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/exclamation/type-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-exclamation-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/exclamation/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-exclamation-type-diamond {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/exclamation/type-diamond.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-exclamation-type-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/exclamation/type-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-exclamation-type-triangle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/exclamation/type-triangle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-eye-property-1-hide {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/eye/property-1-hide.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-eye-property-1-show {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/eye/property-1-show.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-eye-property-1-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/eye/property-1-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-face-frown {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/face-frown.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-face-smile {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/face-smile.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-facebook-style-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/facebook/style-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-facebook-style-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/facebook/style-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-arrow-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-arrow-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-arrow-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-arrow-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-break {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-break.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-check {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-check.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-code {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-code.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-cv {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-cv.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-diff {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-diff.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-files {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-files.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-minus {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-minus.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-plus {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-plus.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-standard {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-standard.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-text {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-text.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-file-type-zip {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/file/type-zip.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-filter {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/filter.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-flag {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/flag.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-flash {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/flash.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-formulir-pajak {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/formulir-pajak.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-fullscreen-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/fullscreen/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-fullscreen-type-exit {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/fullscreen/type-exit.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-fullscreen {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/fullscreen.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-funnel {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/funnel.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-gear-type-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/gear/type-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-gear-type-outlined {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/gear/type-outlined.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-google-property-1-- {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/google/property-1--.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-google-property-1-logo-property-2-gdrive {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/google/property-1-logo-property-2-gdrive.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-google-property-1-logo-property-2-google {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/google/property-1-logo-property-2-google.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-grid {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/grid.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-guideline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/guideline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-handshake {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/handshake.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-health {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/health.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-highlight-property-1-1 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/highlight/property-1-1.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-highlight-property-1-2 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/highlight/property-1-2.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-history {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/history.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-home-property-1-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/home/property-1-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-home-property-1-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/home/property-1-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-house {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/house.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-id {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/id.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-image-type-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/image/type-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-image-type-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/image/type-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-inbox-type-1 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/inbox/type-1.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-inbox-type-2 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/inbox/type-2.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-inbox-type-3 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/inbox/type-3.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-info-type-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/info/type-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-info-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/info/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-info-type-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/info/type-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-information-circle-property-1-info-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/information-circle/property-1-info-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-information-circle-property-1-info-italic-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/information-circle/property-1-info-italic-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-information-circle-property-1-info-italic-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/information-circle/property-1-info-italic-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-information-circle-property-1-info-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/information-circle/property-1-info-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-information-circle-property-1-info {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/information-circle/property-1-info.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-insentif-pajak {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/insentif-pajak.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-instagram-style-circle-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/instagram/style-circle-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-instagram-style-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/instagram/style-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-instagram-style-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/instagram/style-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-instagram-style-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/instagram/style-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-journal {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/journal.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-linear-scale {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/linear-scale.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-link-type-45deg {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/link/type-45deg.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-link-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/link/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-linkedin-style-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/linkedin/style-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-linkedin-style-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/linkedin/style-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-list {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/list.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-loading {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/loading.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-location-style-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/location/style-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-location-style-outlined {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/location/style-outlined.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-lock-property-1-lock {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/lock/property-1-lock.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-lock-property-1-unlock {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/lock/property-1-unlock.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-logo-device {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/logo/device.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-love-style-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/love/style-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-love-style-outlined {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/love/style-outlined.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-mail-property-1-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/mail/property-1-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-mail-property-1-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/mail/property-1-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-mail-property-1-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/mail/property-1-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-map {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/map.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-mic-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/mic/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-mic-type-mute {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/mic/type-mute.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-money {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/money.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-moon {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/moon.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-move {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/move.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-paragraph-type-long-answer {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/paragraph/type-long-answer.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-paragraph-type-short-answer {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/paragraph/type-short-answer.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-pen {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/pen.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-pencil {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/pencil.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-people-type-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/people/type-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-people-type-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/people/type-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-person-type-add {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/person/type-add.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-person-type-check {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/person/type-check.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-person-type-filled-rev {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/person/type-filled-rev.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-person-type-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/person/type-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-person-type-remove {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/person/type-remove.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-phone-style-filled-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/phone/style-filled-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-phone-style-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/phone/style-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-phone-style-outline-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/phone/style-outline-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-phone-style-outlined {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/phone/style-outlined.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-pie-chart {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/pie-chart.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-play-property-1-circle-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/play/property-1-circle-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-play-property-1-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/play/property-1-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-play-property-1-play {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/play/property-1-play.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-plus-type-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/plus/type-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-plus-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/plus/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-plus-type-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/plus/type-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-podium {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/podium.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-power {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/power.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-filled-extra-small {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-filled-extra-small.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-filled-large {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-filled-large.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-filled-medium {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-filled-medium.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-filled-small {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-filled-small.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-outline-extra-small {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-outline-extra-small.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-outline-large {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-outline-large.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-outline-medium {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-outline-medium.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-premium-property-1-outline-small {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/premium/property-1-outline-small.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-presentation {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/presentation.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-print-property-1-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/print/property-1-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-print-property-1-outlined {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/print/property-1-outlined.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-promo {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/promo.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-question-type-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/question/type-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-question-type-circle_filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/question/type-circle_filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-question-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/question/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-question-type-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/question/type-square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-question-type-square_filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/question/type-square_filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-record {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/record.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-refresh-type-clockwise {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/refresh/type-clockwise.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-refresh-type-counterclockwise {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/refresh/type-counterclockwise.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-repeat {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/repeat.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-reply {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/reply.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-resize {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/resize.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-sanksi-dan-imbalan {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/sanksi-dan-imbalan.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-save {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/save.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-search {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/search.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-section {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/section.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-setting {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/setting.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-share {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/share.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-share-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/share-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-shuffle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/shuffle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-six-dots-vertical {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/six-dots-vertical.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-skip-type-backward {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/skip/type-backward.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-skip-type-fast-backward {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/skip/type-fast-backward.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-skip-type-fast-forward {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/skip/type-fast-forward.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-skip-type-next {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/skip/type-next.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-sort-property-1-left-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/sort/property-1-left-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-sort-property-1-up-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/sort/property-1-up-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-sort {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/sort.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-square {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-stamp {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/stamp.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-star-style-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/star/style-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-star-style-half {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/star/style-half.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-star-style-outline {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/star/style-outline.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-stationary {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/stationary.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-structure {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/structure.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-sun {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/sun.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tag {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tag.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-three-dots-type-horizontal {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/three-dots/type-horizontal.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-three-dots-type-vertical {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/three-dots/type-vertical.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tiktok-property-1-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tiktok/property-1-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tiktok-property-1-variant2 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tiktok/property-1-variant2.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-arrow-type-down-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-arrow/type-down-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-arrow-type-down-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-arrow/type-down-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-arrow-type-up-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-arrow/type-up-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-arrow-type-up-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-arrow/type-up-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-in-type-down-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-in/type-down-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-in-type-down-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-in/type-down-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-in-type-up-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-in/type-up-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-in-type-up-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-in/type-up-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-out-type-down-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-out/type-down-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-out-type-down-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-out/type-down-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-out-type-up-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-out/type-up-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-tilt-box-arrow-out-type-up-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/tilt-box-arrow-out/type-up-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-timer {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/timer.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-triangle-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/triangle/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-triangle-type-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/triangle/type-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-triangle-type-right-left {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/triangle/type-right-left.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-triangle-type-right {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/triangle/type-right.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-triangle-type-up-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/triangle/type-up-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-triangle-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/triangle/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-two-line-property-1-horizontal {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/two-line/property-1-horizontal.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-two-line-property-1-vertical {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/two-line/property-1-vertical.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-upload {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/upload.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-verified {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/verified.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-volume-type-down {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/volume/type-down.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-volume-type-mute {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/volume/type-mute.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-volume-type-up {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/volume/type-up.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-wallet-property-1-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/wallet/property-1-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-wallet-property-1-outlined {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/wallet/property-1-outlined.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-website {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/website.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-wifi {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/wifi.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-youtube-property-1-circle {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/youtube/property-1-circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-youtube-property-1-youtube {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/youtube/property-1-youtube.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-zoom-in-type-diagonal {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/zoom-in/type-diagonal.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-zoom-in-type-vertical {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/zoom-in/type-vertical.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-zoom-in-type-char {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/zoom-in/type-char.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-zoom-out-type-diagonal {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/zoom-out/type-diagonal.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-zoom-out-type-vertical {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/zoom-out/type-vertical.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-zoom-out-type-char {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/zoom-out/type-char.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-text-text-adjust {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/text/text-adjust.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-text-text-normal {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/text/text-normal.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-text-text-medium {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/text/text-medium.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-text-text-large {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/text/text-large.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-folder-type-check {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500);
    --svg: url('https://ds.ddtc.web.id/icons/folder/type-check.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-folder-type-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500);
    --svg: url('https://ds.ddtc.web.id/icons/folder/type-default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-folder-type-filled {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500);
    --svg: url('https://ds.ddtc.web.id/icons/folder/type-filled.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-folder-type-minus {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500);
    --svg: url('https://ds.ddtc.web.id/icons/folder/type-minus.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-folder-type-plus {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500);
    --svg: url('https://ds.ddtc.web.id/icons/folder/type-plus.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-folder-type-move {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500);
    --svg: url('https://ds.ddtc.web.id/icons/folder/type-move.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-trolley-default {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/trolley/default.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-trolley-plus {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/trolley/plus.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-coupon {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/coupon.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.ext-icon-promo-type-1 {
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--ext-navy-500, #08294C);
    --svg: url('https://ds.ddtc.web.id/icons/promo-type-1.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* END */

/* ### Background Colors || */

/* Orange Color */

.ext-bg-orange-900 {
    background-color: var(--ext-orange-900) !important;
}

.ext-bg-orange-800 {
    background-color: var(--ext-orange-800) !important;
}

.ext-bg-orange-700 {
    background-color: var(--ext-orange-700) !important;
}

.ext-bg-orange-600 {
    background-color: var(--ext-orange-600, #E87100) !important;
}

.ext-bg-orange-500 {
    background-color: var(--ext-orange-500, #F77B04) !important;
}

.ext-bg-orange-400 {
    background-color: var(--ext-orange-400, #F99537) !important;
}

.ext-bg-orange-300 {
    background-color: var(--ext-orange-300, #FAB068) !important;
}

.ext-bg-orange-200 {
    background-color: var(--ext-orange-200, #FCCA9B) !important;
}

.ext-bg-orange-100 {
    background-color: var(--ext-orange-100, #FDE5CD) !important;
}

.ext-bg-orange-50 {
    background-color: var(--ext-orange-50) !important;
}

/* END */

/* Yellow Color */
.ext-bg-yellow-900 {
    background-color: var(--ext-yellow-900) !important;
}

.ext-bg-yellow-800 {
    background-color: var(--ext-yellow-800) !important;
}

.ext-bg-yellow-700 {
    background-color: var(--ext-yellow-700) !important;
}

.ext-bg-yellow-600 {
    background-color: var(--ext-yellow-600, #F3CA28) !important;
}

.ext-bg-yellow-500 {
    background-color: var(--ext-yellow-500, #EDC31C) !important;
}

.ext-bg-yellow-400 {
    background-color: var(--ext-yellow-400, #FAD74B) !important;
}

.ext-bg-yellow-300 {
    background-color: var(--ext-yellow-300, #FFE88B) !important;
}

.ext-bg-yellow-200 {
    background-color: var(--ext-yellow-200, #FFEFB2) !important;
}

.ext-bg-yellow-100 {
    background-color: var(--ext-yellow-100, #FFF7D8) !important;
}

.ext-bg-yellow-50 {
    background-color: var(--ext-yellow-50) !important;
}

/* END */

/* Navy Blue Color */

.ext-bg-navy-900 {
    background-color: var(--ext-navy-900) !important;
}

.ext-bg-navy-800 {
    background-color: var(--ext-navy-800) !important;
}

.ext-bg-navy-700 {
    background-color: var(--ext-navy-700) !important;
}

.ext-bg-navy-600 {
    background-color: var(--ext-navy-600) !important;
}

.ext-bg-navy-500 {
    background-color: var(--ext-navy-500, #08294C) !important;
}

.ext-bg-navy-400 {
    background-color: var(--ext-navy-400, #395470) !important;
}

.ext-bg-navy-300 {
    background-color: var(--ext-navy-300, #6B7F94) !important;
}

.ext-bg-navy-200 {
    background-color: var(--ext-navy-200, #9CA9B7) !important;
}

.ext-bg-navy-100 {
    background-color: var(--ext-navy-100, #CED4DB) !important;
}

.ext-bg-navy-50 {
    background-color: var(--ext-navy-50) !important;
}

/* END */

/* Red Color */
.ext-bg-red-900 {
    background-color: var(--ext-red-900) !important;
}

.ext-bg-red-800 {
    background-color: var(--ext-red-800) !important;
}

.ext-bg-red-700 {
    background-color: var(--ext-red-700) !important;
}

.ext-bg-red-600 {
    background-color: var(--ext-red-600, #D62020) !important;
}

.ext-bg-red-500 {
    background-color: var(--ext-red-500, #E31B1B) !important;
}

.ext-bg-red-400 {
    background-color: var(--ext-red-400, #E95A5A) !important;
}

.ext-bg-red-300 {
    background-color: var(--ext-red-300, #EE8383) !important;
}

.ext-bg-red-200 {
    background-color: var(--ext-red-200, #F4ACAC) !important;
}

.ext-bg-red-100 {
    background-color: var(--ext-red-100, #F9D6D6) !important;
}

.ext-bg-red-50 {
    background-color: var(--ext-red-50) !important;
}

/* END */

/* Green Color */
.ext-bg-green-900 {
    background-color: var(--ext-green-900) !important;
}

.ext-bg-green-800 {
    background-color: var(--ext-green-800) !important;
}

.ext-bg-green-700 {
    background-color: var(--ext-green-700) !important;
}

.ext-bg-green-600 {
    background-color: var(--ext-green-600, #26C69F) !important;
}

.ext-bg-green-500 {
    background-color: var(--ext-green-500, #1BDEAF) !important;
}

.ext-bg-green-400 {
    background-color: var(--ext-green-400, #5ADABB) !important;
}

.ext-bg-green-300 {
    background-color: var(--ext-green-300, #83E3CC) !important;
}

.ext-bg-green-200 {
    background-color: var(--ext-green-200, #ACECDD) !important;
}

.ext-bg-green-100 {
    background-color: var(--ext-green-100, #D6F6EE) !important;
}

.ext-bg-green-50 {
    background-color: var(--ext-green-50) !important;
}

/* END */

/* Light Blue Color */
.ext-bg-cyan-900 {
    background-color: var(--ext-cyan-900) !important;
}

.ext-bg-cyan-800 {
    background-color: var(--ext-cyan-800) !important;
}

.ext-bg-cyan-700 {
    background-color: var(--ext-cyan-700) !important;
}

.ext-bg-cyan-600 {
    background-color: var(--ext-cyan-600, #12ADDF) !important;
}

.ext-bg-cyan-500 {
    background-color: var(--ext-cyan-500, #1CBAED) !important;
}

.ext-bg-cyan-400 {
    background-color: var(--ext-cyan-400, #49C8F1) !important;
}

.ext-bg-cyan-300 {
    background-color: var(--ext-cyan-200, #A4E3F8) !important;
}

.ext-bg-cyan-200 {
    background-color: var(--ext-cyan-200, #A4E3F8) !important;
}

.ext-bg-cyan-100 {
    background-color: var(--ext-cyan-100, #D2F1FB) !important;
}

.ext-bg-cyan-50 {
    background-color: var(--ext-cyan-50) !important;
}

/* END */

/* Sky Blue Color */
.ext-bg-blue-900 {
    background-color: var(--ext-blue-900) !important;
}

.ext-bg-blue-800 {
    background-color: var(--ext-blue-800) !important;
}

.ext-bg-blue-700 {
    background-color: var(--ext-blue-700) !important;
}

.ext-bg-blue-600 {
    background-color: var(--ext-blue-600, #2074E2) !important;
}

.ext-bg-blue-500 {
    background-color: var(--ext-blue-500, #1876F2) !important;
}

.ext-bg-blue-400 {
    background-color: var(--ext-blue-400, #4E95F5) !important;
}

.ext-bg-blue-300 {
    background-color: var(--ext-blue-300, #7FB3F7) !important;
}

.ext-bg-blue-200 {
    background-color: var(--ext-blue-200, #AACCFA) !important;
}

.ext-bg-blue-100 {
    background-color: var(--ext-blue-100, #D4E5FC) !important;
}

.ext-bg-blue-50 {
    background-color: var(--ext-blue-50) !important;
}

/* END */

/* Neutral Color */
.ext-bg-neutral-900 {
    background-color: var(--ext-neutral-900, #262641) !important;
}

.ext-bg-neutral-700 {
    background-color: var(--ext-neutral-700, #5C5C77) !important;
}

.ext-bg-neutral-500 {
    background-color: var(--ext-neutral-500, #9797AA) !important;
}

.ext-bg-neutral-300 {
    background-color: var(--ext-neutral-300, #EEF2F5) !important;
}

.ext-bg-neutral-100 {
    background-color: var(--ext-neutral-100, #FBFCFE) !important;
}

.ext-bg-neutral-50 {
    background-color: var(--ext-neutral-50, #FFFFFF) !important;
}

/* END */

/* Gradient Bg Color */
.ext-bg-gradient-orange {
    background-image: linear-gradient(45deg, #F77B04, #FAB068) !important;
}

.ext-bg-gradient-navyblue {
    background-image: linear-gradient(45deg, #08294C, #395470) !important;
}

/* END */

/* Dark Mode BG Color */
.ext-bg-dark-900 {
    background-color: var(--ext-dark-900, #000000) !important;
}

.ext-bg-dark-700 {
    background-color: var(--ext-dark-700, #141414) !important;
}

.ext-bg-dark-500 {
    background-color: var(--ext-dark-500, #1F1F1F) !important;
}

.ext-bg-dark-300 {
    background-color: var(--ext-dark-300, #262626) !important;
}

.ext-bg-dark-100 {
    background-color: var(--ext-dark-100, #434343) !important;
}

.ext-bg-dark-50 {
    background-color: var(--ext-dark-50, #595959) !important;
}

/* END */

/* Light Mode BG Color */
.ext-bg-light-900 {
    background-color: var(--ext-light-900, #FFFFFF) !important;
}

.ext-bg-light-700 {
    background-color: var(--ext-light-700, #FAFAFA) !important;
}

.ext-bg-light-500 {
    background-color: var(--ext-light-500, #F5F5F5) !important;
}

.ext-bg-light-300 {
    background-color: var(--ext-light-300, #F0F0F0) !important;
}

.ext-bg-light-100 {
    background-color: var(--ext-light-100, #D9D9D9) !important;
}

.ext-bg-light-50 {
    background-color: var(--ext-light-50, #BFBFBF) !important;
}

/* END */

/* ### Buttons || */

/* Primary */

.ext-btn-primary-lg {
    gap: 7px;
    height: 40px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-primary-lg span {
    height: 20px;
    width: 20px;
}

.ext-btn-primary-md {
    gap: 7px;
    height: 36px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-primary-md span {
    height: 18px;
    width: 18px;
}

.ext-btn-primary-sm {
    gap: 7px;
    height: 32px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-primary-sm span {
    height: 16px;
    width: 16px;
}

.ext-btn-primary-xs {
    gap: 7px;
    height: 28px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-primary-xs span {
    height: 14px;
    width: 14px;
}

.ext-btn-primary-lg,
.ext-btn-primary-md,
.ext-btn-primary-sm,
.ext-btn-primary-xs {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--ext-orange-500);
    color: var(--ext-neutral-50);
    box-shadow: 1px 2px 10px 0px rgba(11, 24, 38, 0.05);
    border: 1px solid var(--ext-orange-500);
}

:is(.dark .ext-btn-primary-lg,
    .dark .ext-btn-primary-md,
    .dark .ext-btn-primary-sm,
    .dark .ext-btn-primary-xs) {
    background-color: var(--ext-orange-500);
    color: var(--ext-neutral-900);
    border: 1px solid var(--ext-orange-500);
}

.ext-btn-primary-lg span,
.ext-btn-primary-md span,
.ext-btn-primary-sm span,
.ext-btn-primary-xs span {
    background-color: var(--ext-neutral-50);
}

:is(.dark .ext-btn-primary-lg span,
    .dark .ext-btn-primary-md span,
    .dark .ext-btn-primary-sm span,
    .dark .ext-btn-primary-xs span) {
    background-color: var(--ext-neutral-900);
}

.ext-btn-primary-lg:hover,
.ext-btn-primary-md:hover,
.ext-btn-primary-sm:hover,
.ext-btn-primary-xs:hover {
    box-shadow: 4px 6px 10px 0px rgba(11, 24, 38, 0.1), -1px 0px 10px 0px rgba(11, 24, 38, 0.1);
    border: 1px solid var(--ext-orange-400);
    background-color: var(--ext-orange-400);
}

:is(.dark .ext-btn-primary-lg:hover,
    .dark .ext-btn-primary-md:hover,
    .dark .ext-btn-primary-sm:hover,
    .dark .ext-btn-primary-xs:hover) {
    border: 1px solid var(--ext-orange-400);
    background-color: var(--ext-orange-400);
}

.ext-btn-primary-lg:disabled,
.ext-btn-primary-md:disabled,
.ext-btn-primary-sm:disabled,
.ext-btn-primary-xs:disabled {
    background-color: var(--ext-light-500);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-light-500);
    color: var(--ext-navy-100);
    cursor: auto;
}

:is(.dark .ext-btn-primary-lg:disabled,
    .dark .ext-btn-primary-md:disabled,
    .dark .ext-btn-primary-sm:disabled,
    .dark .ext-btn-primary-xs:disabled) {
    background-color: var(--ext-dark-500);
    border: 1px solid var(--ext-dark-500);
    color: var(--ext-dark-100);
}

.ext-btn-primary-lg:disabled span,
.ext-btn-primary-md:disabled span,
.ext-btn-primary-sm:disabled span,
.ext-btn-primary-xs:disabled span {
    background-color: var(--ext-navy-100);
}

:is(.dark .ext-btn-primary-lg:disabled span,
    .dark .ext-btn-primary-md:disabled span,
    .dark .ext-btn-primary-sm:disabled span,
    .dark .ext-btn-primary-xs:disabled span) {
    background-color: var(--ext-dark-100);
}

.ext-btn-primary-lg:focus,
.ext-btn-primary-md:focus,
.ext-btn-primary-sm:focus,
.ext-btn-primary-xs:focus {
    background-color: var(--ext-orange-600);
    border: 1px solid var(--ext-orange-600);
    box-shadow: 2px 4px 10px 0px rgba(11, 24, 38, 0.1) inset;
}

:is(.dark .ext-btn-primary-lg:focus,
    .dark .ext-btn-primary-md:focus,
    .dark .ext-btn-primary-sm:focus,
    .dark .ext-btn-primary-xs:focus) {
    background-color: var(--ext-orange-600);
    border: 1px solid var(--ext-orange-600);
}

/* END */

/* Secondary */

.ext-btn-secondary-lg {
    gap: 7px;
    height: 40px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-secondary-lg span {
    height: 20px;
    width: 20px;
}

.ext-btn-secondary-md {
    gap: 7px;
    height: 36px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-secondary-md span {
    height: 18px;
    width: 18px;
}

.ext-btn-secondary-sm {
    gap: 7px;
    height: 32px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-secondary-sm span {
    height: 16px;
    width: 16px;
}

.ext-btn-secondary-xs {
    gap: 7px;
    height: 28px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-secondary-xs span {
    height: 14px;
    width: 14px;
}

.ext-btn-secondary-lg,
.ext-btn-secondary-md,
.ext-btn-secondary-sm,
.ext-btn-secondary-xs {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--ext-orange-50);
    color: var(--ext-orange-500);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-orange-50);
}

:is(.dark .ext-btn-secondary-lg,
    .dark .ext-btn-secondary-md,
    .dark .ext-btn-secondary-sm,
    .dark .ext-btn-secondary-xs) {
    background-color: var(--ext-orange-900);
    color: var(--ext-orange-500);
    border: 1px solid var(--ext-orange-900);
}

.ext-btn-secondary-lg span,
.ext-btn-secondary-md span,
.ext-btn-secondary-sm span,
.ext-btn-secondary-xs span {
    background-color: var(--ext-orange-500);
}

:is(.dark .ext-btn-secondary-lg span,
    .dark .ext-btn-secondary-md span,
    .dark .ext-btn-secondary-sm span,
    .dark .ext-btn-secondary-xs span) {
    background-color: var(--ext-orange-500);
}

.ext-btn-secondary-lg:hover,
.ext-btn-secondary-md:hover,
.ext-btn-secondary-sm:hover,
.ext-btn-secondary-xs:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-orange-400);
    background-color: var(--ext-orange-50);
    color: var(--ext-orange-400);
}

:is(.dark .ext-btn-secondary-lg:hover,
    .dark .ext-btn-secondary-md:hover,
    .dark .ext-btn-secondary-sm:hover,
    .dark .ext-btn-secondary-xs:hover) {
    border: 1px solid var(--ext-orange-400);
    background-color: var(--ext-orange-900);
    color: var(--ext-orange-400);
}

.ext-btn-secondary-lg:hover span,
.ext-btn-secondary-md:hover span,
.ext-btn-secondary-sm:hover span,
.ext-btn-secondary-xs:hover span {
    background-color: var(--ext-orange-400);
}

:is(.dark .ext-btn-secondary-lg:hover span,
    .dark .ext-btn-secondary-md:hover span,
    .dark .ext-btn-secondary-sm:hover span,
    .dark .ext-btn-secondary-xs:hover span) {
    background-color: var(--ext-orange-400);
}

.ext-btn-secondary-lg:focus,
.ext-btn-secondary-md:focus,
.ext-btn-secondary-sm:focus,
.ext-btn-secondary-xs:focus {
    background-color: var(--ext-orange-100);
    border: 1px solid var(--ext-orange-100);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-orange-600);
}

:is(.dark .ext-btn-secondary-lg:focus,
    .dark .ext-btn-secondary-md:focus,
    .dark .ext-btn-secondary-sm:focus,
    .dark .ext-btn-secondary-xs:focus) {
    background-color: var(--ext-orange-800);
    border: 1px solid var(--ext-orange-800);
    color: var(--ext-orange-600);
}

.ext-btn-secondary-lg:focus span,
.ext-btn-secondary-md:focus span,
.ext-btn-secondary-sm:focus span,
.ext-btn-secondary-xs:focus span {
    background-color: var(--ext-orange-600);
}

:is(.dark .ext-btn-secondary-lg:focus span,
    .dark .ext-btn-secondary-md:focus span,
    .dark .ext-btn-secondary-sm:focus span,
    .dark .ext-btn-secondary-xs:focus span) {
    background-color: var(--ext-orange-600);
}

.ext-btn-secondary-lg:disabled,
.ext-btn-secondary-md:disabled,
.ext-btn-secondary-sm:disabled,
.ext-btn-secondary-xs:disabled {
    background-color: var(--ext-light-100);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-light-100);
    color: var(--ext-navy-100);
    cursor: auto;
}

:is(.dark .ext-btn-secondary-lg:disabled,
    .dark .ext-btn-secondary-md:disabled,
    .dark .ext-btn-secondary-sm:disabled,
    .dark .ext-btn-secondary-xs:disabled) {
    background-color: var(--ext-dark-700);
    border: 1px solid var(--ext-dark-700);
    color: var(--ext-navy-100);
}

.ext-btn-secondary-lg:disabled span,
.ext-btn-secondary-md:disabled span,
.ext-btn-secondary-sm:disabled span,
.ext-btn-secondary-xs:disabled span {
    background-color: var(--ext-navy-100);
}

:is(.dark .ext-btn-secondary-lg:disabled span,
    .dark .ext-btn-secondary-md:disabled span,
    .dark .ext-btn-secondary-sm:disabled span,
    .dark .ext-btn-secondary-xs:disabled span) {
    background-color: var(--ext-navy-100);
}

/* END */

/* Tertiary */

.ext-btn-tertiary-lg {
    gap: 7px;
    height: 40px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-tertiary-lg span {
    height: 20px;
    width: 20px;
}

.ext-btn-tertiary-md {
    gap: 7px;
    height: 36px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-tertiary-md span {
    height: 18px;
    width: 18px;
}

.ext-btn-tertiary-sm {
    gap: 7px;
    height: 32px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-tertiary-sm span {
    height: 16px;
    width: 16px;
}

.ext-btn-tertiary-xs {
    gap: 7px;
    height: 28px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-tertiary-xs span {
    height: 14px;
    width: 14px;
}

.ext-btn-tertiary-lg,
.ext-btn-tertiary-md,
.ext-btn-tertiary-sm,
.ext-btn-tertiary-xs {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: transparent;
    color: var(--ext-orange-500);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-orange-500);
}


:is(.dark .ext-btn-tertiary-lg,
    .dark .ext-btn-tertiary-md,
    .dark .ext-btn-tertiary-sm,
    .dark .ext-btn-tertiary-xs) {
    color: var(--ext-orange-500);
    border: 1px solid var(--ext-orange-500);
}

.ext-btn-tertiary-lg span,
.ext-btn-tertiary-md span,
.ext-btn-tertiary-sm span,
.ext-btn-tertiary-xs span {
    background-color: var(--ext-orange-500);
}

:is(.dark .ext-btn-tertiary-lg span,
    .dark .ext-btn-tertiary-md span,
    .dark .ext-btn-tertiary-sm span,
    .dark .ext-btn-tertiary-xs span) {
    background-color: var(--ext-orange-500);
}

.ext-btn-tertiary-lg:hover,
.ext-btn-tertiary-md:hover,
.ext-btn-tertiary-sm:hover,
.ext-btn-tertiary-xs:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-orange-400);
    color: var(--ext-orange-400);
}

:is(.dark .ext-btn-tertiary-lg:hover,
    .dark .ext-btn-tertiary-md:hover,
    .dark .ext-btn-tertiary-sm:hover,
    .dark .ext-btn-tertiary-xs:hover) {
    border: 1px solid var(--ext-orange-400);
    color: var(--ext-orange-400);
}

.ext-btn-tertiary-lg:hover span,
.ext-btn-tertiary-md:hover span,
.ext-btn-tertiary-sm:hover span,
.ext-btn-tertiary-xs:hover span {
    background-color: var(--ext-orange-400);
}

:is(.dark .ext-btn-tertiary-lg:hover span,
    .dark .ext-btn-tertiary-md:hover span,
    .dark .ext-btn-tertiary-sm:hover span,
    .dark .ext-btn-tertiary-xs:hover span) {
    background-color: var(--ext-orange-400);
}

.ext-btn-tertiary-lg:focus,
.ext-btn-tertiary-md:focus,
.ext-btn-tertiary-sm:focus,
.ext-btn-tertiary-xs:focus {
    border: 1px solid var(--ext-orange-600);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-orange-600);
}

:is(.dark .ext-btn-tertiary-lg:focus,
    .dark .ext-btn-tertiary-md:focus,
    .dark .ext-btn-tertiary-sm:focus,
    .dark .ext-btn-tertiary-xs:focus) {
    border: 1px solid var(--ext-orange-600);
    color: var(--ext-orange-600);
}

.ext-btn-tertiary-lg:focus span,
.ext-btn-tertiary-md:focus span,
.ext-btn-tertiary-sm:focus span,
.ext-btn-tertiary-xs:focus span {
    background-color: var(--ext-orange-600);
}

:is(.dark .ext-btn-tertiary-lg:focus span,
    .dark .ext-btn-tertiary-md:focus span,
    .dark .ext-btn-tertiary-sm:focus span,
    .dark .ext-btn-tertiary-xs:focus span) {
    background-color: var(--ext-orange-600);
}

.ext-btn-tertiary-lg:disabled,
.ext-btn-tertiary-md:disabled,
.ext-btn-tertiary-sm:disabled,
.ext-btn-tertiary-xs:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid var(--ext-light-500);
    color: var(--ext-navy-100);
    cursor: auto;
}

:is(.dark .ext-btn-tertiary-lg:disabled,
    .dark .ext-btn-tertiary-md:disabled,
    .dark .ext-btn-tertiary-sm:disabled,
    .dark .ext-btn-tertiary-xs:disabled) {
    border: 1px solid var(--ext-dark-500);
    color: var(--ext-dark-100);
}

.ext-btn-tertiary-lg:disabled span,
.ext-btn-tertiary-md:disabled span,
.ext-btn-tertiary-sm:disabled span,
.ext-btn-tertiary-xs:disabled span {
    background-color: var(--ext-navy-100);
}

:is(.dark .ext-btn-tertiary-lg:disabled span,
    .dark .ext-btn-tertiary-md:disabled span,
    .dark .ext-btn-tertiary-sm:disabled span,
    .dark .ext-btn-tertiary-xs:disabled span) {
    background-color: var(--ext-dark-100);
}

/* END */

/* Ghost */

.ext-btn-ghost-lg {
    gap: 7px;
    height: 40px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-ghost-lg span {
    height: 20px;
    width: 20px;
}

.ext-btn-ghost-md {
    gap: 7px;
    height: 36px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-ghost-md span {
    height: 18px;
    width: 18px;
}

.ext-btn-ghost-sm {
    gap: 7px;
    height: 32px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-ghost-sm span {
    height: 16px;
    width: 16px;
}

.ext-btn-ghost-xs {
    gap: 7px;
    height: 28px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-ghost-xs span {
    height: 14px;
    width: 14px;
}

.ext-btn-ghost-lg,
.ext-btn-ghost-md,
.ext-btn-ghost-sm,
.ext-btn-ghost-xs {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: transparent;
    color: var(--ext-orange-500);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid transparent;
}

:is(.dark .ext-btn-ghost-lg,
    .dark .ext-btn-ghost-md,
    .dark .ext-btn-ghost-sm,
    .dark .ext-btn-ghost-xs) {
    color: var(--ext-orange-500);
}

.ext-btn-ghost-lg span,
.ext-btn-ghost-md span,
.ext-btn-ghost-sm span,
.ext-btn-ghost-xs span {
    background-color: var(--ext-orange-500);
}

:is(.dark .ext-btn-ghost-lg span,
    .dark .ext-btn-ghost-md span,
    .dark .ext-btn-ghost-sm span,
    .dark .ext-btn-ghost-xs span) {
    background-color: var(--ext-orange-500);
}

.ext-btn-ghost-lg:hover,
.ext-btn-ghost-md:hover,
.ext-btn-ghost-sm:hover,
.ext-btn-ghost-xs:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-orange-400);
}

:is(.dark .ext-btn-ghost-lg:hover,
    .dark .ext-btn-ghost-md:hover,
    .dark .ext-btn-ghost-sm:hover,
    .dark .ext-btn-ghost-xs:hover) {
    color: var(--ext-orange-400);
}

.ext-btn-ghost-lg:hover span,
.ext-btn-ghost-md:hover span,
.ext-btn-ghost-sm:hover span,
.ext-btn-ghost-xs:hover span {
    background-color: var(--ext-orange-400);
}

:is(.dark .ext-btn-ghost-lg:hover span,
    .dark .ext-btn-ghost-md:hover span,
    .dark .ext-btn-ghost-sm:hover span,
    .dark .ext-btn-ghost-xs:hover span) {
    background-color: var(--ext-orange-400);
}

.ext-btn-ghost-lg:focus,
.ext-btn-ghost-md:focus,
.ext-btn-ghost-sm:focus,
.ext-btn-ghost-xs:focus {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-orange-600);
}

:is(.dark .ext-btn-ghost-lg:focus,
    .dark .ext-btn-ghost-md:focus,
    .dark .ext-btn-ghost-sm:focus,
    .dark .ext-btn-ghost-xs:focus) {
    color: var(--ext-orange-600);
}

.ext-btn-ghost-lg:focus span,
.ext-btn-ghost-md:focus span,
.ext-btn-ghost-sm:focus span,
.ext-btn-ghost-xs:focus span {
    background-color: var(--ext-orange-600);
}

:is(.dark .ext-btn-ghost-lg:focus span,
    .dark .ext-btn-ghost-md:focus span,
    .dark .ext-btn-ghost-sm:focus span,
    .dark .ext-btn-ghost-xs:focus span) {
    background-color: var(--ext-orange-600);
}

.ext-btn-ghost-lg:disabled,
.ext-btn-ghost-md:disabled,
.ext-btn-ghost-sm:disabled,
.ext-btn-ghost-xs:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-navy-100);
    cursor: auto;
}

:is(.dark .ext-btn-ghost-lg:disabled,
    .dark .ext-btn-ghost-md:disabled,
    .dark .ext-btn-ghost-sm:disabled,
    .dark .ext-btn-ghost-xs:disabled) {
    color: var(--ext-dark-100);
}

.ext-btn-ghost-lg:disabled span,
.ext-btn-ghost-md:disabled span,
.ext-btn-ghost-sm:disabled span,
.ext-btn-ghost-xs:disabled span {
    background-color: var(--ext-navy-100);
}

:is(.dark .ext-btn-ghost-lg:disabled span,
    .dark .ext-btn-ghost-md:disabled span,
    .dark .ext-btn-ghost-sm:disabled span,
    .dark .ext-btn-ghost-xs:disabled span) {
    background-color: var(--ext-dark-100);
}

/* END */

/* Link */

.ext-btn-link-lg {
    gap: 7px;
    height: 40px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-link-lg span {
    height: 20px;
    width: 20px;
}

.ext-btn-link-md {
    gap: 7px;
    height: 36px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-link-md span {
    height: 18px;
    width: 18px;
}

.ext-btn-link-sm {
    gap: 7px;
    height: 32px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-link-sm span {
    height: 16px;
    width: 16px;
}

.ext-btn-link-xs {
    gap: 7px;
    height: 28px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-link-xs span {
    height: 14px;
    width: 14px;
}

.ext-btn-link-lg,
.ext-btn-link-md,
.ext-btn-link-sm,
.ext-btn-link-xs {
    display: flex;
    padding: 8px 0px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: transparent;
    color: var(--ext-orange-500);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid transparent;
}

:is(.dark .ext-btn-link-lg,
    .dark .ext-btn-link-md,
    .dark .ext-btn-link-sm,
    .dark .ext-btn-link-xs) {
    color: var(--ext-orange-500);
}

.ext-btn-link-lg span,
.ext-btn-link-md span,
.ext-btn-link-sm span,
.ext-btn-link-xs span {
    background-color: var(--ext-orange-500);
}

:is(.dark .ext-btn-link-lg span,
    .dark .ext-btn-link-md span,
    .dark .ext-btn-link-sm span,
    .dark .ext-btn-link-xs span) {
    background-color: var(--ext-orange-500);
}

.ext-btn-link-lg:hover,
.ext-btn-link-md:hover,
.ext-btn-link-sm:hover,
.ext-btn-link-xs:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-orange-400);
    text-decoration: underline;
}

:is(.dark .ext-btn-link-lg:hover,
    .dark .ext-btn-link-md:hover,
    .dark .ext-btn-link-sm:hover,
    .dark .ext-btn-link-xs:hover) {
    color: var(--ext-orange-400);
}

.ext-btn-link-lg:hover span,
.ext-btn-link-md:hover span,
.ext-btn-link-sm:hover span,
.ext-btn-link-xs:hover span {
    background-color: var(--ext-orange-400);
}

:is(.dark .ext-btn-link-lg:hover span,
    .dark .ext-btn-link-md:hover span,
    .dark .ext-btn-link-sm:hover span,
    .dark .ext-btn-link-xs:hover span) {
    background-color: var(--ext-orange-400);
}

.ext-btn-link-lg:focus,
.ext-btn-link-md:focus,
.ext-btn-link-sm:focus,
.ext-btn-link-xs:focus {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-orange-600);
    text-decoration: underline;
}

:is(.dark .ext-btn-link-lg:focus,
    .dark .ext-btn-link-md:focus,
    .dark .ext-btn-link-sm:focus,
    .dark .ext-btn-link-xs:focus) {
    color: var(--ext-orange-600);
}

.ext-btn-link-lg:focus span,
.ext-btn-link-md:focus span,
.ext-btn-link-sm:focus span,
.ext-btn-link-xs:focus span {
    background-color: var(--ext-orange-600);
}

:is(.dark .ext-btn-link-lg:focus span,
    .dark .ext-btn-link-md:focus span,
    .dark .ext-btn-link-sm:focus span,
    .dark .ext-btn-link-xs:focus span) {
    background-color: var(--ext-orange-600);
}

.ext-btn-link-lg:disabled,
.ext-btn-link-md:disabled,
.ext-btn-link-sm:disabled,
.ext-btn-link-xs:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: var(--ext-navy-100);
    cursor: auto;
    text-decoration: none;
}

:is(.dark .ext-btn-link-lg:disabled,
    .dark .ext-btn-link-md:disabled,
    .dark .ext-btn-link-sm:disabled,
    .dark .ext-btn-link-xs:disabled) {
    color: var(--ext-dark-100);
}

.ext-btn-link-lg:disabled span,
.ext-btn-link-md:disabled span,
.ext-btn-link-sm:disabled span,
.ext-btn-link-xs:disabled span {
    background-color: var(--ext-navy-100);
}

:is(.dark .ext-btn-link-lg:disabled span,
    .dark .ext-btn-link-md:disabled span,
    .dark .ext-btn-link-sm:disabled span,
    .dark .ext-btn-link-xs:disabled span) {
    background-color: var(--ext-dark-100);
}

/* END */

/* Custom */

.ext-btn-custom-lg {
    gap: 7px;
    height: 40px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-custom-lg span {
    height: 20px;
    width: 20px;
}

.ext-btn-custom-md {
    gap: 7px;
    height: 36px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-custom-md span {
    height: 18px;
    width: 18px;
}

.ext-btn-custom-sm {
    gap: 7px;
    height: 32px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-custom-sm span {
    height: 16px;
    width: 16px;
}

.ext-btn-custom-xs {
    gap: 7px;
    height: 28px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.ext-btn-custom-xs span {
    height: 14px;
    width: 14px;
}

.ext-btn-custom-lg,
.ext-btn-custom-md,
.ext-btn-custom-sm,
.ext-btn-custom-xs {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--ext-orange-500);
    color: var(--ext-neutral-50);
    box-shadow: 1px 2px 10px 0px rgba(11, 24, 38, 0.05);
    border: 1px solid transparent;
}

:is(.dark .ext-btn-custom-lg,
    .dark .ext-btn-custom-md,
    .dark .ext-btn-custom-sm,
    .dark .ext-btn-custom-xs) {
    background-color: var(--ext-orange-500);
    color: var(--ext-neutral-900);
}

.ext-btn-custom-lg span,
.ext-btn-custom-md span,
.ext-btn-custom-sm span,
.ext-btn-custom-xs span {
    background-color: var(--ext-neutral-50);
}

:is(.dark .ext-btn-custom-lg span,
    .dark .ext-btn-custom-md span,
    .dark .ext-btn-custom-sm span,
    .dark .ext-btn-custom-xs span) {
    background-color: var(--ext-neutral-900);
}

.ext-btn-custom-lg:hover,
.ext-btn-custom-md:hover,
.ext-btn-custom-sm:hover,
.ext-btn-custom-xs:hover {
    box-shadow: 4px 6px 10px 0px rgba(11, 24, 38, 0.1), -1px 0px 10px 0px rgba(11, 24, 38, 0.1);
    border: 1px solid transparent;
    opacity: 0.9;
}

.ext-btn-custom-lg:disabled,
.ext-btn-custom-md:disabled,
.ext-btn-custom-sm:disabled,
.ext-btn-custom-xs:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    cursor: auto;
    opacity: 0.5;
    border: 1px solid transparent;
}

.ext-btn-custom-lg:focus,
.ext-btn-custom-md:focus,
.ext-btn-custom-sm:focus,
.ext-btn-custom-xs:focus {
    box-shadow: 2px 4px 10px 0px rgba(11, 24, 38, 0.1) inset;
    filter: brightness(75%);
    border: 1px solid transparent;
}

/* END */

/* ### Labels || */

/* Square */

.ext-label-square-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 24px;
}

.ext-label-square-lg span {
    background-color: var(--ext-navy-500, #08294C);
    height: 14px;
    width: 14px;
}

.ext-label-square-lg:disabled {
    opacity: 0.5;
}

.ext-label-square-lg:focus {
    filter: brightness(75%);
}

.ext-label-square-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 20px;
}

.ext-label-square-md span {
    background-color: var(--ext-navy-500, #08294C);
    height: 12px;
    width: 12px;
}

.ext-label-square-md:disabled {
    opacity: 0.5;
}

.ext-label-square-md:focus {
    filter: brightness(75%);
}

.ext-label-square-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 16px;
}

.ext-label-square-sm span {
    background-color: var(--ext-navy-500, #08294C);
    height: 10px;
    width: 10px;
}

.ext-label-square-sm:disabled {
    opacity: 0.5;
}

.ext-label-square-sm:focus {
    filter: brightness(75%);
}

/* END */

/* Rounded */

.ext-label-rounded-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 24px;
}

.ext-label-rounded-lg span {
    background-color: var(--ext-navy-500, #08294C);
    height: 14px;
    width: 14px;
}

.ext-label-rounded-lg:disabled {
    opacity: 0.5;
}

.ext-label-rounded-lg:focus {
    filter: brightness(75%);
}

.ext-label-rounded-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 20px;
}

.ext-label-rounded-md span {
    background-color: var(--ext-navy-500, #08294C);
    height: 12px;
    width: 12px;
}

.ext-label-rounded-md:disabled {
    opacity: 0.5;
}

.ext-label-rounded-md:focus {
    filter: brightness(75%);
}

.ext-label-rounded-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 16px;
}

.ext-label-rounded-sm span {
    background-color: var(--ext-navy-500, #08294C);
    height: 10px;
    width: 10px;
}

.ext-label-rounded-sm:disabled {
    opacity: 0.5;
}

.ext-label-rounded-sm:focus {
    filter: brightness(75%);
}

/* END */


/* ### Avatar || */

/* Image Default */

.ext-avt-image-lg {
    display: block;
    width: 32px;
    height: 32px;
}

.ext-avt-image-lg img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 16px;
}

.ext-avt-image-md {
    display: block;
    width: 24px;
    height: 24px;
}

.ext-avt-image-md img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 12px;
}

.ext-avt-image-sm {
    display: block;
    width: 16px;
    height: 16px;
}

.ext-avt-image-sm img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: 8px;
}

/* END */

/* Image Border */

.ext-avt-image-border-lg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border: var(--ext-orange-500, #F77B04) 1px solid;
    border-radius: 20px;
}

.ext-avt-image-border-lg img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 16px;
}

.ext-avt-image-border-md {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: var(--ext-orange-500, #F77B04) 1px solid;
    border-radius: 15px;
}

.ext-avt-image-border-md img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 12px;
}

.ext-avt-image-border-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border: var(--ext-orange-500, #F77B04) 1px solid;
    border-radius: 11px;
}

.ext-avt-image-border-sm img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: 8px;
}

/* END */

/* Image Badge */

.ext-avt-image-badge-lg {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    justify-content: end;
    align-items: end;
}

.ext-avt-image-badge-lg img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 16px;
}

.ext-avt-image-badge-lg span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--ext-green-500, #1BDEAF);
}

.ext-avt-image-badge-md {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    justify-content: end;
    align-items: end;
}

.ext-avt-image-badge-md img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 12px;
}

.ext-avt-image-badge-md span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--ext-green-500, #1BDEAF);
}

.ext-avt-image-badge-sm {
    display: flex;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    justify-content: end;
    align-items: end;
}

.ext-avt-image-badge-sm img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: 8px;
}

.ext-avt-image-badge-sm span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--ext-green-500, #1BDEAF);
}

/* END */

/* Image Icons */

.ext-avt-image-icons-lg {
    display: flex;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-image-icons-lg img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 16px;
}

.ext-avt-image-icons-lg .badge {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    right: 0;
    border-radius: 8px;
    background: var(--ext-orange-100, #FDE5CD);
}

.ext-avt-image-icons-lg .badge span {
    width: 10px;
    height: 10px;
    margin: auto;
    margin-top: 3px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-avt-image-icons-md {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-image-icons-md img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 12px;
}

.ext-avt-image-icons-md .badge {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 0;
    right: 0;
    border-radius: 6px;
    background: var(--ext-orange-100, #FDE5CD);
}

.ext-avt-image-icons-md .badge span {
    width: 8px;
    height: 8px;
    margin: auto;
    margin-top: 2px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-avt-image-icons-sm {
    display: flex;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-image-icons-sm img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: 8px;
}

.ext-avt-image-icons-sm .badge {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    border-radius: 5px;
    background: var(--ext-orange-100, #FDE5CD);
}

.ext-avt-image-icons-sm .badge span {
    width: 5px;
    height: 5px;
    margin: auto;
    margin-top: 2px;
    background: var(--ext-orange-500, #F77B04);
}

/* END */

/* Text Default */

.ext-avt-text-lg {
    width: 32px;
    height: 32px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border-radius: 16px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-md {
    width: 24px;
    height: 24px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border-radius: 12px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-sm {
    width: 16px;
    height: 16px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    border-radius: 8px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* END */

/* Text Border */

.ext-avt-text-border-lg {
    border: var(--ext-orange-500, #F77B04) 1px solid;
    width: 32px;
    height: 32px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border-radius: 16px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-border-md {
    border: var(--ext-orange-500, #F77B04) 1px solid;
    width: 24px;
    height: 24px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border-radius: 12px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-border-sm {
    border: var(--ext-orange-500, #F77B04) 1px solid;
    width: 16px;
    height: 16px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    border-radius: 8px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* END */

/* Text Badge */

.ext-avt-text-badge-lg {
    width: 32px;
    height: 32px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border-radius: 16px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-text-badge-lg .badge {
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: 0;
    right: 0;
    border-radius: 4px;
    background: var(--ext-green-500, #1BDEAF);
}

.ext-avt-text-badge-md {
    width: 24px;
    height: 24px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border-radius: 12px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-text-badge-md .badge {
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: 0;
    right: 0;
    border-radius: 3px;
    background: var(--ext-green-500, #1BDEAF);
}

.ext-avt-text-badge-sm {
    width: 16px;
    height: 16px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    border-radius: 8px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-text-badge-sm .badge {
    position: absolute;
    width: 4px;
    height: 4px;
    bottom: 0;
    right: 0;
    border-radius: 2px;
    background: var(--ext-green-500, #1BDEAF);
}

/* END */

/* Text Icon */

.ext-avt-text-icons-lg {
    display: flex;
    width: 38px;
    height: 38px;
    border-radius: 18px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-text-icons-lg .title {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-icons-lg .badge {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    right: 0;
    border-radius: 8px;
    background: var(--ext-orange-100, #FDE5CD);
}

.ext-avt-text-icons-lg .badge span {
    width: 10px;
    height: 10px;
    margin: auto;
    margin-top: 3px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-avt-text-icons-md {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-text-icons-md .title {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-icons-md .badge {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 0;
    right: 0;
    border-radius: 6px;
    background: var(--ext-orange-100, #FDE5CD);
}

.ext-avt-text-icons-md .badge span {
    width: 8px;
    height: 8px;
    margin: auto;
    margin-top: 2px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-avt-text-icons-sm {
    display: flex;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-text-icons-sm .title {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
    font-family: "Work Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-text-icons-sm .badge {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    border-radius: 5px;
    background: var(--ext-orange-100, #FDE5CD);
}

.ext-avt-text-icons-sm .badge span {
    width: 5px;
    height: 5px;
    margin: auto;
    margin-top: 2px;
    background: var(--ext-orange-500, #F77B04);
}

/* END */

/* Icon Default */

.ext-avt-icon-lg {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-icon-lg .icon {
    width: 22px;
    height: 22px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-md {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-icon-md .icon {
    width: 14px;
    height: 14px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-sm {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ext-avt-icon-sm .icon {
    width: 8px;
    height: 8px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

/* END */

/* Icon Border */

.ext-avt-icon-border-lg {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--ext-orange-500, #F77B04) 1px solid;
}

.ext-avt-icon-border-lg .icon {
    width: 22px;
    height: 22px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-border-md {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--ext-orange-500, #F77B04) 1px solid;
}

.ext-avt-icon-border-md .icon {
    width: 14px;
    height: 14px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-border-sm {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--ext-orange-500, #F77B04) 1px solid;
}

.ext-avt-icon-border-sm .icon {
    width: 8px;
    height: 8px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

/* END */

/* Icon Badge */

.ext-avt-icon-badge-lg {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-icon-badge-lg .icon {
    width: 22px;
    height: 22px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-badge-lg .badge {
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: 0;
    right: 0;
    border-radius: 4px;
    background: var(--ext-green-500, #1BDEAF);
}

.ext-avt-icon-badge-md {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-icon-badge-md .icon {
    width: 14px;
    height: 14px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-badge-md .badge {
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: 0;
    right: 0;
    border-radius: 3px;
    background: var(--ext-green-500, #1BDEAF);
}

.ext-avt-icon-badge-sm {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--ext-neutral-300, #EEF2F5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ext-avt-icon-badge-sm .icon {
    width: 8px;
    height: 8px;
    background-color: var(--ext-navy-200, #9CA9B7);
    text-align: center;
}

.ext-avt-icon-badge-sm .badge {
    position: absolute;
    width: 4px;
    height: 4px;
    bottom: 0;
    right: 0;
    border-radius: 2px;
    background: var(--ext-green-500, #1BDEAF);
}

/* END */

/* ### Chips || */

/* Square & Rounded Filled */

.ext-chips-square-filled-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    cursor: pointer;
}

.ext-chips-square-filled-lg .ext-chip-icon {
    height: 20px;
    width: 20px;
}

.ext-chips-square-filled-lg img {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    object-fit: cover;
}

.ext-chips-square-filled-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    cursor: pointer;
}

.ext-chips-square-filled-md .ext-chip-icon {
    height: 16px;
    width: 16px;
}

.ext-chips-square-filled-md img {
    height: 16px;
    width: 16px;
    border-radius: 8px;
    object-fit: cover;
}

.ext-chips-square-filled-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    height: 16px;
    cursor: pointer;
}

.ext-chips-square-filled-sm .ext-chip-icon {
    height: 12px;
    width: 12px;
}

.ext-chips-square-filled-sm img {
    height: 12px;
    width: 12px;
    border-radius: 6px;
    object-fit: cover;
}

.ext-chips-rounded-filled-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    cursor: pointer;
}

.ext-chips-rounded-filled-lg .ext-chip-icon {
    height: 20px;
    width: 20px;
}

.ext-chips-rounded-filled-lg img {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    object-fit: cover;
}

.ext-chips-rounded-filled-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    cursor: pointer;
}

.ext-chips-rounded-filled-md .ext-chip-icon {
    height: 16px;
    width: 16px;
}

.ext-chips-rounded-filled-md img {
    height: 16px;
    width: 16px;
    border-radius: 8px;
    object-fit: cover;
}

.ext-chips-rounded-filled-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    height: 16px;
    cursor: pointer;
}

.ext-chips-rounded-filled-sm .ext-chip-icon {
    height: 12px;
    width: 12px;
}

.ext-chips-rounded-filled-sm img {
    height: 12px;
    width: 12px;
    border-radius: 6px;
    object-fit: cover;
}

.ext-chips-square-filled-lg,
.ext-chips-square-filled-md,
.ext-chips-square-filled-sm,
.ext-chips-rounded-filled-lg,
.ext-chips-rounded-filled-md,
.ext-chips-rounded-filled-sm {
    background-color: var(--ext-light-100, #FEF5EC);
    color: var(--ext-neutral-900, #4D2601);
    border: 1px solid var(--ext-light-100, #FEF5EC);
}

:is(.dark .ext-chips-square-filled-lg,
    .dark .ext-chips-square-filled-md,
    .dark .ext-chips-square-filled-sm,
    .dark .ext-chips-rounded-filled-lg,
    .dark .ext-chips-rounded-filled-md,
    .dark .ext-chips-rounded-filled-sm) {
    background-color: var(--ext-dark-700);
    color: var(--ext-neutral-100);
    border: 1px solid var(--ext-dark-700);
}

.ext-chips-square-filled-lg .ext-chip-icon-left,
.ext-chips-square-filled-md .ext-chip-icon-left,
.ext-chips-square-filled-sm .ext-chip-icon-left,
.ext-chips-rounded-filled-lg .ext-chip-icon-left,
.ext-chips-rounded-filled-md .ext-chip-icon-left,
.ext-chips-rounded-filled-sm .ext-chip-icon-left {
    background-color: var(--ext-neutral-900, #F99537);
}

:is(.dark .ext-chips-square-filled-lg .ext-chip-icon-left,
    .dark .ext-chips-square-filled-md .ext-chip-icon-left,
    .dark .ext-chips-square-filled-sm .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-lg .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-md .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-sm .ext-chip-icon-left) {
    background-color: var(--ext-neutral-100, #F99537);
}

.ext-chips-square-filled-lg:disabled,
.ext-chips-square-filled-md:disabled,
.ext-chips-square-filled-sm:disabled,
.ext-chips-rounded-filled-lg:disabled,
.ext-chips-rounded-filled-md:disabled,
.ext-chips-rounded-filled-sm:disabled {
    color: var(--ext-navy-100, #B2BDC8) !important;
    background-color: var(--ext-light-100, #F5F7FA) !important;
    border: 1px solid var(--ext-light-100, #F5F7FA) !important;
    cursor: default;
}

:is(.dark .ext-chips-square-filled-lg:disabled,
    .dark .ext-chips-square-filled-md:disabled,
    .dark .ext-chips-square-filled-sm:disabled,
    .dark .ext-chips-rounded-filled-lg:disabled,
    .dark .ext-chips-rounded-filled-md:disabled,
    .dark .ext-chips-rounded-filled-sm:disabled) {
    color: var(--ext-dark-100) !important;
    background-color: var(--ext-dark-700) !important;
    border: 1px solid var(--ext-dark-700) !important;
}

.ext-chips-square-filled-lg:disabled img,
.ext-chips-square-filled-md:disabled img,
.ext-chips-square-filled-sm:disabled img,
.ext-chips-rounded-filled-lg:disabled img,
.ext-chips-rounded-filled-md:disabled img,
.ext-chips-rounded-filled-sm:disabled img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.ext-chips-square-filled-lg:disabled .ext-chip-icon-left,
.ext-chips-square-filled-md:disabled .ext-chip-icon-left,
.ext-chips-square-filled-sm:disabled .ext-chip-icon-left,
.ext-chips-rounded-filled-lg:disabled .ext-chip-icon-left,
.ext-chips-rounded-filled-md:disabled .ext-chip-icon-left,
.ext-chips-rounded-filled-sm:disabled .ext-chip-icon-left {
    background-color: var(--ext-navy-100, #B2BDC8) !important;
}

:is(.dark .ext-chips-square-filled-lg:disabled .ext-chip-icon-left,
    .dark .ext-chips-square-filled-md:disabled .ext-chip-icon-left,
    .dark .ext-chips-square-filled-sm:disabled .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-lg:disabled .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-md:disabled .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-sm:disabled .ext-chip-icon-left) {
    background-color: var(--ext-dark-100, #B2BDC8) !important;
}

.ext-chips-square-filled-lg:hover,
.ext-chips-square-filled-md:hover,
.ext-chips-square-filled-sm:hover,
.ext-chips-rounded-filled-lg:hover,
.ext-chips-rounded-filled-md:hover,
.ext-chips-rounded-filled-sm:hover,
.ext-chips-square-filled-lg.ext-chips-active:hover,
.ext-chips-square-filled-md.ext-chips-active:hover,
.ext-chips-square-filled-sm.ext-chips-active:hover,
.ext-chips-rounded-filled-lg.ext-chips-active:hover,
.ext-chips-rounded-filled-md.ext-chips-active:hover,
.ext-chips-rounded-filled-sm.ext-chips-active:hover {
    background-color: var(--ext-orange-100, #FDE3CA);
    border: 1px solid var(--ext-orange-100, #FDE3CA);
    color: var(--ext-orange-900, #4D2601);
}

:is(.dark .ext-chips-square-filled-lg:hover,
    .dark .ext-chips-square-filled-md:hover,
    .dark .ext-chips-square-filled-sm:hover,
    .dark .ext-chips-rounded-filled-lg:hover,
    .dark .ext-chips-rounded-filled-md:hover,
    .dark .ext-chips-rounded-filled-sm:hover,
    .dark .ext-chips-square-filled-lg.ext-chips-active:hover,
    .dark .ext-chips-square-filled-md.ext-chips-active:hover,
    .dark .ext-chips-square-filled-sm.ext-chips-active:hover,
    .dark .ext-chips-rounded-filled-lg.ext-chips-active:hover,
    .dark .ext-chips-rounded-filled-md.ext-chips-active:hover,
    .dark .ext-chips-rounded-filled-sm.ext-chips-active:hover) {
    background-color: var(--ext-orange-800);
    border: 1px solid var(--ext-orange-800);
    color: var(--ext-orange-100);
}

.ext-chips-square-filled-lg:hover .ext-chip-icon-left,
.ext-chips-square-filled-md:hover .ext-chip-icon-left,
.ext-chips-square-filled-sm:hover .ext-chip-icon-left,
.ext-chips-rounded-filled-lg:hover .ext-chip-icon-left,
.ext-chips-rounded-filled-md:hover .ext-chip-icon-left,
.ext-chips-rounded-filled-sm:hover .ext-chip-icon-left,
.ext-chips-square-filled-lg.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-square-filled-md.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-square-filled-sm.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-rounded-filled-lg.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-rounded-filled-md.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-rounded-filled-sm.ext-chips-active:hover .ext-chip-icon-left {
    background-color: var(--ext-orange-900, #F77B04);
}

:is(.dark .ext-chips-square-filled-lg:hover .ext-chip-icon-left,
    .dark .ext-chips-square-filled-md:hover .ext-chip-icon-left,
    .dark .ext-chips-square-filled-sm:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-lg:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-md:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-sm:hover .ext-chip-icon-left,
    .dark .ext-chips-square-filled-lg.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-square-filled-md.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-square-filled-sm.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-lg.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-md.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-sm.ext-chips-active:hover .ext-chip-icon-left) {
    background-color: var(--ext-orange-100);
}

.ext-chips-square-filled-lg:focus,
.ext-chips-square-filled-md:focus,
.ext-chips-square-filled-sm:focus,
.ext-chips-rounded-filled-lg:focus,
.ext-chips-rounded-filled-md:focus,
.ext-chips-rounded-filled-sm:focus,
.ext-chips-square-filled-lg.ext-chips-active,
.ext-chips-square-filled-md.ext-chips-active,
.ext-chips-square-filled-sm.ext-chips-active,
.ext-chips-rounded-filled-lg.ext-chips-active,
.ext-chips-rounded-filled-md.ext-chips-active,
.ext-chips-rounded-filled-sm.ext-chips-active {
    background-color: var(--ext-orange-50, #FCCA9B);
    border: 1px solid var(--ext-orange-50, #FCCA9B);
    color: var(--ext-orange-900, #4D2601);
}

:is(.dark .ext-chips-square-filled-lg:focus,
    .dark .ext-chips-square-filled-md:focus,
    .dark .ext-chips-square-filled-sm:focus,
    .dark .ext-chips-rounded-filled-lg:focus,
    .dark .ext-chips-rounded-filled-md:focus,
    .dark .ext-chips-rounded-filled-sm:focus,
    .dark .ext-chips-square-filled-lg.ext-chips-active,
    .dark .ext-chips-square-filled-md.ext-chips-active,
    .dark .ext-chips-square-filled-sm.ext-chips-active,
    .dark .ext-chips-rounded-filled-lg.ext-chips-active,
    .dark .ext-chips-rounded-filled-md.ext-chips-active,
    .dark .ext-chips-rounded-filled-sm.ext-chips-active) {
    background-color: var(--ext-dark-500);
    border: 1px solid var(--ext-dark-500);
    color: var(--ext-orange-100);
}

.ext-chips-square-filled-lg:focus .ext-chip-icon-left,
.ext-chips-square-filled-md:focus .ext-chip-icon-left,
.ext-chips-square-filled-sm:focus .ext-chip-icon-left,
.ext-chips-rounded-filled-lg:focus .ext-chip-icon-left,
.ext-chips-rounded-filled-md:focus .ext-chip-icon-left,
.ext-chips-rounded-filled-sm:focus .ext-chip-icon-left,
.ext-chips-square-filled-lg.ext-chips-active .ext-chip-icon-left,
.ext-chips-square-filled-md.ext-chips-active .ext-chip-icon-left,
.ext-chips-square-filled-sm.ext-chips-active .ext-chip-icon-left,
.ext-chips-rounded-filled-lg.ext-chips-active .ext-chip-icon-left,
.ext-chips-rounded-filled-md.ext-chips-active .ext-chip-icon-left,
.ext-chips-rounded-filled-sm.ext-chips-active .ext-chip-icon-left {
    background-color: var(--ext-orange-900, #F77B04);
}

:is(.dark .ext-chips-square-filled-lg:focus .ext-chip-icon-left,
    .dark .ext-chips-square-filled-md:focus .ext-chip-icon-left,
    .dark .ext-chips-square-filled-sm:focus .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-lg:focus .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-md:focus .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-sm:focus .ext-chip-icon-left,
    .dark .ext-chips-square-filled-lg.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-square-filled-md.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-square-filled-sm.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-lg.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-md.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-rounded-filled-sm.ext-chips-active .ext-chip-icon-left) {
    background-color: var(--ext-orange-100);
}

/* END */

/* Square & Rounded Outline */

.ext-chips-square-outline-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    cursor: pointer;
}

.ext-chips-square-outline-lg .ext-chip-icon {
    height: 20px;
    width: 20px;
}

.ext-chips-square-outline-lg img {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    object-fit: cover;
}

.ext-chips-square-outline-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    cursor: pointer;
}

.ext-chips-square-outline-md .ext-chip-icon {
    height: 16px;
    width: 16px;
}

.ext-chips-square-outline-md img {
    height: 16px;
    width: 16px;
    border-radius: 8px;
    object-fit: cover;
}

.ext-chips-square-outline-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    height: 16px;
    cursor: pointer;
}

.ext-chips-square-outline-sm .ext-chip-icon {
    height: 12px;
    width: 12px;
}

.ext-chips-square-outline-sm img {
    height: 12px;
    width: 12px;
    border-radius: 6px;
    object-fit: cover;
}

.ext-chips-rounded-outline-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    cursor: pointer;
}

.ext-chips-rounded-outline-lg .ext-chip-icon {
    height: 20px;
    width: 20px;
}

.ext-chips-rounded-outline-lg img {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    object-fit: cover;
}

.ext-chips-rounded-outline-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    cursor: pointer;
}

.ext-chips-rounded-outline-md .ext-chip-icon {
    height: 16px;
    width: 16px;
}

.ext-chips-rounded-outline-md img {
    height: 16px;
    width: 16px;
    border-radius: 8px;
    object-fit: cover;
}

.ext-chips-rounded-outline-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 0px 4px;
    gap: 5px;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    height: 16px;
    cursor: pointer;
}

.ext-chips-rounded-outline-sm .ext-chip-icon {
    height: 12px;
    width: 12px;
}

.ext-chips-rounded-outline-sm img {
    height: 12px;
    width: 12px;
    border-radius: 6px;
    object-fit: cover;
}

.ext-chips-square-outline-lg,
.ext-chips-square-outline-md,
.ext-chips-square-outline-sm,
.ext-chips-rounded-outline-lg,
.ext-chips-rounded-outline-md,
.ext-chips-rounded-outline-sm {
    background-color: transparent;
    color: var(--ext-neutral-900, #4D2601);
    border: 1px solid var(--ext-light-700, #F77B04);
}

:is(.dark .ext-chips-square-outline-lg,
    .dark .ext-chips-square-outline-md,
    .dark .ext-chips-square-outline-sm,
    .dark .ext-chips-rounded-outline-lg,
    .dark .ext-chips-rounded-outline-md,
    .dark .ext-chips-rounded-outline-sm) {
    color: var(--ext-neutral-100);
    border: 1px solid var(--ext-dark-300);
}

.ext-chips-square-outline-lg .ext-chip-icon-left,
.ext-chips-square-outline-md .ext-chip-icon-left,
.ext-chips-square-outline-sm .ext-chip-icon-left,
.ext-chips-rounded-outline-lg .ext-chip-icon-left,
.ext-chips-rounded-outline-md .ext-chip-icon-left,
.ext-chips-rounded-outline-sm .ext-chip-icon-left {
    background-color: var(--ext-neutral-900, #F99537);
}

:is(.dark .ext-chips-square-outline-lg .ext-chip-icon-left,
    .dark .ext-chips-square-outline-md .ext-chip-icon-left,
    .dark .ext-chips-square-outline-sm .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-lg .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-md .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-sm .ext-chip-icon-left) {
    background-color: var(--ext-neutral-100);
}

.ext-chips-square-outline-lg:disabled,
.ext-chips-square-outline-md:disabled,
.ext-chips-square-outline-sm:disabled,
.ext-chips-rounded-outline-lg:disabled,
.ext-chips-rounded-outline-md:disabled,
.ext-chips-rounded-outline-sm:disabled {
    color: var(--ext-navy-100, #98A5B2) !important;
    background-color: transparent;
    border: 1px solid var(--ext-light-700, #D3DCE5) !important;
    cursor: default;
}

:is(.dark .ext-chips-square-outline-lg:disabled,
    .dark .ext-chips-square-outline-md:disabled,
    .dark .ext-chips-square-outline-sm:disabled,
    .dark .ext-chips-rounded-outline-lg:disabled,
    .dark .ext-chips-rounded-outline-md:disabled,
    .dark .ext-chips-rounded-outline-sm:disabled) {
    color: var(--ext-dark-100) !important;
    border: 1px solid var(--ext-dark-300) !important;
}

.ext-chips-square-outline-lg:disabled:hover,
.ext-chips-square-outline-md:disabled:hover,
.ext-chips-square-outline-sm:disabled:hover,
.ext-chips-rounded-outline-lg:disabled:hover,
.ext-chips-rounded-outline-md:disabled:hover,
.ext-chips-rounded-outline-sm:disabled:hover {
    background-color: transparent;
}

.ext-chips-square-outline-lg:disabled img,
.ext-chips-square-outline-md:disabled img,
.ext-chips-square-outline-sm:disabled img,
.ext-chips-rounded-outline-lg:disabled img,
.ext-chips-rounded-outline-md:disabled img,
.ext-chips-rounded-outline-sm:disabled img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.ext-chips-square-outline-lg:disabled .ext-chip-icon-left,
.ext-chips-square-outline-md:disabled .ext-chip-icon-left,
.ext-chips-square-outline-sm:disabled .ext-chip-icon-left,
.ext-chips-rounded-outline-lg:disabled .ext-chip-icon-left,
.ext-chips-rounded-outline-md:disabled .ext-chip-icon-left,
.ext-chips-rounded-outline-sm:disabled .ext-chip-icon-left {
    background-color: var(--ext-navy-100) !important;
}

:is(.dark .ext-chips-square-outline-lg:disabled .ext-chip-icon-left,
    .dark .ext-chips-square-outline-md:disabled .ext-chip-icon-left,
    .dark .ext-chips-square-outline-sm:disabled .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-lg:disabled .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-md:disabled .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-sm:disabled .ext-chip-icon-left) {
    background-color: var(--ext-dark-100) !important;
}

.ext-chips-square-outline-lg:hover,
.ext-chips-square-outline-md:hover,
.ext-chips-square-outline-sm:hover,
.ext-chips-rounded-outline-lg:hover,
.ext-chips-rounded-outline-md:hover,
.ext-chips-rounded-outline-sm:hover,
.ext-chips-square-outline-lg.ext-chips-active:hover,
.ext-chips-square-outline-md.ext-chips-active:hover,
.ext-chips-square-outline-sm.ext-chips-active:hover,
.ext-chips-rounded-outline-lg.ext-chips-active:hover,
.ext-chips-rounded-outline-md.ext-chips-active:hover,
.ext-chips-rounded-outline-sm.ext-chips-active:hover {
    background-color: var(--ext-orange-100, #FDE3CA);
    border: 1px solid var(--ext-orange-400, #FBC797);
    color: var(--ext-orange-900, #4D2601);
}

:is(.dark .ext-chips-square-outline-lg:hover,
    .dark .ext-chips-square-outline-md:hover,
    .dark .ext-chips-square-outline-sm:hover,
    .dark .ext-chips-rounded-outline-lg:hover,
    .dark .ext-chips-rounded-outline-md:hover,
    .dark .ext-chips-rounded-outline-sm:hover,
    .dark .ext-chips-square-outline-lg.ext-chips-active:hover,
    .dark .ext-chips-square-outline-md.ext-chips-active:hover,
    .dark .ext-chips-square-outline-sm.ext-chips-active:hover,
    .dark .ext-chips-rounded-outline-lg.ext-chips-active:hover,
    .dark .ext-chips-rounded-outline-md.ext-chips-active:hover,
    .dark .ext-chips-rounded-outline-sm.ext-chips-active:hover) {
    background-color: var(--ext-orange-800);
    border: 1px solid var(--ext-orange-400);
    color: var(--ext-orange-100);
}

.ext-chips-square-outline-lg:hover .ext-chip-icon-left,
.ext-chips-square-outline-md:hover .ext-chip-icon-left,
.ext-chips-square-outline-sm:hover .ext-chip-icon-left,
.ext-chips-rounded-outline-lg:hover .ext-chip-icon-left,
.ext-chips-rounded-outline-md:hover .ext-chip-icon-left,
.ext-chips-rounded-outline-sm:hover .ext-chip-icon-left,
.ext-chips-square-outline-lg.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-square-outline-md.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-square-outline-sm.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-rounded-outline-lg.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-rounded-outline-md.ext-chips-active:hover .ext-chip-icon-left,
.ext-chips-rounded-outline-sm.ext-chips-active:hover .ext-chip-icon-left {
    background-color: var(--ext-orange-900, #F77B04);
}

:is(.dark .ext-chips-square-outline-lg:hover .ext-chip-icon-left,
    .dark .ext-chips-square-outline-md:hover .ext-chip-icon-left,
    .dark .ext-chips-square-outline-sm:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-lg:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-md:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-sm:hover .ext-chip-icon-left,
    .dark .ext-chips-square-outline-lg.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-square-outline-md.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-square-outline-sm.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-lg.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-md.ext-chips-active:hover .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-sm.ext-chips-active:hover .ext-chip-icon-left) {
    background-color: var(--ext-orange-100, #F77B04);
}

.ext-chips-square-outline-lg:focus,
.ext-chips-square-outline-md:focus,
.ext-chips-square-outline-sm:focus,
.ext-chips-rounded-outline-lg:focus,
.ext-chips-rounded-outline-md:focus,
.ext-chips-rounded-outline-sm:focus,
.ext-chips-square-outline-lg.ext-chips-active,
.ext-chips-square-outline-md.ext-chips-active,
.ext-chips-square-outline-sm.ext-chips-active,
.ext-chips-rounded-outline-lg.ext-chips-active,
.ext-chips-rounded-outline-md.ext-chips-active,
.ext-chips-rounded-outline-sm.ext-chips-active {
    background-color: var(--ext-orange-50, #FCCA9B);
    border: 1px solid var(--ext-orange-500, #FCCA9B);
    color: var(--ext-orange-900, #4D2601);
}

:is(.dark .ext-chips-square-outline-lg:focus,
    .dark .ext-chips-square-outline-md:focus,
    .dark .ext-chips-square-outline-sm:focus,
    .dark .ext-chips-rounded-outline-lg:focus,
    .dark .ext-chips-rounded-outline-md:focus,
    .dark .ext-chips-rounded-outline-sm:focus,
    .dark .ext-chips-square-outline-lg.ext-chips-active,
    .dark .ext-chips-square-outline-md.ext-chips-active,
    .dark .ext-chips-square-outline-sm.ext-chips-active,
    .dark .ext-chips-rounded-outline-lg.ext-chips-active,
    .dark .ext-chips-rounded-outline-md.ext-chips-active,
    .dark .ext-chips-rounded-outline-sm.ext-chips-active) {
    background-color: var(--ext-dark-500);
    border: 1px solid var(--ext-orange-500);
    color: var(--ext-orange-100);
}

.ext-chips-square-outline-lg:focus .ext-chip-icon-left,
.ext-chips-square-outline-md:focus .ext-chip-icon-left,
.ext-chips-square-outline-sm:focus .ext-chip-icon-left,
.ext-chips-rounded-outline-lg:focus .ext-chip-icon-left,
.ext-chips-rounded-outline-md:focus .ext-chip-icon-left,
.ext-chips-rounded-outline-sm:focus .ext-chip-icon-left,
.ext-chips-square-outline-lg.ext-chips-active .ext-chip-icon-left,
.ext-chips-square-outline-md.ext-chips-active .ext-chip-icon-left,
.ext-chips-square-outline-sm.ext-chips-active .ext-chip-icon-left,
.ext-chips-rounded-outline-lg.ext-chips-active .ext-chip-icon-left,
.ext-chips-rounded-outline-md.ext-chips-active .ext-chip-icon-left,
.ext-chips-rounded-outline-sm.ext-chips-active .ext-chip-icon-left {
    background-color: var(--ext-orange-900, #F77B04);
}

:is(.dark .ext-chips-square-outline-lg:focus .ext-chip-icon-left,
    .dark .ext-chips-square-outline-md:focus .ext-chip-icon-left,
    .dark .ext-chips-square-outline-sm:focus .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-lg:focus .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-md:focus .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-sm:focus .ext-chip-icon-left,
    .dark .ext-chips-square-outline-lg.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-square-outline-md.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-square-outline-sm.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-lg.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-md.ext-chips-active .ext-chip-icon-left,
    .dark .ext-chips-rounded-outline-sm.ext-chips-active .ext-chip-icon-left) {
    background-color: var(--ext-orange-100);
}

/* END */

/* Rounded */

.ext-chips-rounded-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 24px;
}

.ext-chips-rounded-lg span {
    background-color: var(--ext-navy-500, #08294C);
    height: 14px;
    width: 14px;
}

.ext-chips-rounded-lg:disabled {
    opacity: 0.5;
}

.ext-chips-rounded-lg:focus {
    filter: brightness(75%);
}

.ext-chips-rounded-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 20px;
}

.ext-chips-rounded-md span {
    background-color: var(--ext-navy-500, #08294C);
    height: 12px;
    width: 12px;
}

.ext-chips-rounded-md:disabled {
    opacity: 0.5;
}

.ext-chips-rounded-md:focus {
    filter: brightness(75%);
}

.ext-chips-rounded-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--ext-orange-200, #FCCA9B);
    padding: 0px 8px;
    gap: 5px;
    color: var(--ext-navy-500, #08294C);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    border: none;
    height: 16px;
}

.ext-chips-rounded-sm span {
    background-color: var(--ext-navy-500, #08294C);
    height: 10px;
    width: 10px;
}

.ext-chips-rounded-sm:disabled {
    opacity: 0.5;
}

.ext-chips-rounded-sm:focus {
    filter: brightness(75%);
}

/* END */

/* ### Width || */

/* Persen */

.ext-w-p-100 {
    width: 100%;
}

.ext-w-p-75 {
    width: 75%;
}

.ext-w-p-50 {
    width: 50%;
}

.ext-w-p-25 {
    width: 25%;
}

.ext-w-p-10 {
    width: 10%;
}

/* END */

/* ### Inputs || */

/* Input Default  */

.ext-input-iconleft-lg input:focus,
.ext-input-iconleft-md input:focus,
.ext-input-iconleft-sm input:focus,
.ext-input-lg input:focus,
.ext-input-md input:focus,
.ext-input-sm input:focus,
.ext-input-iconright-lg input:focus,
.ext-input-iconright-md input:focus,
.ext-input-iconright-sm input:focus,
.ext-input-icondouble-lg input:focus,
.ext-input-icondouble-md input:focus,
.ext-input-icondouble-sm input:focus {
    background: var(--ext-neutral-100, #FBFCFE);
    border-color: var(--ext-orange-500, #F77B04);
    outline: var(--ext-orange-500, #F77B04);
}

.ext-input-iconleft-lg input:required:invalid:focus,
.ext-input-iconleft-md input:required:invalid:focus,
.ext-input-iconleft-sm input:required:invalid:focus,
.ext-input-lg input:required:invalid:focus,
.ext-input-md input:required:invalid:focus,
.ext-input-sm input:required:invalid:focus,
.ext-input-iconright-lg input:required:invalid:focus,
.ext-input-iconright-md input:required:invalid:focus,
.ext-input-iconright-sm input:required:invalid:focus,
.ext-input-icondouble-lg input:required:invalid:focus,
.ext-input-icondouble-md input:required:invalid:focus,
.ext-input-icondouble-sm input:required:invalid:focus {
    border-color: var(--ext-red-500, #E31B1B);
    outline: var(--ext-red-500, #E31B1B);
}

.ext-input-iconleft-lg input:required:valid,
.ext-input-iconleft-md input:required:valid,
.ext-input-iconleft-sm input:required:valid,
.ext-input-lg input:required:valid,
.ext-input-md input:required:valid,
.ext-input-sm input:required:valid,
.ext-input-iconright-lg input:required:valid,
.ext-input-iconright-md input:required:valid,
.ext-input-iconright-sm input:required:valid,
.ext-input-icondouble-lg input:required:valid,
.ext-input-icondouble-md input:required:valid,
.ext-input-icondouble-sm input:required:valid {
    border-color: var(--ext-green-500, #1BDEAF);
    outline: var(--ext-green-500, #1BDEAF);
}

.ext-input-iconleft-lg input:disabled,
.ext-input-iconleft-md input:disabled,
.ext-input-iconleft-sm input:disabled,
.ext-input-lg input:disabled,
.ext-input-md input:disabled,
.ext-input-sm input:disabled,
.ext-input-iconright-lg input:disabled,
.ext-input-iconright-md input:disabled,
.ext-input-iconright-sm input:disabled,
.ext-input-icondouble-lg input:disabled,
.ext-input-icondouble-md input:disabled,
.ext-input-icondouble-sm input:disabled {
    color: var(--ext-navy-100, #CED4DB) !important;
    background-color: var(--ext-neutral-100, #EEF2F5) !important;
    border: 1px solid var(--ext-navy-100, #CED4DB) !important;
    cursor: default;
}

.ext-input-iconleft-lg .ext-inp,
.ext-input-iconleft-md .ext-inp,
.ext-input-iconleft-sm .ext-inp,
.ext-input-lg .ext-inp,
.ext-input-md .ext-inp,
.ext-input-sm .ext-inp,
.ext-input-iconright-lg .ext-inp,
.ext-input-iconright-md .ext-inp,
.ext-input-iconright-sm .ext-inp,
.ext-input-icondouble-lg .ext-inp,
.ext-input-icondouble-md .ext-inp,
.ext-input-icondouble-sm .ext-inp,
.ext-input-multi-lg .ext-inp,
.ext-input-multi-md .ext-inp,
.ext-input-multi-sm .ext-inp {
    position: relative;
}

.ext-input-iconleft-lg label,
.ext-input-iconleft-md label,
.ext-input-iconleft-sm label,
.ext-input-lg label,
.ext-input-md label,
.ext-input-sm label,
.ext-input-iconright-lg label,
.ext-input-iconright-md label,
.ext-input-iconright-sm label,
.ext-input-icondouble-lg label,
.ext-input-icondouble-md label,
.ext-input-icondouble-sm label,
.ext-input-multi-lg label,
.ext-input-multi-sm label,
.ext-input-multi-md label {
    margin-bottom: 5px;
}

.ext-input-lg {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 16px;
    font-weight: 500;
}

.ext-input-lg span {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-lg input {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 40px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-md {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-weight: 500;
}

.ext-input-md span {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-md input {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 36px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-sm {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 12px;
    font-weight: 500;
}

.ext-input-sm span {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-sm input {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 32px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

/* END */

/* Input Icon Left  */

.ext-input-iconleft-lg {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 16px;
    font-weight: 500;
}

.ext-input-iconleft-lg span {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-iconleft-lg input {
    width: 100%;
    padding-left: 38px;
    padding-right: 10px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 40px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-iconleft-md {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-weight: 500;
}

.ext-input-iconleft-md span {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-iconleft-md input {
    width: 100%;
    padding-left: 35px;
    padding-right: 10px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 36px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-iconleft-sm {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 12px;
    font-weight: 500;
}

.ext-input-iconleft-sm span {
    position: absolute;
    left: 8px;
    top: 7px;
    width: 18px;
    height: 18px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-iconleft-sm input {
    width: 100%;
    padding-left: 30px;
    padding-right: 10px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 32px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

/* END */

/* Input Icon Right  */

.ext-input-iconright-lg {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 16px;
    font-weight: 500;
}

.ext-input-iconright-lg span {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-iconright-lg input {
    width: 100%;
    padding-left: 15px;
    padding-right: 38px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 40px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-iconright-md {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-weight: 500;
}

.ext-input-iconright-md span {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-iconright-md input {
    width: 100%;
    padding-left: 15px;
    padding-right: 35px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 36px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-iconright-sm {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 12px;
    font-weight: 500;
}

.ext-input-iconright-sm span {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 18px;
    height: 18px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-iconright-sm input {
    width: 100%;
    padding-left: 15px;
    padding-right: 30px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 32px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

/* END */

/* Input Icon Double  */

.ext-input-icondouble-lg {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 16px;
    font-weight: 500;
}

.ext-input-icondouble-lg .right {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-icondouble-lg .left {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-icondouble-lg input {
    width: 100%;
    padding-left: 38px;
    padding-right: 38px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 40px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-icondouble-md {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-weight: 500;
}

.ext-input-icondouble-md .right {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-icondouble-md .left {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-icondouble-md input {
    width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 36px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-icondouble-sm {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 12px;
    font-weight: 500;
}

.ext-input-icondouble-sm .right {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 18px;
    height: 18px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-icondouble-sm .left {
    position: absolute;
    left: 8px;
    top: 7px;
    width: 18px;
    height: 18px;
    background-color: var(--ext-orange-500, #F77B04);
}

.ext-input-icondouble-sm input {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    height: 32px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

/* END */

/* Input Multi  */

.ext-input-multi-lg textarea:focus,
.ext-input-multi-md textarea:focus,
.ext-input-multi-sm textarea:focus {
    background: var(--ext-neutral-100, #FBFCFE);
    border-color: var(--ext-orange-500, #F77B04);
    outline: var(--ext-orange-500, #F77B04);
}

.ext-input-multi-lg textarea:required:invalid:focus,
.ext-input-multi-md textarea:required:invalid:focus,
.ext-input-multi-sm textarea:required:invalid:focus {
    border-color: var(--ext-red-500, #E31B1B);
    outline: var(--ext-red-500, #E31B1B);
}

.ext-input-multi-lg textarea:required:valid,
.ext-input-multi-md textarea:required:valid,
.ext-input-multi-sm textarea:required:valid {
    border-color: var(--ext-green-500, #1BDEAF);
    outline: var(--ext-green-500, #1BDEAF);
}

.ext-input-multi-lg textarea:disabled,
.ext-input-multi-md textarea:disabled,
.ext-input-multi-sm textarea:disabled {
    color: var(--ext-navy-100, #CED4DB) !important;
    background-color: var(--ext-neutral-100, #EEF2F5) !important;
    border: 1px solid var(--ext-navy-100, #CED4DB) !important;
    cursor: default;
}

.ext-input-multi-lg {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 16px;
    font-weight: 500;
}

.ext-input-multi-lg textarea {
    padding: 15px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-multi-md {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-weight: 500;
}

.ext-input-multi-md textarea {
    padding: 15px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

.ext-input-multi-sm {
    font-style: normal;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 12px;
    font-weight: 500;
}

.ext-input-multi-sm textarea {
    padding: 15px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: var(--ext-neutral-300, #EEF2F5);
    border-radius: 8px;
    border: 1px solid var(--ext-neutral-300, #EEF2F5);
}

/* END */

/* ### Checkboxs || */

/* Default */
.ext-checkbox-lg input,
.ext-checkbox-md input,
.ext-checkbox-sm input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.ext-checkbox-lg input:checked:disabled~.checkmark,
.ext-checkbox-md input:checked:disabled~.checkmark,
.ext-checkbox-sm input:checked:disabled~.checkmark {
    border-radius: 4px;
    background: var(--ext-light-100);
    border: 1px solid var(--ext-light-700);
    box-shadow: 0px 0px 0px 0px rgba(96, 97, 112, 0.24) inset;
    cursor: default;
}

:is(.dark .ext-checkbox-lg input:checked:disabled~.checkmark,
    .dark .ext-checkbox-md input:checked:disabled~.checkmark,
    .dark .ext-checkbox-sm input:checked:disabled~.checkmark) {
    background: var(--ext-dark-700);
    border: 1px solid var(--ext-dark-300);
}

.ext-checkbox-lg input:checked~.checkmark,
.ext-checkbox-md input:checked~.checkmark,
.ext-checkbox-sm input:checked~.checkmark {
    border-radius: 4px;
    background-color: var(--ext-orange-500);
    border: 1px solid var(--ext-light-700);
    box-shadow: 0px 0px 0px 0px rgba(96, 97, 112, 0.24) inset;
}

:is(.dark .ext-checkbox-lg input:checked~.checkmark,
    .dark .ext-checkbox-md input:checked~.checkmark,
    .dark .ext-checkbox-sm input:checked~.checkmark) {
    background-color: var(--ext-orange-500);
    border: 1px solid var(--ext-dark-300);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.ext-checkbox-lg input:checked~.checkmark:after,
.ext-checkbox-md input:checked~.checkmark:after,
.ext-checkbox-sm input:checked~.checkmark:after {
    display: block;
}

.ext-checkbox-lg .checkmark,
.ext-checkbox-md .checkmark,
.ext-checkbox-sm .checkmark {
    box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16) inset, 0px 0px 1px 0px rgba(14, 14, 44, 0.08) inset;
    border: 1px solid var(--ext-light-700);
    background-color: var(--ext-light-50);
}

:is(.dark .ext-checkbox-lg .checkmark,
    .dark .ext-checkbox-md .checkmark,
    .dark .ext-checkbox-sm .checkmark) {
    border: 1px solid var(--ext-dark-300);
    background-color: var(--ext-dark-900);
}

.ext-checkbox-lg input:disabled~.checkmark,
.ext-checkbox-md input:disabled~.checkmark,
.ext-checkbox-sm input:disabled~.checkmark {
    background-color: var(--ext-light-100);
    border: 1px solid var(--ext-light-700);
    box-shadow: 0px 0px 0px 0px rgba(96, 97, 112, 0.24) inset;
    cursor: default;
}

:is(.dark .ext-checkbox-lg input:disabled~.checkmark,
    .dark .ext-checkbox-md input:disabled~.checkmark,
    .dark .ext-checkbox-sm input:disabled~.checkmark) {
    background-color: var(--ext-dark-700);
    border: 1px solid var(--ext-dark-300);
}

.ext-checkbox-lg .checkmark:after,
.ext-checkbox-md .checkmark:after,
.ext-checkbox-sm .checkmark:after {
    border: solid var(--ext-neutral-50);
    border-width: 0 2px 2px 0;
}

:is(.dark .ext-checkbox-lg .checkmark:after,
    .dark .ext-checkbox-md .checkmark:after,
    .dark .ext-checkbox-sm .checkmark:after) {
    border: solid var(--ext-neutral-900);
    border-width: 0 2px 2px 0;
}

.ext-checkbox-lg input:checked:disabled~.checkmark:after,
.ext-checkbox-md input:checked:disabled~.checkmark:after,
.ext-checkbox-sm input:checked:disabled~.checkmark:after {
    border: solid var(--ext-navy-100);
    border-width: 0 2px 2px 0;
}

:is(.dark .ext-checkbox-lg input:checked:disabled~.checkmark:after,
    .dark .ext-checkbox-md input:checked:disabled~.checkmark:after,
    .dark .ext-checkbox-sm input:checked:disabled~.checkmark:after) {
    border: solid var(--ext-dark-100);
    border-width: 0 2px 2px 0;
}

.ext-checkbox-lg {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.ext-checkbox-lg .checkmark {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.ext-checkbox-lg .checkmark:after {
    position: relative;
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ext-checkbox-md {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

.ext-checkbox-md .checkmark {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.ext-checkbox-md .checkmark:after {
    position: relative;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ext-checkbox-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.ext-checkbox-sm .checkmark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.ext-checkbox-sm .checkmark:after {
    position: relative;
    left: 4.5px;
    top: 2px;
    width: 3px;
    height: 6px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* END */

/* ### Radio || */

/* Default */

.ext-radio-lg input,
.ext-radio-md input,
.ext-radio-sm input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.ext-radio-lg,
.ext-radio-md,
.ext-radio-sm {
    color: var(--ext-neutral-700);
}

:is(.dark .ext-radio-lg,
    .dark .ext-radio-md,
    .dark .ext-radio-sm) {
    color: var(--ext-neutral-300);
}

.ext-radio-lg .checkmark,
.ext-radio-md .checkmark,
.ext-radio-sm .checkmark {
    border: 1px solid var(--ext-light-700);
    background-color: var(--ext-light-50);
    box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16) inset, 0px 0px 1px 0px rgba(14, 14, 44, 0.08) inset;
}

:is(.dark .ext-radio-lg .checkmark,
    .dark .ext-radio-md .checkmark,
    .dark .ext-radio-sm .checkmark) {
    border: 1px solid var(--ext-dark-300);
    background-color: var(--ext-dark-900);
}

.ext-radio-lg input:disabled~.checkmark,
.ext-radio-md input:disabled~.checkmark,
.ext-radio-sm input:disabled~.checkmark {
    background: var(--ext-light-100);
    border: 1px solid var(--ext-light-700);
    cursor: default;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset;
}

:is(.dark .ext-radio-lg input:disabled~.checkmark,
    .dark .ext-radio-md input:disabled~.checkmark,
    .dark .ext-radio-sm input:disabled~.checkmark) {
    background-color: var(--ext-dark-700);
    border: 1px solid var(--ext-dark-300);
}

.ext-radio-lg input:checked:disabled~.checkmark,
.ext-radio-md input:checked:disabled~.checkmark,
.ext-radio-sm input:checked:disabled~.checkmark {
    background: var(--ext-light-100);
    border: 1px solid var(--ext-light-700);
}

:is(.dark .ext-radio-lg input:checked:disabled~.checkmark,
    .dark .ext-radio-md input:checked:disabled~.checkmark,
    .dark .ext-radio-sm input:checked:disabled~.checkmark) {
    background: var(--ext-dark-700);
    border: 1px solid var(--ext-dark-300);
}

.ext-radio-lg input:checked:disabled~.checkmark:after,
.ext-radio-md input:checked:disabled~.checkmark:after,
.ext-radio-sm input:checked:disabled~.checkmark:after {
    display: block;
    background-color: var(--ext-navy-100);
}

:is(.dark .ext-radio-lg input:checked:disabled~.checkmark:after,
    .dark .ext-radio-md input:checked:disabled~.checkmark:after,
    .dark .ext-radio-sm input:checked:disabled~.checkmark:after) {
    background-color: var(--ext-dark-100);
}

.ext-radio-lg input:checked~.checkmark,
.ext-radio-md input:checked~.checkmark,
.ext-radio-sm input:checked~.checkmark {
    background-color: var(--ext-orange-500);
    border: 1px solid var(--ext-light-700);
}

:is(.dark .ext-radio-lg input:checked~.checkmark,
    .dark .ext-radio-md input:checked~.checkmark,
    .dark .ext-radio-sm input:checked~.checkmark) {
    background-color: var(--ext-orange-500);
    border: 1px solid var(--ext-dark-300);
}

.ext-radio-lg input:checked~.checkmark:after,
.ext-radio-md input:checked~.checkmark:after,
.ext-radio-sm input:checked~.checkmark:after {
    display: block;
    box-shadow: 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(14, 14, 44, 0.08);
    background-color: var(--ext-neutral-50, #FFF);
}

:is(.dark .ext-radio-lg input:checked~.checkmark:after,
    .dark .ext-radio-md input:checked~.checkmark:after,
    .dark .ext-radio-sm input:checked~.checkmark:after) {
    background-color: var(--ext-neutral-900);
}

.ext-radio-lg {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
    font-style: normal;
}

.ext-radio-lg .checkmark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.ext-radio-lg .checkmark:after {
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ext-radio-md {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    font-style: normal;
}

.ext-radio-md .checkmark {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.ext-radio-md .checkmark:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ext-radio-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 12px;
    font-style: normal;
}

.ext-radio-sm .checkmark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.ext-radio-sm .checkmark:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* END */

/* ### Toggle || */

/* Default */

.ext-toggle-lg input,
.ext-toggle-md input,
.ext-toggle-sm input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ext-toggle-lg .slider,
.ext-toggle-md .slider,
.ext-toggle-sm .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ext-navy-100, #CED4DB);
    border: 1px solid var(--ext-navy-100, #CED4DB);
    -webkit-transition: .4s;
    transition: .4s;
}

.ext-toggle-lg input:checked+.slider,
.ext-toggle-md input:checked+.slider,
.ext-toggle-sm input:checked+.slider {
    background-color: var(--ext-green-500, #1BDEAF);
    border: 1px solid var(--ext-green-500, #1BDEAF);
}

.ext-toggle-lg input:disabled+.slider,
.ext-toggle-md input:disabled+.slider,
.ext-toggle-sm input:disabled+.slider {
    background-color: var(--ext-neutral-100, #FBFCFE);
    border: 1px solid var(--ext-navy-100, #CED4DB);
    cursor: default;
}

.ext-toggle-lg input:disabled+.slider:before,
.ext-toggle-md input:disabled+.slider:before,
.ext-toggle-sm input:disabled+.slider:before {
    background-color: var(--ext-navy-100, #CED4DB);
}

.ext-toggle-lg input:checked:disabled+.slider,
.ext-toggle-md input:checked:disabled+.slider,
.ext-toggle-sm input:checked:disabled+.slider {
    background-color: var(--ext-navy-100, #CED4DB);
    border: 1px solid var(--ext-navy-100, #CED4DB);
    cursor: default;
}

.ext-toggle-lg input:checked:disabled+.slider:before,
.ext-toggle-md input:checked:disabled+.slider:before,
.ext-toggle-sm input:checked:disabled+.slider:before {
    background-color: var(--ext-neutral-100, #FBFCFE);
}

.ext-toggle-lg input:focus+.slider,
.ext-toggle-md input:focus+.slider,
.ext-toggle-sm input:focus+.slider {
    box-shadow: 0px 0.5px 3px 0px rgba(96, 97, 112, 0.24) inset, 0px 0px 2px 0px rgba(14, 14, 44, 0.16) inset;
}

.ext-toggle-lg .slider.round:before,
.ext-toggle-md .slider.round:before,
.ext-toggle-sm .slider.round:before {
    border-radius: 50%;
}

.ext-toggle-lg {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}

.ext-toggle-lg .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 1px;
    bottom: 1px;
    background-color: var(--ext-neutral-100, #FBFCFE);
    -webkit-transition: .4s;
    transition: .4s;
}

.ext-toggle-lg input:checked+.slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

.ext-toggle-lg .slider.round {
    border-radius: 24px;
}

.ext-toggle-md {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
}

.ext-toggle-md .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 1px;
    bottom: 1px;
    background-color: var(--ext-neutral-100, #FBFCFE);
    -webkit-transition: .4s;
    transition: .4s;
}

.ext-toggle-md input:checked+.slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

.ext-toggle-md .slider.round {
    border-radius: 20px;
}

.ext-toggle-sm {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
}

.ext-toggle-sm .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 1px;
    bottom: 1px;
    background-color: var(--ext-neutral-100, #FBFCFE);
    -webkit-transition: .4s;
    transition: .4s;
}

.ext-toggle-sm input:checked+.slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

.ext-toggle-sm .slider.round {
    border-radius: 16px;
}

/* END */

/* ### Badge || */

/* Icon */
.ext-badge-icon-lg {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-badge-icon-lg span {
    width: 16px;
    height: 16px;
    margin: auto;
    background-color: var(--ext-neutral-50, #FFFFFF);
}

.ext-badge-icon-md {
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-badge-icon-md span {
    width: 14px;
    height: 14px;
    margin: auto;
    background-color: var(--ext-neutral-50, #FFFFFF);
}

.ext-badge-icon-sm {
    display: flex;
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-badge-icon-sm span {
    width: 12px;
    height: 12px;
    margin: auto;
    background-color: var(--ext-neutral-50, #FFFFFF);
}

/* END */

/* Text */

.ext-badge-text-lg {
    height: 24px;
    min-width: 24px;
    border-radius: 24px;
    background: var(--ext-orange-500, #F77B04);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ext-badge-text-lg span {
    margin: auto;
    margin-left: 7px;
    margin-right: 7px;
    color: var(--ext-neutral-50, #FFFFFF);
    text-align: center;
    font-size: 14px;
    font-style: normal;
}

.ext-badge-text-md {
    height: 20px;
    min-width: 20px;
    border-radius: 20px;
    background: var(--ext-orange-500, #F77B04);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ext-badge-text-md span {
    margin: auto;
    margin-left: 6.5px;
    margin-right: 6.5px;
    color: var(--ext-neutral-50, #FFFFFF);
    text-align: center;
    font-size: 12px;
    font-style: normal;
}

.ext-badge-text-sm {
    height: 16px;
    min-width: 16px;
    border-radius: 16px;
    background: var(--ext-orange-500, #F77B04);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ext-badge-text-sm span {
    margin: auto;
    margin-left: 5px;
    margin-right: 5px;
    color: var(--ext-neutral-50, #FFFFFF);
    text-align: center;
    font-size: 10px;
    font-style: normal;
}

/* END */

/* DOT */

.ext-badge-dot-lg {
    display: flex;
    width: 12px;
    height: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-badge-dot-md {
    display: flex;
    width: 10px;
    height: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: var(--ext-orange-500, #F77B04);
}

.ext-badge-dot-sm {
    display: flex;
    width: 8px;
    height: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--ext-orange-500, #F77B04);
}

/* END */

/* ### Toast || */

/* Default */

.ext-toast-title {
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.ext-toast-action {
    color: var(--ext-blue-600, #2074E2);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    cursor: pointer;
}

.ext-toast-content {
    display: flex;
    padding: 8px 0px;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}

.ext-toast-icon {
    width: 20px;
    height: 20px;
}

.ext-toast-list {
    display: flex;
    width: 4px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    border-radius: 8px 0px 0px 8px;
    margin-right: 8px;
}

.ext-toast-close {
    cursor: pointer;
    background-color: var(--ext-neutral-500, #9797AA);
    display: flex;
    margin-right: 8px;
    margin-left: 8px;
    gap: 8px;
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center;
}

/* END */

/* Toast Color */

.ext-toast-color-green {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-green-100, #D6F6EE);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-color-green .ext-toast-list {
    background: var(--ext-green-500, #1BDEAF);
}

.ext-toast-color-green .ext-toast-icon {
    background-color: var(--ext-green-500, #1BDEAF);
}

.ext-toast-color-red {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-red-100, #F9D6D6);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-color-red .ext-toast-list {
    background: var(--ext-red-500, #E31B1B);
}

.ext-toast-color-red .ext-toast-icon {
    background-color: var(--ext-red-500, #E31B1B);
}

.ext-toast-color-yellow {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-yellow-100, #FFF7D8);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-color-yellow .ext-toast-list {
    background: var(--ext-yellow-500, #EDC31C);
}

.ext-toast-color-yellow .ext-toast-icon {
    background-color: var(--ext-yellow-500, #EDC31C);
}

.ext-toast-color-skyblue {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-blue-100, #D4E5FC);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-color-skyblue .ext-toast-list {
    background: var(--ext-blue-500, #1876F2);
}

.ext-toast-color-skyblue .ext-toast-icon {
    background-color: var(--ext-blue-500, #1876F2);
}

/* END */

/* Toast White */

.ext-toast-white-green {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-neutral-50, #FFFFFF);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-white-green .ext-toast-list {
    background: var(--ext-green-500, #1BDEAF);
}

.ext-toast-white-green .ext-toast-icon {
    background-color: var(--ext-green-500, #1BDEAF);
}

.ext-toast-white-red {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-neutral-50, #FFFFFF);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-white-red .ext-toast-list {
    background: var(--ext-red-500, #E31B1B);
}

.ext-toast-white-red .ext-toast-icon {
    background-color: var(--ext-red-500, #E31B1B);
}

.ext-toast-white-yellow {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-neutral-50, #FFFFFF);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-white-yellow .ext-toast-list {
    background: var(--ext-yellow-500, #EDC31C);
}

.ext-toast-white-yellow .ext-toast-icon {
    background-color: var(--ext-yellow-500, #EDC31C);
}

.ext-toast-white-skyblue {
    display: flex;
    width: 440px;
    align-items: flex-start;
    border-radius: 4px;
    align-items: center;
    font-size: 12px;
    background: var(--ext-neutral-50, #FFFFFF);
    box-shadow: 10px 15px 24px 0px rgba(0, 0, 0, 0.10), -3px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-toast-white-skyblue .ext-toast-list {
    background: var(--ext-blue-500, #1876F2);
}

.ext-toast-white-skyblue .ext-toast-icon {
    background-color: var(--ext-blue-500, #1876F2);
}

/* END */

/* ### Modal || */

/* Default */

.ext-modal-item-title {
    color: var(--ext-neutral-900, #262641);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.ext-modal-item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    color: var(--ext-neutral-700, #5C5C77);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.ext-modal-item-action {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ext-modal-item-header {
    width: 100%;
    border-radius: 8px 8px 0px 0px;
    flex-shrink: 0;
    background: var(--ext-orange-600, #E87100);
    mix-blend-mode: multiply;
}

.ext-modal-item-header img {
    width: 100%;
    height: 238px;
    border-radius: 8px 8px 0px 0px;
    object-fit: cover;
}

.ext-modal-item-body {
    max-width: 584px;
    min-width: 360px;
    margin: 32px;
    gap: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ext-modal-text {
    display: flex;
    max-width: 584px;
    min-width: 360px;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 8px;
    background: var(--ext-neutral-50, #FFF);
    box-shadow: 20px 25px 24px 0px rgba(0, 0, 0, 0.10), -5px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-modal-image {
    display: flex;
    max-width: 648px;
    min-width: 424px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    background: var(--ext-neutral-50, #FFF);
    box-shadow: 20px 25px 24px 0px rgba(0, 0, 0, 0.10), -5px 0px 24px 0px rgba(0, 0, 0, 0.10);
}

.ext-modal-image .ext-modal-item-action {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    align-self: stretch;
    margin-top: 16px;
}

/* END */