.tab-onboard_logging {
    .info {
        margin: 0 0 10px 0;
        position: relative;
        margin-top: 10px;
        .progressLabel {
            position: absolute;
            width: 100%;
            height: 26px;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 24px;
            color: white;
            font-weight: bold;
        }
        dt {
            width: 120px;
            height: 20px;
            line-height: 20px;
            font-weight: bold;
        }
        dd {
            display: block;
            margin-left: 130px;
            height: 20px;
            line-height: 20px;
        }
    }
    .properties {
        margin-top: 10px;
    }
    .dataflash-info {
        overflow: hidden;
        dt {
            width: 12em;
            height: 20px;
            line-height: 20px;
            font-weight: bold;
        }
        dd {
            display: block;
            height: 20px;
            line-height: 20px;
        }
    }
    .speed {
        margin-top: 5px;
        width: 80px;
        border: 1px solid var(--surface-500);
    }
    .buttons {
        width: calc(100% - 20px);
        position: absolute;
        bottom: 10px;
    }
    .dataflash-progress {
        display: none;
    }
    .dataflash-contents {
        margin-top: 15px;
        margin-bottom: 26px;
        border: 1px solid var(--surface-500);
        background-color: var(--surface-300);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-radius: 6px;
        li {
            height: 26px;
            position: relative;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            div {
                position: absolute;
                top: 26px;
                margin-top: 4px;
                text-align: center;
                left: 0;
                right: 0;
                white-space: nowrap;
            }
        }
    }
    .sdcard-contents {
        margin-top: 15px;
        margin-bottom: 26px;
        border: 1px solid var(--surface-500);
        background-color: var(--surface-300);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-radius: 6px;
        li {
            height: 26px;
            position: relative;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            div {
                position: absolute;
                top: 26px;
                margin-top: 4px;
                text-align: center;
                left: 0;
                right: 0;
                white-space: nowrap;
            }
        }
    }
    .dataflash-used {
        background-color: var(--primary-500);
        border-radius: 4px;
    }
    .sdcard-other {
        background-color: var(--primary-500);
        border-radius: 4px;
    }
    .dataflash-free {
        direction: rtl;
    }
    .sdcard-free {
        direction: rtl;
    }
    progress {
        &::-webkit-progress-bar {
            background-color: var(--surface-500);
        }
        &::-webkit-progress-value {
            background-color: var(--primary-500);
            border-radius: 0 4px 4px 0;
        }
        border-radius: 4px;
        overflow: hidden;
        height: 24px;
        display: block;
        width: 100%;
        margin: 1em 0;
    }
    dialog {
        width: 40em;
        border-radius: 5px;
        .buttons {
            position: static;
            margin-top: 2em;
        }
        h3 {
            margin-bottom: 0.5em;
        }
    }
    .save-flash {
        .helpicon {
            margin: 4px 0 0 7px;
            display: inline-block;
        }
    }
    .require-msc-supported {
        display: none;
    }
    .require-msc-not-supported {
        display: inherit;
    }
    .line {
        clear: left;
    }
    .blackboxDebugModeText {
        margin-left: 7px !important;
    }
    .sdcard-status {
        padding-top: 4px;
        text-align: center;
    }
    .sdcard-icon {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        width: 90px;
        height: 90px;
        background-image: url(../../images/icons/cf_icon_sdcard.svg);
        background-position: 21px 20px;
        background-size: 50px 50px;
        background-repeat: no-repeat;
        background-color: #808080;
        border: 1px solid #888888;
        border-radius: 45px;
    }
}
.dataflash-confirm-erase {
    .dataflash-erase-progress {
        height: 125px;
        display: none;
        border-radius: 5px;
    }
}
.dataflash-buttons {
    display: inline-block;
}
.dataflash-confirm-erase.erasing {
    .dataflash-erase-progress {
        display: block;
    }
    h3 {
        display: none;
    }
    .erase-flash-confirm {
        display: none;
    }
    .dataflash-confirm-erase-note {
        display: none;
    }
}
.dataflash-saving {
    .dataflash-saving-after {
        display: none;
    }
}
.dataflash-saving.done {
    .dataflash-saving-before {
        display: none;
    }
    .dataflash-saving-after {
        display: block;
    }
}
.require-dataflash-present {
    display: none;
}
.require-dataflash-supported {
    display: none;
}
.require-sdcard-ready {
    display: none;
}
.require-sdcard-supported {
    display: none;
}
.require-blackbox-supported {
    display: none;
}
.require-blackbox-maybe-supported {
    display: none;
}
.require-blackbox-unsupported {
    display: none;
}
.require-blackbox-config-supported {
    display: none;
}
.tab-onboard_logging.dataflash-present {
    .require-dataflash-not-present {
        display: none;
    }
    .require-dataflash-present {
        display: block;
    }
}
.tab-onboard_logging.dataflash-supported {
    .require-dataflash-unsupported {
        display: none;
    }
    .require-dataflash-supported {
        display: block;
    }
}
.tab-onboard_logging.sdcard-supported {
    .require-sdcard-unsupported {
        display: none;
    }
    .require-sdcard-supported {
        display: block;
    }
}
.tab-onboard_logging.blackbox-config-supported {
    .require-blackbox-config-unsupported {
        display: none;
    }
    .require-blackbox-config-supported {
        display: block;
    }
}
.tab-onboard_logging.sdcard-ready {
    .require-sdcard-ready {
        display: block;
    }
    .sdcard-icon {
        background-color: #56ac1d;
        border: 1px solid #5bbb1b;
    }
}
.tab-onboard_logging.blackbox-supported {
    .require-blackbox-supported {
        display: inherit;
    }
}
.tab-onboard_logging.blackbox-maybe-supported {
    .require-blackbox-maybe-supported {
        display: block;
    }
}
.tab-onboard_logging.blackbox-unsupported {
    .require-blackbox-unsupported {
        display: block;
    }
}
.require-no-dataflash {
    display: block;
}
.tab-onboard_logging.supported {
    .require-no-dataflash {
        display: none;
    }
}
.tab-onboard_logging.msc-supported {
    .require-msc-supported {
        display: inherit;
    }
    .require-msc-not-supported {
        display: none;
    }
}
.require-msc-not-ready {
    display: none;
}
.tab-onboard_logging.msc-not-ready {
    .require-msc-not-ready {
        display: block;
    }
}
.tab-onboard_logging.sdcard-error {
    .sdcard-icon {
        background-color: #e60000;
        border: 1px solid #fe0000;
    }
}
.tab-onboard_logging.sdcard-initializing {
    .sdcard-icon {
        background-color: #64a5f6;
        border: 1px solid #68a7ff;
    }
}
