/*** Global default style ***/
* {
    /* Prevent text selection */
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none;

    /* Default font */
    font-family:    'Oswald', sans-serif;

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

html {
    height:         100%;
    margin:         0;
}

body {
    /* Screen size */
    width:              calc(100vw);
    max-width:          100vh;
    height:             100%;

    background-color:   #B0DDFF; /* #92D2F2, #B0DDFF*/

    margin: auto;
}

/* ELEMENTS */
.widget {
    font-size:      clamp(1px, 4vw, 4vh);
    font-weight:    200;
    font-style:     normal;

    height:         100%;
    width:          100%;

    background-color:   #92D2F2; /* #92D2F2, #B0DDFF*/

    border-radius:  1vh;
    overflow:       hidden;

    align-content:  center;
    align-items:    center;
    text-align:     center;

    aspect-ratio:   1/1;

    position:       relative; /* allows absolute positioning of children */

    z-index:        0;
}

.widget.title {
    aspect-ratio:   auto;

/*    font-size:      8vw;
    font-weight:    200; */
    padding:        0vw;
}

.widget.graph {
    font-size:      2vh;

    aspect-ratio:   auto;
}

.widget-header {
    position:       absolute;
    top:            0%;
    width:          100%;

    padding-left:   1vw;
    padding-right:  1vw;

    z-index:        1;
}

.widget-footer {
    position:       absolute;
    bottom:         0%;
    width:          100%;

    padding-left:   1vw;
    padding-right:  1vw;

    z-index:        1;
}

.widget-value {
    font-size:      clamp(10px, 12vw, 12vh);
    font-weight:    400;
    font-style:     normal;

    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -53%);

    background:     none;
}

.widget-icon {
    font-size:      clamp(10px, 14vw, 14vh);
    color:          white;
    z-index:        -1;
}

.widget-canvas {
    display:        block;
    width:          100%;
    height:         100%;
    margin:         auto;
    background:     none;

    margin-top:     auto;
    margin-bottom:  auto;

    z-index:        -1;
}



/* FEATURES */
.stretch {
    flex-grow:          1;
    flex-shrink:        1;
    flex-basis:         min-content;

    min-height:         min-content;
    max-height:         min-content;
}

.truncate {
    white-space:        nowrap;
    overflow:           hidden;
    text-overflow:      ellipsis;
}

.hidden {
    visibility:         hidden;
}

.flex {
    display:            flex;
}

.flex--col {
    flex-direction:     column;
    align-items:        center

    min-width:          fit-content;
    min-height:         0;
}

.flex--row {
    flex-direction:     row;
    align-items:        center;
    justify-content:    center

    min-width:          0;
    min-height:         fit-content;
}

.gap--xsmall {
    gap:                5px;
}

.p--xsmall {
    padding:            5px;
}

/* flex--col */
.flex--col.flex--stretch-x {
    align-items:        stretch;
}
.flex--col.flex--stretch-x > * {
    flex:               initial;
    align-self:         stretch;
}
.flex--col.flex--stretch-y > * {
    flex:               1 1 0%;
    align-self:         initial;
}
.flex--col.flex--stretch {
    align-items:        stretch;
}
.flex--col.flex--stretch > * {
    flex:               1 1 0%;
}


/* flex--row */
.flex--row.flex--stretch-x > * {
    flex:               1 1 0%;
}
.flex--row.flex--stretch-y {
    align-items:        stretch;
    justify-content:    center;
}
.flex--row.flex--stretch-y > * {
    align-self:         stretch;
}
.flex--row.flex--stretch {
    align-items:        stretch;
}
.flex--row.flex--stretch > * {
    flex:               1 1 0%;
    align-self:         stretch;
}



.flex--row.flex--top {
    align-items:        flex-start;
}
.flex--col.flex--top {
    justify-content:    flex-start;
}

.flex--row.flex--bottom {
    align-items:        flex-end;
}
.flex--col.flex--bottom {
    justify-content:    flex-end;
}

.flex--row.flex--right {
    justify-content:    flex-end;
}
.flex--col.flex--right {
    align-items:        flex-end;
    justify-content:    center;
}

.flex--row.flex--left {
    justify-content:    flex-start;
}
.flex--col.flex--left {
    align-items:        flex-start;
    justify-content:    center;
}