.tank-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    color: white;
    width: 100%;
}

.tank-widget-name {
    margin-right: auto;
    font-size: 1.25rem;
}

.tank-name {
    display: flex;
    top: 1vh;
    left: 1vh;
    font-size: 1rem;
}

.tank-max {
    font-size: 1rem;
    margin-top: 1vh;
}

.tank-wrapper {
    position: relative;
    width: 6vh;
/*width:15%;*/
max-width:8vh;
    height: 70%;
}


.tank-widget .tank-bar,
.pump-tank-widget .tank-bar,
.fuel-transfer-widget .tank-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5vh;
    overflow: hidden;
    border-radius: 500px;
}

.tank-widget .tank-fill,
.pump-tank-widget .tank-fill,
.fuel-transfer-widget .tank-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--tank-color, #00E5E2);
}

.tank-widget .tank-indicator,
.pump-tank-widget .tank-indicator,
.fuel-transfer-widget .tank-indicator {
    position: absolute;
    left: calc(100% + 1vh);
    transform: translateY(50%);
    background: rgba(0,0,0,0.5);
    padding: 0.2vh 0.4vh;
    border-radius: 1vh;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 1.25rem;
    white-space: nowrap;
}

.tank-widget .tank-indicator::before,
.pump-tank-widget .tank-indicator::before,
.fuel-transfer-widget .tank-indicator::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 1vh;
    border-style: solid;
    border-color: transparent rgba(0,0,0,0.6) transparent transparent;
}

.pump-tank-widget.flipped .tank-indicator {
    left: auto;
    right: calc(100% + 1vh);
}

.pump-tank-widget.flipped .tank-indicator::before {
    right: auto;
    left: 100%;
    border-color: transparent transparent transparent rgba(0,0,0,0.6);
}

.tank-widget .tank-calibrate-msg,
.pump-tank-widget .tank-calibrate-msg,
.fuel-transfer-widget .tank-calibrate-msg {
    position:absolute;
    top:50%;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2vh 0.4vh;
    border-radius: 1vh;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 70%;
    white-space: nowrap;
}

.widget-template.fuel-tank{
    width:40vmin;
    height:30vmin;
}

.template-panel .widget-template.fuel-tank {
    width: 40vmin;
    height: 40vmin;
}

/*.widget-template.fuel-tank.template-info {
    font-size: 150%;
}*/

.min-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4.5vh;
    height: 4.5vh;
    margin-top: -1.25vh; /* pozycjonowanie wzglêdem toru suwaka */
    background-color: var(--slider-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 0.2vh var(--slider-color), 0 0 0.6vh rgba(0, 0, 0, 1);
    pointer-events: all;
}
.min-range::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5vh;
    height: 1.5vh;
    background-color: var(--slider-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 0.2vh var(--slider-color), 0 0 0.6vh rgba(0, 0, 0, 1);
    pointer-events: all;
}


.quick-tank-icon {
    position: relative;
    box-sizing: border-box;
}

.quick-tank-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 500px;
    overflow: hidden;
    box-sizing: border-box;
}

.quick-tank-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--tank-color, #00E5E2);
}

.tank-quick-info {
    font-size: 75%;
    margin-top: 0.3vh;
    display: flex;
    align-items: center;
    gap: 0.6em;
    justify-content: flex-start;
    color: white;
    font-weight: 500;
}

.tank-quick-info .quick-tank-icon {
    display: inline-block;
    height: 1.5em;
    aspect-ratio: 10 / 40;
    width: auto;
    margin: 0 0.1em;
}

.page-quick-item .quick-tank-icon {
    display: inline-block;
    height: var(--quick-icon-height);
    aspect-ratio: 10 / 40;
    width: auto;
    margin: 0 0.1em;
}





/* === MEDIA === */

/* Mobile  */

@media (max-width: 699px) {
    .tank-widget-name {
        font-size: 0.95rem;
    }

    .tank-max {
        font-size: 0.85rem;
    }

    .tank-wrapper {
        height: 40vh;
    }
}

/* WVGA / WVGA-Narrow (720x480, 800x480) */

@media (min-width: 700px) and (max-width: 880px) {
}

/* WSVGA / XGA (1024x600, 1024x768) */

@media (min-width: 881px) and (max-width: 1150px) {
    .tank-widget-name {
        font-size: 0.95rem;
    }

    .tank-max {
        font-size: 0.85rem;
    }
}

/* WXGA / HD720 / SXGA (1280x720/800/1024) */

@media (min-width: 1151px) and (max-width: 1600px) {
    .tank-widget-name {
        font-size: 0.95rem;
    }

    .tank-max {
        font-size: 0.85rem;
    }
}

/* HD / WUXGA (1920x1080, 1920x1200) */

@media (min-width: 1601px) and (max-width: 2879px) {
    /* standard styles */
}

/* 4K (3840x2160) */

@media (min-width: 2880px) {

    .tank-widget-name {
        font-size: 2rem;
    }

    .tank-max {
        font-size: 1.75rem;
    }
}