HTML {
    font-size: 16px;
    font-family: "Roboto Mono", "Segoe UI", Calibri, arial;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

UL {
    list-style: none;
    padding: 0;
}

/* xxxxx */

:root {
    --main-padding: 24px;
    --main-border: 1px solid #ccc;
  }

/* xxx */

A {
    color: rgb(22, 82, 240);
    text-decoration: none;
}

.green { color: rgb(5, 177, 105); }
.red { color: rgb(223, 95, 103); }

/* xxxxx */

#ThreeDeeContainer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: #f4f4f4;
    z-index: 1;
}

/* xxxxx */

DIV.scroll-notice {
    position: fixed;
    left: 5vh;
    bottom: 0;
    width: 28vw;
    height: 60px;
    min-width: 400px;
    max-width: 600px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 100) 80%);
    z-index: 9999;
    text-align: center;
    line-height: 30px;
    font-size: 1em;
    font-weight: bold;
    display: none;
}

DIV.scroll-notice::before {
    position: absolute;
    content: '';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR+2UPU7DQBCF33AEm6vQpMY+SBy6BBQsAQUFiAoSIYJS2j5IvDXiMt4j8JCDEoiF4vWP5Gbc7uq9b78ZWTDwJwP3QwHUgBpQA2rAyYAXXozArzObpyuXX7cXjK/Bkw9rks+6+04A/nn0BME9wdjm2euxUD+IbgA8k3ywJnvsBQCAeMF4IZCY5Nya7O2/4NNgEhNcAngp8vQOAPsCKHP2EBC5KjbJ+99wL4zmQpR2nMu3oXWElfNfCGJWmHRdnvvh5BLkipSFNcmty8t3uU0BDk1Apj9BXLcpb2NgD77biW29YGk3abl8tTOvGm9j4AACImxb3sVAdYSNX95lBxru7fHrXUbQC4gCqAE1oAYGN/ANELlfITA1Xh8AAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    width: 100%;
    height: 30px;
}

/* xxxxx */

DIV.playback-controls {
    box-shadow: -1px -1px 31px 0px rgba(161,161,161,0.75);
    background-color: #fff;
    right: 5vh;
    bottom: 5vh;
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 10px;
    position: absolute;
    z-index: 9999;
    pointer-events: auto;
    display: none;
}

DIV.playback-controls.open {
    display: block;
}

DIV.playback-controls > UL {
    justify-content: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
}

DIV.playback-controls > UL > LI {
    background-color: #EFEFEF;
    height: auto;
    width: auto;
    border-radius: 6px;
    justify-content: center;
    margin-right: 7px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 5px;
}

DIV.playback-controls > UL > LI > SPAN {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0.6em;
    text-align: center;
    line-height: 26px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    text-transform: capitalize;
}
/* 
MAIN DIV.interval > UL > LI.camera {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFeklEQVR4Xu2aWejtUxTHP1dImYckU5kyZLoeCA+GMkZ4wS1yb1HmsQwp8iKUeXrggShuHmQoQ2Qo44PIlEwZk7pmZb76aP9u5/6dc/Ze+/c7A/+z6jyd9dtr7e9ee417AfOcFszz/TMDYGYB8xyB2RWY5wYwc4LjuALK2B04GNgZ2BrYHFgHWDNZ4M/AD8DnwEfAW8CTwOvA8lFa6agAWAs4Ejg0bXyTyk18lYB4HHgE+KlynYGfdQ3A+sDZ6bdBx8p+A9yUft92tXZXAGwMXACcBqzdlXID1vkRuB24Fvi6rawuAFgE3Ap4+uMkreAM4L42QtsA4IY9iePaKNDBt/cDpwNV16IWgAOAe4FNO9hAF0t8CZwAPBNdrAYATf5uYLWosBHz/wacBGgRxRQF4FzgOggnUL8DrwAvAC8CHwN6dX+SEcPfVsA+wL7AXhUgmzOcB9xYikAEgKuAi0oXTnzvA3cki4l6bCPLYuBkYLug3KuBi0u+KQXgSuCSkgUTjwnMhclPtM3k1NH7fQ0QSajU+dKcziUAnJWSj9xa/u9mNb/LAON1l2TqfAVwTuAKqvstw5TIAXBsirOrFOzkO+BE4NEC3jYsRwD3AOsVLPIXcDzwwCDeYQDsl/Lw1QsEvQkcA3xYwNsFy7bAg6m4yq33K3AI8Fw/xkEAbAa8BuiIcqR3V8D3OcaO/9cCngD2LFhXB7wH8MVc3n4AGN9Fa++ChQ1ph6VStoC9cxb9gpViia4vAVq1IXkF9QPgZuDMAlXdvCcfLVHtCZwCHARsCXhPPwGeAu4E3i6Q3cti8aUllIDg3qxWBwKgwygpLrzrJirLAsrqS64HTgUGOdU/gdtSZbnSSWXkbAS8DGxToI97XNrw9VrAFoDObN3MIhYdov1egbCGxc0/BhxY+M3T6WpFQNg+gZCLDkarXVL3aUVKKxCaYE5BFdLso0WH5bIVW4RsfhjzI6T++oRcnSLAXsHljQWYP5vj58haoDjPTot5598YYvaDZHoddqvwCeroVcuRe75BAHZMIW+NzBcPAUfnVu3zv4Ct5HgCa7iR8wP8DevDqSc57NNfgIUCYPmYa2p8mjq7NU2HdxLIFfv4xyftWvGhlaUdZf3aMFoqAHryYQ3MP1L8NOzVkGGyaX9Hv7eeMNbXkCX1s8CqQz5eNu0ACF5tk7UYgNIrsLCngRE5kTZX4F1gp4iwxBu6AqVOUMdyVIUybZyg3+rVoxRygi4+jWHQFFkHGE2Nw2FQAKYxETJ5KqlJeq2jOhFykWlLhQ8H7PSW0g6AFV9VKtwIGXUxZLbp+GxQMaTZO2zxSkbqgE6KoQaE0nJYtK0Lor0/U2M7vY7Lm0Tls9R9shx2NB6hTsthBUcaIoLgCNzZ/iQo0hAxkdu/pCHiRiItsVfTaf5vWmLNSUaaopqtTdEPxmQG0aao1+35frr9F9vivjyxLZ5r3LjfVm3xBrCawcjlI/ALExmMNCDUjMacI3pSXYzGHLg475vIaKwBoXY4ami7q+I5izOJJSlkeucjpK5Fs8ycD5gr1B6dXZrodyY1Rou54/Gmq7xhn/G4A49cb2+ufiMdjzfCfCDhiZaMzCKn1pZ3LA8kGiWn7YmMIy/9RLRbHTbl3lPykZRDDOuHSdJEHkn1blgABGISz+ScNYTeBM09qagzG3TSemzb1ypU28MrtSKLLwG3sow+u/mXjK4AaBbWCkycjBajeCpri8xqtaY93xfgrgFohPhY2pccVoqWzJEEpldR3xo5+XXc5cuT6CQ6a1WjAqBXsDIccfU+l7cP4FURKMmNadr2BXqfyztSa5tJDgVhHABkT2GSDDMAJon+NMieWcA0nMIkdZhZwCTRnwbZ894C/gZQ9ibIrStxuwAAAABJRU5ErkJggg==);
    background-position: 4px center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: auto;
    padding-left: 24px;
    padding-right: 5px;
    margin-right: 0px;
    cursor: pointer;
} */

/* xxxxx */

DIV.main-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
}

/* xxxxx */

MAIN {
    box-shadow: -1px -1px 31px 0px rgba(161,161,161,0.75);
    background-color: #fff;
    margin-top: 5vh;
    margin-left: 5vh;
    margin-bottom: 5vh;
    width: 28vw;
    min-width: 400px;
    max-width: 600px;
    border: 1px solid #CCC;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transition: margin-top 1s;
    position: relative;
    pointer-events: auto;
}

MAIN > DIV.collapse-icon {
    position: absolute;
    top:5px;
    right: 5px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 100px;
    background-size: cover;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR+2UPU7DQBCF33AEm6vQpMY+SBy6BBQsAQUFiAoSIYJS2j5IvDXiMt4j8JCDEoiF4vWP5Gbc7uq9b78ZWTDwJwP3QwHUgBpQA2rAyYAXXozArzObpyuXX7cXjK/Bkw9rks+6+04A/nn0BME9wdjm2euxUD+IbgA8k3ywJnvsBQCAeMF4IZCY5Nya7O2/4NNgEhNcAngp8vQOAPsCKHP2EBC5KjbJ+99wL4zmQpR2nMu3oXWElfNfCGJWmHRdnvvh5BLkipSFNcmty8t3uU0BDk1Apj9BXLcpb2NgD77biW29YGk3abl8tTOvGm9j4AACImxb3sVAdYSNX95lBxru7fHrXUbQC4gCqAE1oAYGN/ANELlfITA1Xh8AAAAASUVORK5CYII=);
}

MAIN > DIV.collapse-icon:hover {
    background-color: #F4F4F4;
}

MAIN.collapsed > DIV.collapse-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA90lEQVRYR+2USwrCMBBAZ1p16a9H8QaiO0U3wc9WEbySn25V/OBO0F7Bm9h4gNJEUqwIIk3iws1kPeS9vMAg/Pngn/lAAlSAClABKvBTgWpzxNQq55fl1nalWwsoOApYKbB0sc/Pi52NhJXAC+7CMYHG0JUoezzw96YSxgLv8DB0BwroVaM1CKdjI2Ek8AG/zqLkxbVJ3iuLDThxW0rsm5TQFvgKT5u/SYB0e2GwOOh8h5ZAJjwlMVao3IsbB0VLV0JLwGuMp4CiHvLcENLs357HWMHjpTWiON0Cf55VQUvgeYmalVkXms6aCGiyzcZIgApQASpABR7/vmQh/PvyuwAAAABJRU5ErkJggg==);
}

MAIN.collapsed {
    margin-top: calc(100vh - 128px)!important;
}

/* xxxxx */

HEADER {
    padding: var(--main-padding);
}

HEADER > DIV.logo {
    width: 300px;
    height: 70px;
    position: absolute;
    top:-35px;
    left:50%;
    transform: translateX(-50%);
    /*background-image: url(https://www.technogym.com/land/wp-content/uploads/2018/02/logo_transparent_edge_500.png);*/
    background-image: url(/assets/img/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* xxxxx */

MAIN DIV.spark {
    border-bottom: var(--main-border);
    height: 80px;
    position: relative;
}

MAIN DIV.spark > DIV.spark-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

MAIN DIV.spark > DIV.spark-wrap > SVG {
    margin-left: -5px;
}

.sparkline--head {
    stroke: #ff0000;
}

MAIN DIV.spark > SPAN.spark-value,
MAIN DIV.spark > SPAN.spark-value-2 {
    position:absolute;
    top: -10px;
    left: -1000px;
    width: auto;
    font-size: 0.7em;
    color:#FFFF;
    padding: 3px;
    text-align: left;
    background-color: #Ff0000;
    border-radius: 0px;
    transform: translateX(-50%);
}

MAIN DIV.spark > SPAN.spark-value-2 {
    background-color: #0000ff;
}

MAIN DIV.spark > SPAN.spark-value-2.hidden {
    display: none;
}

/* xxxxx */

MAIN DIV.interval {
    padding-top: var(--main-padding);
    padding-bottom: var(--main-padding);
    padding-left: var(--main-padding) / 2;
    padding-right: var(--main-padding) / 2;
    border-bottom: var(--main-border);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 100%;
    height: 100%;
}

MAIN DIV.interval > UL {
    justify-content: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
}

MAIN DIV.interval > UL > LI {
    background-color: #EFEFEF;
    height: 26px;
    width: 26px;
    border-radius: 6px;
    justify-content: center;
    margin-right: 7px;
    margin-top: 2px;
    margin-bottom: 2px;
}

MAIN DIV.interval > UL > LI.selected {
    background-color: #CCC;
}

MAIN DIV.interval > UL > LI > A,
MAIN DIV.interval > UL > LI > SPAN {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0.6em;
    text-align: center;
    line-height: 26px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    text-transform: capitalize;
}

MAIN DIV.interval > UL > LI.camera {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFeklEQVR4Xu2aWejtUxTHP1dImYckU5kyZLoeCA+GMkZ4wS1yb1HmsQwp8iKUeXrggShuHmQoQ2Qo44PIlEwZk7pmZb76aP9u5/6dc/Ze+/c7A/+z6jyd9dtr7e9ee417AfOcFszz/TMDYGYB8xyB2RWY5wYwc4LjuALK2B04GNgZ2BrYHFgHWDNZ4M/AD8DnwEfAW8CTwOvA8lFa6agAWAs4Ejg0bXyTyk18lYB4HHgE+KlynYGfdQ3A+sDZ6bdBx8p+A9yUft92tXZXAGwMXACcBqzdlXID1vkRuB24Fvi6rawuAFgE3Ap4+uMkreAM4L42QtsA4IY9iePaKNDBt/cDpwNV16IWgAOAe4FNO9hAF0t8CZwAPBNdrAYATf5uYLWosBHz/wacBGgRxRQF4FzgOggnUL8DrwAvAC8CHwN6dX+SEcPfVsA+wL7AXhUgmzOcB9xYikAEgKuAi0oXTnzvA3cki4l6bCPLYuBkYLug3KuBi0u+KQXgSuCSkgUTjwnMhclPtM3k1NH7fQ0QSajU+dKcziUAnJWSj9xa/u9mNb/LAON1l2TqfAVwTuAKqvstw5TIAXBsirOrFOzkO+BE4NEC3jYsRwD3AOsVLPIXcDzwwCDeYQDsl/Lw1QsEvQkcA3xYwNsFy7bAg6m4yq33K3AI8Fw/xkEAbAa8BuiIcqR3V8D3OcaO/9cCngD2LFhXB7wH8MVc3n4AGN9Fa++ChQ1ph6VStoC9cxb9gpViia4vAVq1IXkF9QPgZuDMAlXdvCcfLVHtCZwCHARsCXhPPwGeAu4E3i6Q3cti8aUllIDg3qxWBwKgwygpLrzrJirLAsrqS64HTgUGOdU/gdtSZbnSSWXkbAS8DGxToI97XNrw9VrAFoDObN3MIhYdov1egbCGxc0/BhxY+M3T6WpFQNg+gZCLDkarXVL3aUVKKxCaYE5BFdLso0WH5bIVW4RsfhjzI6T++oRcnSLAXsHljQWYP5vj58haoDjPTot5598YYvaDZHoddqvwCeroVcuRe75BAHZMIW+NzBcPAUfnVu3zv4Ct5HgCa7iR8wP8DevDqSc57NNfgIUCYPmYa2p8mjq7NU2HdxLIFfv4xyftWvGhlaUdZf3aMFoqAHryYQ3MP1L8NOzVkGGyaX9Hv7eeMNbXkCX1s8CqQz5eNu0ACF5tk7UYgNIrsLCngRE5kTZX4F1gp4iwxBu6AqVOUMdyVIUybZyg3+rVoxRygi4+jWHQFFkHGE2Nw2FQAKYxETJ5KqlJeq2jOhFykWlLhQ8H7PSW0g6AFV9VKtwIGXUxZLbp+GxQMaTZO2zxSkbqgE6KoQaE0nJYtK0Lor0/U2M7vY7Lm0Tls9R9shx2NB6hTsthBUcaIoLgCNzZ/iQo0hAxkdu/pCHiRiItsVfTaf5vWmLNSUaaopqtTdEPxmQG0aao1+35frr9F9vivjyxLZ5r3LjfVm3xBrCawcjlI/ALExmMNCDUjMacI3pSXYzGHLg475vIaKwBoXY4ami7q+I5izOJJSlkeucjpK5Fs8ycD5gr1B6dXZrodyY1Rou54/Gmq7xhn/G4A49cb2+ufiMdjzfCfCDhiZaMzCKn1pZ3LA8kGiWn7YmMIy/9RLRbHTbl3lPykZRDDOuHSdJEHkn1blgABGISz+ScNYTeBM09qagzG3TSemzb1ypU28MrtSKLLwG3sow+u/mXjK4AaBbWCkycjBajeCpri8xqtaY93xfgrgFohPhY2pccVoqWzJEEpldR3xo5+XXc5cuT6CQ6a1WjAqBXsDIccfU+l7cP4FURKMmNadr2BXqfyztSa5tJDgVhHABkT2GSDDMAJon+NMieWcA0nMIkdZhZwCTRnwbZ894C/gZQ9ibIrStxuwAAAABJRU5ErkJggg==);
    background-position: 4px center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: auto;
    padding-left: 24px;
    padding-right: 5px;
    margin-right: 0px;
    cursor: pointer;
}

MAIN DIV.interval > UL > LI.camera > SPAN {
    color: #000;
    cursor: pointer;
    width: auto;
}

MAIN DIV.interval > UL > LI.hidden {
    display: none;
}

/* xxxxx */

MAIN DIV.ticker {
    padding: var(--main-padding);
    border-bottom: var(--main-border);
}

MAIN DIV.ticker > DIV.currency {
    margin-bottom: calc(var(--main-padding) / 2);
}

MAIN DIV.ticker > DIV.currency > DIV.name {
    display: flex;
    align-items: center;
}

MAIN DIV.ticker > DIV.currency > DIV.name > IMG {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    margin-left: auto;
}

MAIN DIV.ticker > DIV.currency > DIV.name > H2 {
    font-size:2em;
    margin-right: 10px;
}

MAIN DIV.ticker > DIV.currency > DIV.name > SPAN {
    font-size: 1em;
    font-weight: bold;
    color: #666;
}

MAIN DIV.ticker > DIV.currency > DIV.price {
    font-size: 1.5em;
    font-weight: bold;
}

MAIN DIV.ticker > UL {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: calc(var(--main-padding) / 2);
}

/*MAIN DIV.ticker > UL > LI:nth-child(1) {
    grid-column: 1 / -1;
}*/

MAIN DIV.ticker > UL H4 {
    font-size: 1em;
}

/* xxxxx */

NAV {
    padding: var(--main-padding);
    border-bottom: var(--main-border);
}

NAV > UL {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: calc(var(--main-padding) / 2);
    row-gap: var(--main-padding);
}

NAV > UL > LI {
    position: relative;
    padding-left: 30px;;
}

NAV > UL > LI > A {
    text-decoration: none;
    color: #000;
}

NAV > UL > LI:hover {
    background-color: #F7F7F7;
    border-radius: 10px;;
}

NAV > UL > LI > A > DIV.fullname {
    font-weight: bold;;
}

NAV > UL > LI > A > DIV.fullname > SPAN {
    padding: 2px;
    font-size: 0.8em;
    font-weight: bold;
    color: #666;
    border: 1px solid #000;
    border-radius: 5px;
    margin-right: 10px;
    display: none;;
}

NAV > UL > LI > A > DIV.price {
    font-size: 0.8em;
}

NAV > UL > LI > A > IMG {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top:10px;
}

/* xxx */

MAIN > SECTION {
    padding: var(--main-padding);
}

MAIN > SECTION > H2,
MAIN > NAV > H2 {
   font-size: 1em;
   margin-bottom: calc(var(--main-padding) / 2);
}

MAIN > SECTION.about {
    font-size: 0.9em;
    line-height: 1.5em;
}

MAIN > SECTION.about > P {
    margin-bottom: calc(var(--main-padding) / 2);
}

MAIN > SECTION.about > P.disclaimer > SPAN {
    text-decoration: underline;
}

MAIN > SECTION.about > P.attribution {
    color: #333;
    font-size: 0.8em;
    line-height: 1.2em;;
}

MAIN > SECTION.about > P.disclaimer {
    color: #888;
    font-size: 0.7em;
    line-height: 1.2em;;
}