.central {
    width: 95%;
}

.is-folded {
    display: none;
}

/** Tank layout */

/*
darker: #395682;
blue: #67b6f9
lighter: #e8f9fe
*/

.td-tank {
    background-color: #e8f9fe;

    padding: 10px;
    border-radius: 30px;

    border-width: 2px;
    border-style: solid;
    border-color: #395682;
}

.td-tank.is-warning {
    background-color: #ffe880;
}

.td-tank.is-danger {
    background-color: #ff3860;
}

[data-content].td-tank-message {
    padding-right: 2rem;
    width: 1.5rem;
    height: 1.5rem;

    background-image: url('/assets/images/icons8-warning-shield-filled-100.png');
    background-size: contain;
    background-repeat: no-repeat;
}

[data-content].td-tank-message::after {
    content: attr(data-content);
    display: block;
    position: absolute;

    padding: 1rem 2rem;
    white-space: nowrap;
    border-radius: 5px;
    font-size: .8rem;

    border-width: 1px;
    border-style: solid;
    border-color: #395682;

    z-index: 1;
    transform: scale(0);
    transition: transform ease-out 150ms;
}

.td-tank.is-danger [data-content].td-tank-message::after {
    background-color: #ff3860;
}

.td-tank.is-warning [data-content].td-tank-message::after {
    background-color: #ffe880;
}

[data-content].td-tank-message:hover::after {
    transform: scale(1);
}

.td-tank-type {
    text-align: right;
    font-size: 0.75rem;
}

.td-tank-oc::after {
    content:" ";
    width: 25px;
    height: 25px;
    background-image: url('/assets/images/opencircuit.png');
    background-size: contain;
    display: inline-block;
}

i.td-tank-oc::after {
    width: 20px;
    height: 20px;
}

.td-tank-ccr::after {
    content:" ";
    width: 25px;
    height: 25px;
    background-image: url('/assets/images/rebreather.png');
    background-size: cover;
    display: inline-block;
}

i.td-tank-ccr::after {
    width: 20px;
    height: 20px;
}

.td-tank-scr::after {
    content:" ";
    width: 25px;
    height: 25px;
    background-image: url('/assets/images/semicircuit.png');
    background-size: cover;
    display: inline-block;
}

i.td-tank-scr::after {
    width: 20px;
    height: 20px;
}

.td-tank-time {
    text-align: center;
    font-size: 0.7rem;
    font-style: italic;
}

.td-tank-depth {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.td-tank-depth::after {
    content: "m."
}

.td-tank-depth::before {
    content:" ";
    width: 20px; 
    height: 20px;
    background-image: url('/assets/images/depth.png');
    background-size: 20px 20px;
    display: inline-block;
}

.td-tank-volume {
    background-color: #67b6f9;

    padding: 10px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}


.td-tank-pressure {
    background-color: #67b6f9;

    padding: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.td-tank-burned {
    align-self: start;
    font-size: 0.75rem;
}

.td-tank-burned::after {
    content: " / " 
}
.td-tank-expanded {
    font-size: 0.75rem;
}

.td-tank-expanded::after {
    content: "l." 
}

.td-tank-gas {
    background-color: #67b6f9;

    border-radius: 20px;
    margin: 10px;
    padding: 10px;
}

.td-tank-title-min {
    color: white;
}

.td-tank-title-real {
    color: white;
}

.td-tank-title-max {
    color: white;
}

.td-tank-label {
    color: darkgreen;
    background-color: lightgreen;
    border-radius: 20px;
    border-style: solid;
    border-color: darkgreen;
    padding: 5px;
}

.td-tank-min {
    font-size: 0.75rem;
}

.td-tank-min::after {
    content: "%";
}

.td-tank-real {
 
}

.td-tank-max {
    font-size: 0.75rem;
}

.td-tank-max::after {
    content: "%";
}


.td-tank-advised {
    font-weight: bold;

}

i.td-tank-specs-toggle::after {
    width: 15px;
    height: 15px;
}

i.td-tank-specs-toggle::after {
    content:" ";
    width: 20px;
    height: 20px;
    background-image: url('/assets/images/opencircuit.png');
    background-size: cover;
    display: inline-block;
}