/* =========================================================
   DS1812+
========================================================= */

.ds1812-wrapper {

    width: 440px;
    height: 210px;

    transform:
        scale(.29);

    transform-origin:
        center center;

    flex-shrink: 0;
}


.ds1812-nas {

    width: 440px;
    height: 210px;

    background:
        linear-gradient(
            145deg,
            #1e1e21,
            #111113
        );

    border-radius: 6px;

    padding:
        10px 14px 14px 14px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    position: relative;

    box-shadow:
        0 30px 60px rgba(0,0,0,.85),
        inset 0 1px 2px
        rgba(255,255,255,.05);

    border: 1px solid #28282d;

    font-family:
        'Segoe UI',
        sans-serif;
}


/* =========================================================
   型號
========================================================= */

.ds1812-nas .ds-model {

    position: absolute;

    right: 16px;
    bottom: 5px;

    color: #77777a;

    font-family:
        Arial,
        "Segoe UI",
        sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: .3px;

    line-height: 1;

    text-shadow:
        0 1px 1px #000;

    z-index: 20;

    pointer-events: none;
}


/* =========================================================
   控制面板
========================================================= */

.ds1812-nas .trapezoid-control-panel {

    position: absolute;

    top: 5px;

    left: 12px;
    right: 12px;

    height: 34px;

    box-sizing: border-box;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    background: transparent;

    z-index: 10;
}


/* =========================================================
   Synology
========================================================= */

.ds1812-nas .ds1812-brand {

    position: absolute;

    left: 3px;
    top: 4px;

    width: 67px;
    height: 18px;

    display: flex;

    align-items: center;

    justify-content: flex-start;
}

.ds1812-nas .brand-mark {

    color: #99999c;

    font-family:
        Arial,
        "Segoe UI",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: -.5px;

    text-shadow:
        0 1px 1px #000;

    white-space: nowrap;
}


/* =========================================================
   系統 LED
========================================================= */

.ds1812-nas .sys-led {

    position: absolute;

    top: 2px;

    width: 38px;
    height: 28px;

    display: flex;

    flex-direction: column;

    align-items: center;

    box-sizing: border-box;
}

.ds1812-nas .led-status {

    left:
        calc(50% - 118px);
}

.ds1812-nas .led-alert {

    left:
        calc(50% - 75px);
}

.ds1812-nas .led-lan1 {

    left:
        calc(50% + 33px);
}

.ds1812-nas .led-lan2 {

    left:
        calc(50% + 75px);
}


/* =========================================================
   LED
========================================================= */

.ds1812-nas .led {

    display: block;

    width: 5px;
    height: 5px;

    margin-top: 1px;

    border-radius: 50%;

    box-sizing: border-box;

    background: #171719;

    border:
        1px solid #080809;

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.08);
}

.ds1812-nas .status-green,
.ds1812-nas .lan-green {

    background: #48e66c;

    border-color: #197c34;

    box-shadow:
        0 0 3px
        rgba(72,230,108,.95),
        0 0 6px
        rgba(72,230,108,.55),
        inset 0 1px 1px
        rgba(255,255,255,.65);
}

.ds1812-nas .alert-off {

    background: #241616;

    border-color: #321313;

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.03);
}

.ds1812-nas .sys-led label {

    margin-top: 4px;

    color: #77777a;

    font-family:
        Arial,
        "Segoe UI",
        sans-serif;

    font-size: 5px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    text-shadow:
        0 1px 1px #000;
}


/* =========================================================
   電源按鈕
========================================================= */

.ds1812-nas .shield-power-btn {

    position: absolute;

    left: 50%;
    top: 1px;

    transform:
        translateX(-50%);

    width: 45px;
    height: 22px;

    box-sizing: border-box;

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #3b3b3e 0%,
            #303033 45%,
            #202023 100%
        );

    border:
        1px solid #0b0b0c;

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.10),
        inset 0 -2px 3px
        rgba(0,0,0,.65),
        0 1px 2px
        rgba(0,0,0,.8);

    display: flex;

    justify-content: center;

    align-items: center;
}

.ds1812-nas .shield-power-btn::before {

    content: "";

    position: absolute;

    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;

    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #353538,
            #252527
        );

    box-shadow:
        inset 0 1px 2px
        rgba(0,0,0,.7);
}

.ds1812-nas .power-blue-vertical-line {

    position: relative;

    z-index: 2;

    width: 2px;
    height: 10px;

    border-radius: 1px;

    background: #73dfff;

    box-shadow:
        0 0 3px #00bfff,
        0 0 6px
        rgba(0,191,255,.75);
}


/* =========================================================
   8 Bay
========================================================= */

.ds1812-nas .eight-bays-container {

    margin-top: 22px;

    flex: 1;

    display: flex;

    gap: 5px;
}

.ds1812-nas .hdd-bay-v {

    flex: 1;

    height: 100%;

    background: #0b0b0d;

    border:
        1px solid #1c1c1f;

    border-top:
        2px solid #161619;

    border-radius:
        3px 3px
        2px 2px;

    position: relative;

    box-shadow:
        inset 0 0 8px
        rgba(0,0,0,.9);

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================================
   HDD LED
========================================================= */

.ds1812-nas .triangle-led-window {

    width: 100%;
    height: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding-top: 2px;
}

.ds1812-nas .tri-led {

    width: 0;
    height: 0;

    border-left:
        3px solid transparent;

    border-right:
        3px solid transparent;

    border-top:
        5px solid #39ff14;

    filter:
        drop-shadow(
            0 0 3px #39ff14
        );

    animation:
        ds1812-hdd-flash
        1s
        infinite
        alternate;
}

.ds1812-nas
.hdd-bay-v:nth-child(2)
.tri-led {

    animation-delay: .2s;
    animation-duration: .8s;
}

.ds1812-nas
.hdd-bay-v:nth-child(3)
.tri-led {

    animation-delay: .5s;
    animation-duration: 1.2s;
}

.ds1812-nas
.hdd-bay-v:nth-child(4)
.tri-led {

    animation-delay: .1s;
    animation-duration: .6s;
}

.ds1812-nas
.hdd-bay-v:nth-child(5)
.tri-led {

    animation-delay: .7s;
    animation-duration: 1.4s;
}

.ds1812-nas
.hdd-bay-v:nth-child(6)
.tri-led {

    animation-delay: .3s;
    animation-duration: .9s;
}

.ds1812-nas
.hdd-bay-v:nth-child(7)
.tri-led {

    animation-delay: .6s;
    animation-duration: 1.1s;
}

.ds1812-nas
.hdd-bay-v:nth-child(8)
.tri-led {

    animation-delay: .4s;
    animation-duration: .7s;
}


/* =========================================================
   散熱孔
========================================================= */

.ds1812-nas .bay-mesh-pattern {

    width: 80%;

    flex: 1;

    margin-top: 4px;
    margin-bottom: 25px;

    background-image:
        radial-gradient(
            #151518 25%,
            transparent 25%
        );

    background-size:
        2px 4px;

    opacity: .5;
}


/* =========================================================
   鎖扣
========================================================= */

.ds1812-nas .bay-bottom-lock {

    width: 10px;
    height: 10px;

    background:
        linear-gradient(
            #25252a,
            #151518
        );

    border:
        1px solid #000;

    border-radius: 50%;

    position: absolute;

    bottom: 8px;

    box-shadow:
        0 1px 2px
        rgba(0,0,0,.6);
}


@keyframes ds1812-hdd-flash {

    0% {

        opacity: .2;

        filter:
            drop-shadow(
                0 0 1px #39ff14
            );
    }

    50% {

        opacity: 1;

        filter:
            drop-shadow(
                0 0 4px #39ff14
            );
    }

    100% {

        opacity: .6;
    }

}