/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
:root {
        --ColorDm01: #FFFFFF;
        --ColorDm02: #F8F8F8; 
        --ColorDm03: #F0F0F0; 
        --ColorDm04: #E0E0E0; 
        --ColorSc01: #000000;
        --ColorSc02: #080808;
        --ColorSc03: #101010;
        --ColorSc04: #202020;
        --ColorAc01: #20D080;
        --ColorOt01: #000000;
        --ColorOt02: #303030;
        --ColorOt03: #FFFFFF;
        --ColorOt04: #808080;
        --ColorOt05: #404040;
} :root[data-theme="d"] {
        --ColorDm01: #101010;
        --ColorDm02: #181818; 
        --ColorDm03: #202020; 
        --ColorDm04: #303030; 
        --ColorSc01: #E0E0E0;
        --ColorSc02: #E8E8E8;
        --ColorSc03: #D0D0D0;
        --ColorSc04: #C0C0C0;
/*
        --ColorOt02: #D0D0D0;
        --ColorOt05: #C0C0C0;
        */
} :root {
        accent-color: var(--ColorAc01);
}
@font-face {
        font-family:'Roboto'; src: url('/Roboto.ttf') format('truetype'); font-style: normal;
        font-weight: 100 900; font-display: swap;
}
@font-face {
        font-family: 'Inter'; src: url('/Inter.ttf')  format('truetype'); font-style: normal;
        font-weight: 100 900; font-display: swap;
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
html {
        scroll-behavior: smooth;
} @media all and (min-width: 0.0px) { html { font-size: 16.0px; }
                                      body { display: none ; }
/*|| M0.1 - M0.G ||*/
} @media all and (min-width: 204px) { html { font-size:  8.50px; }
                                      body { display: block; }
} @media all and (min-width: 216px) { html { font-size:  9.00px; }
} @media all and (min-width: 228px) { html { font-size:  9.50px; }
} @media all and (min-width: 240px) { html { font-size: 10.00px; }
} @media all and (min-width: 252px) { html { font-size: 10.50px; }
} @media all and (min-width: 264px) { html { font-size: 11.00px; }
} @media all and (min-width: 276px) { html { font-size: 11.50px; }
} @media all and (min-width: 288px) { html { font-size: 12.00px; }
} @media all and (min-width: 300px) { html { font-size: 12.50px; }
} @media all and (min-width: 312px) { html { font-size: 13.00px; }
} @media all and (min-width: 324px) { html { font-size: 13.50px; }
} @media all and (min-width: 336px) { html { font-size: 14.00px; }
} @media all and (min-width: 348px) { html { font-size: 14.50px; }
} @media all and (min-width: 360px) { html { font-size: 15.00px; }
} @media all and (min-width: 372px) { html { font-size: 15.50px; }
} @media all and (min-width: 384px) { html { font-size: 16.00px; }
/*|| M1.1 - M1.G ||*/
} @media all and (min-width: 396px) { html { font-size: 16.50px; }
} @media all and (min-width: 408px) { html { font-size: 17.00px; }
} @media all and (min-width: 420px) { html { font-size: 17.50px; }
} @media all and (min-width: 432px) { html { font-size: 18.00px; }
} @media all and (min-width: 444px) { html { font-size: 18.50px; }
} @media all and (min-width: 456px) { html { font-size: 19.00px; }
} @media all and (min-width: 468px) { html { font-size: 19.50px; }
} @media all and (min-width: 480px) { html { font-size: 20.00px; }
} @media all and (min-width: 492px) { html { font-size: 20.50px; }
} @media all and (min-width: 504px) { html { font-size: 21.00px; }
} @media all and (min-width: 516px) { html { font-size: 21.50px; }
} @media all and (min-width: 528px) { html { font-size: 22.00px; }
} @media all and (min-width: 540px) { html { font-size: 22.50px; }
} @media all and (min-width: 552px) { html { font-size: 23.00px; }
} @media all and (min-width: 564px) { html { font-size: 23.50px; }
} @media all and (min-width: 576px) { html { font-size: 24.00px; }
/*|| T0.1 - T0.G ||*/
} @media all and (min-width: 588px) { html { font-size: 12.25px; }
} @media all and (min-width: 600px) { html { font-size: 12.50px; }
} @media all and (min-width: 612px) { html { font-size: 12.75px; }
} @media all and (min-width: 624px) { html { font-size: 13.00px; }
} @media all and (min-width: 636px) { html { font-size: 13.25px; }
} @media all and (min-width: 648px) { html { font-size: 13.50px; }
} @media all and (min-width: 660px) { html { font-size: 13.75px; }
} @media all and (min-width: 672px) { html { font-size: 14.00px; }
} @media all and (min-width: 684px) { html { font-size: 14.25px; }
} @media all and (min-width: 696px) { html { font-size: 14.50px; }
} @media all and (min-width: 708px) { html { font-size: 14.75px; }
} @media all and (min-width: 720px) { html { font-size: 15.00px; }
} @media all and (min-width: 732px) { html { font-size: 15.25px; }
} @media all and (min-width: 744px) { html { font-size: 15.50px; }
} @media all and (min-width: 756px) { html { font-size: 15.75px; }
} @media all and (min-width: 768px) { html { font-size: 16.00px; }
/*|| T1.1 - T1.G ||*/
} @media all and (min-width: 792px) { html { font-size: 16.00px; }
} @media all and (min-width: 816px) { html { font-size: 16.00px; }
} @media all and (min-width: 840px) { html { font-size: 16.00px; }
} @media all and (min-width: 864px) { html { font-size: 16.00px; }
} @media all and (min-width: 888px) { html { font-size: 16.00px; }
} @media all and (min-width: 912px) { html { font-size: 16.00px; }
} @media all and (min-width: 936px) { html { font-size: 16.00px; }
} @media all and (min-width: 960px) { html { font-size: 16.00px; }
} @media all and (min-width: 984px) { html { font-size: 16.00px; }
} @media all and (min-width:1008px) { html { font-size: 16.00px; }
} @media all and (min-width:1032px) { html { font-size: 16.00px; }
} @media all and (min-width:1056px) { html { font-size: 16.00px; }
} @media all and (min-width:1080px) { html { font-size: 16.00px; }
} @media all and (min-width:1104px) { html { font-size: 16.00px; }
} @media all and (min-width:1128px) { html { font-size: 16.00px; }
} @media all and (min-width:1152px) { html { font-size: 16.00px; }
/*|| D0.1 - D0.G ||*/
} @media all and (min-width:1158px) { html { font-size: 16.00px; }
} @media all and (min-width:1164px) { html { font-size: 16.00px; }
} @media all and (min-width:1170px) { html { font-size: 16.00px; }
} @media all and (min-width:1176px) { html { font-size: 16.00px; }
} @media all and (min-width:1182px) { html { font-size: 16.00px; }
} @media all and (min-width:1188px) { html { font-size: 16.00px; }
} @media all and (min-width:1194px) { html { font-size: 16.00px; }
} @media all and (min-width:1200px) { html { font-size: 16.00px; }
} @media all and (min-width:1206px) { html { font-size: 16.00px; }
} @media all and (min-width:1212px) { html { font-size: 16.00px; }
} @media all and (min-width:1218px) { html { font-size: 16.00px; }
} @media all and (min-width:1224px) { html { font-size: 16.00px; }
} @media all and (min-width:1230px) { html { font-size: 16.00px; }
} @media all and (min-width:1236px) { html { font-size: 16.00px; }
} @media all and (min-width:1242px) { html { font-size: 16.00px; }
} @media all and (min-width:1248px) { html { font-size: 16.00px; }
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
* {
        font-family: 'Roboto'; padding: 0px; margin: 0px; color: var(--ColorSc01);
        -webkit-text-size-adjust: 100%; scrollbar-width: none;
        text-box-trim: trim-both; text-box-edge: cap alphabetic;
} *::-webkit-scrollbar {
        display: none;
} body  {
        background-color: var(--ColorDm01);
} h1  , h2  , h3  ,  h4   , h5  , h6   { font-size: 0.7500rem; font-weight: normal;
} h1 *, h2 *, h3 *,  h4 * , h5 *, h6 * { font-size: 0.7500rem; font-weight: normal;
} p   , span  , ul  , li   { font-size : 0.7500rem;
} p  *, span *, ul *, li * { font-size : 0.7500rem;
} a     { text-decoration: none; cursor: pointer; }
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
img     { display: block; }
input   { border: 0rem solid #FFFFFF; box-sizing: border-box; outline: none;
} input::-webkit-box-placeholder { color: var(--ColorOt01); opacity: 1;
} input::-moz-box-placeholder    { color: var(--ColorOt01); opacity: 1;
} input::-ms-box-placeholder     { color: var(--ColorOt01); opacity: 1;
} input::placeholder             { color: var(--ColorOt01); opacity: 1;
} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, 
  input:-webkit-autofill:active {
        transition: background-color 999999s ease-in-out 0s;
        -webkit-text-fill-color: var(--ColorSc01);
        }
select  {
        outline: none; border: none; background-color: inherit; appearance: none;
        -webkit-appearance: none; -moz-appearance: none;
        }
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.LX     {
        width: 100dvw !important; height: 100dvh; box-sizing: border-box; display: flex;
        position: fixed; top: 0; left: 0; bottom: 0; right: 0;
        align-items: center; justify-content: space-around; padding: 1.0000rem; overflow: auto;
        scrollbar-width: thin; scrollbar-color: var(--BrandColorB) var(--BrandColorC);
        backdrop-filter: brightness(0.75);
}
.L2     { z-index: 101 }
.L3     { z-index: 201 }
.L4     { z-index: 301 }
.L5     { z-index: 401 }
.L6     { z-index: 501 }
.L7     { z-index: 601 }
.L8     { z-index: 701 }
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@keyframes Animation01 {
          0% { transform: scale(1.00); }
         50% { transform: scale(1.25); }
        100% { transform: scale(1.00); }
        }
@keyframes Animation02 {
          0% { transform: scale(1.00); }
         25% { transform: scale(1.25); }
         50% { transform: scale(1.00); }
         75% { transform: scale(0.75); }
        100% { transform: scale(1.00); }
        }
@keyframes Animation03 {
          0% { transform: scale(1.00); }
         25% { transform: scale(1.05); }
         50% { transform: scale(1.00); }
         75% { transform: scale(0.95); }
        100% { transform: scale(1.00); }
        }
@keyframes Animation04 {
          to { transform: rotate(360deg); }
        }
#Dial01 {
        width: 12rem; height: 12rem; border: 0.0625rem solid var(--ColorAc01); display: flex;
        margin-left: auto; margin-right: auto; border-radius: 12rem; box-sizing: border-box;
        align-items: center; justify-content: space-around; position: relative;
        overflow: hidden;
        }
#Dial01El35 { font-size: 0.8750rem; letter-spacing: 8%; }
#Dial01El40 { display: flex; align-items: end; }
#Dial01El45 { font-size:2.0000rem; font-weight: 700; font-family: 'Inter'; letter-spacing: 4%; }
#Dial01El50 {
        padding-bottom: 0.0625rem; font-size: 0.6250rem; font-weight: 500; letter-spacing: 8%;
        margin-right: -1rem;
        }
#Dial01El55 { position: absolute; top: 2.4375rem; font-size: 0.6250rem; font-weight: 500; letter-spacing: 8%; }
#Dial01El60 { position: absolute; top: 3.3750rem; font-size: 0.8750rem; font-weight: 500; letter-spacing: 8%; }
#Dial01El65 { position: absolute; top: 8.2500rem; font-size: 0.6250rem; font-weight: 500; letter-spacing: 8%; }
.Dial01El70 { }
:root[data-theme="d"] { .Dial01El70 * { color: var(--ColorOt01); } }
.ElpssText  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }