/*列表設定*/
/*
.ShowListSetFieldDiv { padding: 0px; background-color: #FFFFFF; }
.ShowListSetFieldDiv .Title { padding: 0px 8px; width: 100%; height: 40px; font-size: 15px; line-height: 40px; border-bottom: solid 1px #999999; font-weight: bolder; }
.ShowListSetFieldDiv .Content { padding: 5px 8px; overflow: auto; }
.ShowListSetFieldDiv .Content .SubTitle { padding: 3px 0px 7px; font-size: 13px; color: #555555; }
.ShowListSetFieldDiv .Content .SubContent { margin-bottom: 10px; }
.ShowListSetFieldDiv .Content .SubContent.CheckBoxDiv .CheckBox { display: block; float: none; clear: both; margin: 3px 0px; line-height: normal; }
.ShowListSetFieldDiv .Bottom { padding: 8px 8px; width: 100%; }
.ShowListSetFieldDiv .Bottom:after { float: none; clear: both; content: ''; display: block; height: 0; overflow: hidden; }
.ShowListSetFieldDiv .Bottom button[s="save"] { float: right; }
*/
:root {
    --DfBorderColor: #ffcb5b;
    --DfIconSize: 2.5rem;
    --DfIconColor: #FFFFFF;
}

#LightboxId {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    border: solid 3px var(--DfBorderColor);
    width: 0px;
    height: 0px;
    margin: 0px;
    transition: width .3s, height .3s, margin-left .3s, margin-top .3s;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}

#LightboxId a.Btn {
    display: flex;
    align-items: center;
}

#LightboxId a.Btn::before {
    display: flex;
    align-items: center;
    font-family: 'Material Symbols Outlined';
    font-size: var(--DfIconSize);
    color: var(--DfIconColor);
    line-height: 1;
    padding: 20px 0px;
    border-radius: 10px;
    background-color: rgba( 0,0,0,0.5 );
}

#LightboxId a.Prev {
    justify-content: flex-start;
    height: 100%;
    width: 34%;
    padding-left: 10px;
    float: left;
}
#LightboxId a.Prev::before {
    content: "\e5cb";
}

#LightboxId a.Next {
    justify-content: flex-end;
    height: 100%;
    width: 66%;
    padding-right: 10px;
    float: right;
}
#LightboxId a.Next::before {
    content: "\e5cc";
}

#LightboxId a.Close {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: -33px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
}
#LightboxId a.Close::before {
    content: "\e5cd";
    font-family: 'Material Symbols Outlined';
    font-size: var(--DfIconSize);
    color: var(--DfIconColor);
    line-height: 1;
    padding: 2px 2px;
    border-radius: 10px;
    background-color: rgba( 0,0,0,0.5 );
}

#LightboxId div.Title {
    position: absolute;
    left: 5px;
    bottom: 5px;
    font-size: 13px;
    padding: 8px 10px;
    background-color: rgb(255 255 255 / 50%);
    border-radius: 5px;
    color: #000000;
    display: inline-block;
}

.SysLightbox {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    border: solid 3px var(--DfBorderColor);
    transition: .5s;
}