/*Userinitial*/
.adminset table tr td:first-child.userinitial-list {
    padding-right: 0;
}

.userinitial-list ul {
    margin-bottom: 0px;
    max-height: 120px;
    overflow: auto;
    text-align: left;
    padding: 0 10px;
}

    .userinitial-list ul li:first-child {
        border-top: 0;
    }

    .userinitial-list ul li {
        border-top: 1px solid #dddddd;
        padding: 5px 0;
    }

        .userinitial-list ul li .radio {
            width: 100%;
        }

#fhdsetup .userinitial-list ul li label {
    padding: 0px;
    width: 100%;
    display: inline-block;
}
/*Login---------------------------*/
.login-btn {
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    margin: 10px 12px 0 0;
}

.account-name {
    margin: 16px 17px 0 0;
}

.SocialLoginBtn a {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    cursor: pointer;
    border-radius: 15px;
    opacity: 0.8;
    vertical-align: middle;
    position: relative;
}

    .SocialLoginBtn a:hover {
        opacity: 1;
        text-decoration: none;
    }

    .SocialLoginBtn a:after {
        content: "";
        background: rgba(0, 0, 0, 0.22);
        width: 38px;
        height: 38px;
        position: absolute;
        border-radius: 50%;
        top: 0px;
        left: 0px;
        z-index: -6;
        opacity: 0;
        transition: all 0.2s cubic-bezier(0.39, 0.58, 0.57, 1);
    }

    .SocialLoginBtn a:hover:after {
        opacity: 1;
    }

    .SocialLoginBtn a i {
        width: 35px;
        height: 35px;
        vertical-align: middle;
        display: table-cell;
        border-radius: 50%;
        color: white;
        font-size: 17px;
    }
/*選單Icon---------------------------*/
/*背景icon*/
.Menu-bgicon-01 {
    background: url(../../images/Menu/MenuIcon-bg01.png);
}

.Menu-bgicon-02 {
    background: url(../../images/Menu/MenuIcon-bg02.png);
}

.Menu-bgicon-03 {
    background: url(../../images/Menu/MenuIcon-bg03.png);
}

.Menu-bgicon-04 {
    background: url(../../images/Menu/MenuIcon-bg04.png);
}

.Menu-bgicon-05 {
    background: url(../../images/Menu/MenuIcon-bg05.png);
}
/*index功能icon*/
.Menu-Icon-Setting-On {
    background: url(../../images/Menu/Menu-Icon-Setting-On.png); /*position:relative;*/
}

.Menu-Icon-XBMC-On {
    background: url(../../images/Menu/Menu-Icon-XBMC-On.png);
}

.Menu-Icon-File-On {
    background: url(../../images/Menu/Menu-Icon-File-On.png);
}

.Menu-Icon-Weather-On {
    background: url(../../images/Menu/Menu-Icon-Weather-On.png);
}

.Menu-Icon-DVD-On {
    background: url(../../images/Menu/Menu-Icon-DVD-On.png);
}

.Menu-Icon-Memo-On {
    background: url(../../images/Menu/Menu-Icon-Memo-On.png);
}

.Menu-Icon-App-On {
    background: url(../../images/Menu/Menu-Icon-App-On.png);
}

.Menu-Icon-3Party-On {
    background: url(../../images/Menu/Menu-icon-3Party-On.png);
}

.Menu-Icon-3Party-Off {
    background: url(../../images/Menu/Menu-icon-3Party-Off.png);
}

/*SettingMain功能icon*/
.Menu-Icon-AboutPN-On {
    background: url(../../images/Menu/Menu-Icon-AboutPN-On.png);
}

.Menu-Icon-User-On {
    background: url(../../images/Menu/Menu-Icon-User-On.png);
}

.Menu-Icon-HD-On {
    background: url(../../images/Menu/Menu-Icon-HD-On.png);
}

.Menu-Icon-Network-On {
    background: url(../../images/Menu/Menu-Icon-Network-On.png);
}

.Menu-Icon-Backup-On {
    background: url(../../images/Menu/Menu-Icon-Backup-On.png);
}

.Menu-icon-PSet-On {
    background: url(../../images/Menu/Menu-icon-PSet-On.png);
}

.Menu-Icon-AboutPN-Off {
    background: url(../../images/Menu/Menu-Icon-AboutPN-Off.png);
}

.Menu-Icon-User-Off {
    background: url(../../images/Menu/Menu-Icon-User-Off.png);
}

.Menu-Icon-HD-Off {
    background: url(../../images/Menu/Menu-Icon-HD-Off.png);
}

.Menu-Icon-Network-Off {
    background: url(../../images/Menu/Menu-Icon-Network-Off.png);
}

.Menu-icon-PSet-Off {
    background: url(../../images/Menu/Menu-icon-PSet-Off.png);
}

.Menu-Icon-Memo-Off {
    background: url(../../images/Menu/Menu-Icon-Memo-Off.png);
}
/*---------------------------設定頁面樣式---------------------------*/
.ContentRight .VersionWrap, .ContentRight .SystemResetWrap, .ContentRight .ControlPanelWrap {
    max-width: 660px;
    height: 300px;
}

.ContentRight p {
    font-size: inherit;
    margin: 0;
}

.VersionWrap {
    padding: 20px 0 62px 180px;
    background: url(../../images/Management/version-bg.png) 1px 28px no-repeat;
}

.SystemResetWrap {
    padding: 0 0 130px 180px;
    background: url(../../images/Management/reset-bg.png) 1px 28px no-repeat;
}

.SystemBackupWrap {
    padding: 0 0 62px 180px;
    background: url(../../images/Management/cloudbackup-bg.png) 1px 28px no-repeat;
}

.ControlPanelWrap {
    padding: 40px 0 0 180px;
    background: url(../../images/Management/ControlPanel-bg.png) 1px 28px no-repeat;
}

.VersionWrap li, .SystemResetWrap li, .SystemBackupWrap li {
    padding: 20px 0 0 0;
}

    .SystemResetWrap li p {
        line-height: 25px;
    }
/*IPManage*/
.IPOn:before, .IPOff:before {
    font: normal normal normal 14px/1 FontAwesome;
    padding: 0 10px 0 0;
    font-size: 20px;
}

.IPOn:before {
    content: "\f00c";
    color: forestgreen;
}

.IPOff:before {
    content: "\f00d";
    color: brown;
}

.NetworkSet h3 {
    font-size: 18px;
    color: #6DABDD;
    margin-bottom: 20px;
}

.NetworkSet1Step {
    margin: 20px 0 0 50px;
    letter-spacing: 1px;
}

    .NetworkSet1Step li, .NetworkSet2Step li {
        padding: 5px 0;
    }

.NetworkSet2Step span {
    min-width: 100px;
    display: inline-block;
}

.IPManage .form-control {
    width: 75px;
    display: inline-block;
}
/*DDNSManage*/
.DDNS-info {
    min-height: 130px;
    margin: 0 5%;
    width: 90%;
}

    .DDNS-info li {
        min-height: 34px;
    }

        .DDNS-info li p {
            vertical-align: middle;
            margin: 10px 0;
            padding-left: 0;
        }
.DDNS-IPinfo {
    margin: 0 5%;
    width: 90%;
}

    .DDNS-IPinfo li:first-child {
        min-height: 34px;
    }
/*WifiManage*/
.share-wifi .wifi-name, .share-wifi .wifi-psw {
    min-width: 180px;
    display: inline-block;
}

.share-wifi .panel-heading ul li, .link-to-wifi .panel-heading ul li {
    display: inline-block;
    height: 30px;
    vertical-align: middle;
}

    .share-wifi .panel-heading ul li:first-child, .link-to-wifi .panel-heading ul li:first-child {
        line-height: 30px;
    }

.select-ssid {
    max-height: 200px;
    overflow: auto;
}

    .select-ssid li {
        cursor: pointer;
        padding: 5px;
        border-bottom: 1px solid #ececec;
    }

        .select-ssid li:hover {
            background: #ececec;
        }
/*switch開關*/
input[type="checkbox"] + label.onoffswitch-label span {
    height: 30px;
    width: 30px;
    border-radius: 10px;
}

.onoffswitch {
    position: relative;
    width: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 auto;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    /*border: 2px solid #A9DCBA;*/
    margin: auto !important;
    border-radius: 10px;
}

.onoffswitch-inner {
    display: block;
    width: 200% !important;
    height: auto !important;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:after {
        content: "Off";
    }

    .onoffswitch-inner:before {
        content: "On";
    }

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        padding: 0;
        font-size: 14px;
        color: white;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        padding: 5px 10px;
        background-color: #5CBF83;
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        padding: 5px 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(50, 50, 50, 0.4);
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(50, 50, 50, 0.4);
        box-shadow: inset 0px 0px 10px 0px rgba(50, 50, 50, 0.4);
    }

.onoffswitch-switch {
    display: block;
    width: 22px;
    background: #FFFFFF;
    border: 1px solid #B8B8B8;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 70px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
    background: #fff !important;
}
/*span.onoffswitch-switch:before {
    content: "\f0c9";
    font: normal normal normal 14px/1 FontAwesome;
    padding: 7px 8px;
    display: block;
    color: #d2d2d2;
}*/
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    height: auto !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}
/*----------使用者管理-----------*/
/*Btn寬度---------*/
#UserMain .GreenBtn, #GroupMain .GreenBtn, #UserAuthority .GreenBtn, #GroupAuthority .GreenBtn {
    width: 138px;
}

.UserPage .Loading_Div {
    position: absolute;
    left: 45%;
    top: 55%;
    margin: -35px 0 0 -35px;
}
/*------Checkbox樣式-------*/
.UserPage input[type="checkbox"], .ScreenPopupBG input[type="checkbox"], #FileManage input[type="checkbox"] {
    display: none;
}

    .UserPage input[type="checkbox"] + label, .ScreenPopupBG input[type="checkbox"] + label, #FileManage input[type="checkbox"] + label {
        margin: 0 5px;
    }

        .UserPage input[type="checkbox"] + label span, .ScreenPopupBG input[type="checkbox"] + label span, #FileManage input[type="checkbox"] + label span {
            display: inline-block;
            width: 20px;
            height: 21px;
            vertical-align: middle;
            background: url(../../images/Common/table-checkbox.png) left top no-repeat;
            cursor: pointer;
        }

    .UserPage input[type="checkbox"]:checked + label span, .ScreenPopupBG input[type="checkbox"]:checked + label span, #FileManage input[type="checkbox"]:checked + label span {
        background: url(../../images/Common/table-checkbox.png) -20px top no-repeat;
    }
/*權限燈*/
.System-On {
    background: url(../../images/Management/SystemBtn-on-bg.png) no-repeat 1px 0px !important;
}

.System-Off {
    background: url(../../images/Management/SystemBtn-off-bg.png) no-repeat 1px 0px;
}

.Network-On {
    background: url(../../images/Management/NetworkBtn-on-bg.png) no-repeat 1px 0px !important;
}

.Network-Off {
    background: url(../../images/Management/NetworkBtn-off-bg.png) no-repeat 1px 0px;
}

.User-On {
    background: url(../../images/Management/UserBtn-on-bg.png) no-repeat 1px 0px !important;
}

.User-Off {
    background: url(../../images/Management/UserBtn-off-bg.png) no-repeat 1px 0px;
}

.HD-On {
    background: url(../../images/Management/HDBtn-on-bg.png) no-repeat 1px 0px !important;
}

.HD-Off {
    background: url(../../images/Management/HDBtn-off-bg.png) no-repeat 1px 0px;
}

.GroupTip {
    background: url(../../images/Management/GroupTip-Btn-bg.png) no-repeat 1px 0px;
}

.AuthorityBtnWrap input {
    border: none;
    width: 21px;
    height: 21px;
    margin: 0 10px 0 0;
}
/*-------------------檔案管理---------------------*/
.dragitem {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px;
}

tr.File-selected-hover, tr.File-selected {
    background-color: lightyellow !important;
    border-bottom: 1px solid #e5e5e5;
}

tr.File-dragdrop-hover {
    background-color: silver !important;
    border-bottom: 1px solid #e5e5e5;
}

.FileLeft {
    width: 290px;
    /*min-height:840px;*/
    min-height: 670px;
    float: left;
    border-right: 1px solid #ccc;
}
/*最左邊平台頁籤*/
.FileList {
    margin-bottom: 0;
    width: 120px;
    float: left;
    height: 735px;
    border-right: 1px solid #ccc;
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,0.99) 1%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(1%,rgba(238,238,238,0.99)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,0.99) 1%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,0.99) 1%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,0.99) 1%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

    .FileList li:hover {
        cursor: pointer;
    }
    /*2016-03new*/
    .FileList > span {
        color: black;
    }

    .FileList i {
        margin-right: 4px;
        color: #636363;
    }

    .FileList .space-folder .space-folder-focus i {
        color: #5C9093;
    }

.spacetab {
    background: #D2D2D2;
}

    .spacetab .fa-caret-left {
        position: absolute;
        left: 112px;
        font-size: 19px;
        color: #A5A5A5;
    }

.spaceFocus {
}

    .spaceFocus .fa-caret-left {
        left: 114px;
        color: white;
    }

.spacetab > span {
    padding: 10px 0 10px 7px;
    display: block;
    color: white;
    background: #A5A5A5;
}

    .spacetab > span:hover {
        background: #595959;
    }

    .spacetab > span i {
        color: white;
    }

.spaceFocus > span, .spaceFocus > span:hover {
    background: #595959;
}

.space-folder {
}

.space-member-span {
    padding: 2px 6px;
    margin: 5px;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
}

.space-folder li {
    padding: 10px 0 10px 8px;
    background: white;
}

    .space-folder li:hover, .space-folder .space-folder-focus {
        background: #D9EEEF !important;
        border-left: 4px solid #4E8486;
        padding-left: 4px;
    }
/*檔案管理右區域*/
.FileRight {
    width: 70%;
    padding: 15px;
    /*min-height: 900px;*/
    min-height: 820px;
    float: left;
    min-width: 590px;
    margin-bottom: 50px;
    padding-bottom: 40px;
}
/*檔案任務視窗*/
#uploadDiv {
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: white;
    z-index: 1000;
    border: 1px #ccc solid;
}

.FileNormalBox, .MoveFile, .FileDownloadBox {
    position: absolute;
    background-color: white;
    z-index: 1000;
    text-align: center;
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.56);
    /*width: 250px;*/
}

.FileDownloadBox {
    width: 330px;
}

    .FileDownloadBox p {
        float: left;
        margin: 5px 0 0 16px;
    }

    .FileDownloadBox li img {
        width: 26px;
        float: left;
    }

    .FileDownloadBox li #Process {
        width: 100px;
        min-width: 30px;
        height: 15px;
        background: #CFE6FA;
        margin: 5px 0px;
        float: left;
    }

    .FileDownloadBox li button {
        float: right;
    }

.FileNormalBox li {
    padding: 5px 0px;
}

.FileNormalBox input {
    width: 200px;
}

.MoveFile {
    padding: 0;
}

    .MoveFile li {
        cursor: pointer;
        padding: 10px 20px;
        text-align: center;
        border-bottom: 1px solid #ccc; /* width: 100px; */
    }

        .MoveFile li:hover {
            background: #e5e5e5;
        }

.detail {
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.56);
    position: absolute;
    z-index: 300;
    border-radius: 5px;
    font-size: 14px;
}

    .detail ul li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
/*---------------Popup視窗--------------------*/
#PopupContent .TableWrap td {
    padding: 9px 0 9px 12px;
}
/*訊息Popup視窗*/
#MsgPopup .PopWrap {
    width: 300px;
    height: 200px;
    margin: -100px 0 0 -150px;
    background: #fff; /*border:1px solid #bbb;*/
}

#Weather_Popup .PopWrap {
    width: 400px;
    height: 300px;
    margin: -150px 0 0 -200px;
    background: #fff; /*border:1px solid #bbb;*/
}

#MsgPopup .PopupBtnWrap {
    left: 0;
}

    #MsgPopup .PopupBtnWrap ul {
        left: 25%;
        position: relative;
        width: 100%;
    }

#MsgPopup .PopupCloseBtn {
    position: relative;
    left: 95%;
    top: -22px;
}

#Weather_Popup .PopupBtnWrap {
    left: 30%;
}

#Weather_Popup .PopupCloseBtn {
    left: 92%;
}

#PowerNASCenter_Popup .PopupCloseBtn, #XBMC_Popup .PopupCloseBtn {
    left: 96%;
}

.WTitle {
    padding: 10px;
    margin: 0 0 10px 0;
    text-align: center;
    width: 303px;
    border-bottom: 1px #ccc solid;
}

.WTable {
    display: table;
    width: auto;
    min-height: 0px;
    max-height: none;
    height: 130px;
    margin: 20px auto 0 auto;
}

    .WTable td {
        vertical-align: middle;
        height: 51px;
    }

#LocationSelect div.selectBox {
    z-index: 500;
}

#LocationSelect .selectOptions {
    display: none;
    max-height: 111px !important;
    overflow: auto !important;
    width: 100px;
    padding: 0 0 6px 0px !important;
}

#LocationSelect .selectOption {
    padding: 6px 0px 6px 24px;
}

#LocationSelect .selected {
    width: 83px !important;
}

#LocationSelect, #TemperatureSelect {
    text-align: left;
}

    #TemperatureSelect .selectOption {
        padding: 6px 18px 6px 17px !important;
    }

    #TemperatureSelect .selected {
        width: 83px !important;
    }

.selectArrow {
    cursor: pointer;
}
/*使用者與群組Popup視窗*/
#UserPopup .PopWrap {
    width: 720px;
    height: 580px;
    margin: -290px 0 0 -360px;
    background: #fff;
    font-size: 15px;
}

#UserPopup .PopupCloseBtn {
    position: relative;
    left: 96%;
}

#UserPopup .PopupBtnWrap {
    position: absolute;
    bottom: 10%;
    left: 37%;
    z-index: 200;
}

    #UserPopup .PopupBtnWrap button {
        width: 120px;
    }

.UserPopup-bg {
    /*background: url(../../images/Management/UserPopup-bg.png) 0px -35px;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;*/
}

#UserPopup #AddUser li {
    margin: 20px auto 20px auto;
    text-align: center;
}

    #UserPopup #AddUser li input {
        padding: 6px 10px;
        font-size: 15px;
        border-radius: 4px;
        border: 1px solid #ccc;
        width: 177px;
    }

.UserStep01Btn button {
    width: 178px !important;
    margin: 0;
}

    .UserStep01Btn button:active {
        margin: 2px 0 0 0;
    }

.AddUser-bg {
    margin: 40px auto 0 auto;
    background: url(../../images/Management/UserPopup-bg.png) 0px -67px no-repeat;
    width: 100%;
    height: 100%;
    padding: 30px 0 330px 0;
}

.EditUser-bg {
    margin: 40px auto 0 auto;
    background: url(../../images/Management/UserPopup-bg2.png) 0px -67px no-repeat;
    width: 100%;
    height: 100%;
    padding: 30px 0 330px 0;
}

.PasswdWarring {
    position: absolute;
    right: 70px;
    top: 157px;
    z-index: 999;
    width: 140px;
    line-height: 25px;
}

#ChooseGroup .TableWrap {
    width: 90%;
    height: 100%;
    margin: 18px auto;
}

    #ChooseGroup .TableWrap table tbody tr {
        width: 49.5%;
        display: inline-block;
        border-bottom: 1px solid #8BBEC5;
        min-height: 39px;
        vertical-align: middle;
    }

    #ChooseGroup .TableWrap tr td:last-child {
        border-width: 0px 0px 0px 0px;
        text-align: left;
    }

#ChooseGroup .TableOptionWrap {
    border: 0px;
}

#ChooseGroup .TableTopOptionWrap {
    padding: 0px 0 40px 0;
}

#ChooseGroup .TableOptionBtm {
    float: right;
    padding: 10px 10px 0 0;
    width: 28%;
}

#AddUserFinal table {
    width: 60%;
    margin: 70px auto;
    border: 1px solid #ccc;
    border-width: 1px 1px 0 1px;
}

#AddUserFinal thead {
    background: #BAD8DA;
}

#AddUserFinal td, #AddUserFinal th {
    border: 1px solid #ccc;
    border-width: 0px 1px 1px 0px;
    padding: 10px;
    line-height: 25px;
}

#AddUserFinal .tdTitle {
    width: 23%;
}

#AddUserFinal .Checktd {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    border-width: 0 0 1px 0;
    max-height: 190px;
}

    #AddUserFinal .Checktd span {
        background: #E2F5F4;
        padding: 1px 10px;
        margin: 0 9px 10px 0;
        display: inline-block;
        border-radius: 11px;
    }

.noGroup-BG {
    background: url(../../images/Management/noGroup-bg.png) 0px 0px;
}

.noUser-BG {
    background: url(../../images/Management/noUser-bg.png) 0px 0px;
}

.UserPage #Warring {
    position: absolute;
    top: 146px;
    width: 140px;
    line-height: 23px;
    left: 70px;
    z-index: 205;
}
/*UserQuota.php*/
.moreSearchMode {
    padding: 0 0 10px 20px;
    /*border-bottom: 1px solid #E9F7F7;*/
}

.SearchContent {
    background: #E9F7F7;
    padding: 0 0 0 20px;
}

    .SearchContent ul {
        padding: 20px 0 47px 0;
    }

        .SearchContent ul li {
            padding: 0 5px 0 0;
            /*height:30px;*/
        }

.Quota-header {
    border: 4px solid #BAD8DA;
    width: 100%;
    text-align: center;
    height: 35px;
    font-size: 15px;
    margin-bottom: 0px;
}

    .Quota-header li {
        background: #BAD8DA;
        padding: 5px 0;
        height: 30px;
    }

.QuotaMain p {
    margin: 0;
}

.QuotaMain input[type=radio].css-checkbox {
    display: none;
}

    .QuotaMain input[type=radio].css-checkbox + label.css-label {
        padding-left: 30px;
        height: 24px;
        display: inline-block;
        line-height: 24px;
        background-repeat: no-repeat;
        background-position: 0 0;
        /*	font-size:24px;*/
        vertical-align: middle;
        cursor: pointer;
    }

.QuotaMain input[type=range] {
    border: 1px solid #5E787E;
    background: #91a7ac;
    height: 10px;
    float: left;
}

.QuotaMain .TableSearchOption input[type=range] {
    /*required for proper track sizing in FF*/
    width: 151px;
    margin: 0;
}

    .QuotaMain .TableSearchOption input[type=range]::-webkit-slider-runnable-track {
        width: 200px;
    }

    .QuotaMain .TableSearchOption input[type=range]::-ms-track {
        width: 200px;
    }

.QuotaMain td input[type=range] {
    /*required for proper track sizing in FF*/
    width: 190px;
    margin: 0;
}

    .QuotaMain td input[type=range]::-webkit-slider-runnable-track {
        width: 190px;
    }

    .QuotaMain td input[type=range]::-ms-track {
        width: 190px;
    }

.QuotaMain input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -24px;
}

.QuotaMain label.css-label {
    background-image: url(../../images/Common/cssCheckbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.Quota-Tip1 {
    background: url(../../images/Management/User-Quota-icon-01.png) no-repeat 1px 0px;
}

.Quota-Tip2 {
    background: url(../../images/Management/User-Quota-icon-02.png) no-repeat 1px 0px;
}

.QuotaInputMass {
    height: 23px;
}

.QuotaMain .FlatBtn {
    border-radius: 2px;
    padding: 4px 9px;
}

.QuotaMain .TableSearchOption {
    padding: 20px 0px 20px 0px;
}

.QuotaOnceSet {
    padding: 10px 0 0 20px;
    /*border-top: 1px solid #E9F7F7;*/
}

    .QuotaOnceSet li {
        padding: 0 5px 0 0;
        /*height:42px;*/
    }

.QuotaMain .TableWrap {
    height: 377px;
    overflow: auto;
}

.QuotaSelect p {
    display: inline-block;
    padding: 2px 5px 0px 25px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    background-image: url(../../images/Management/Quota-select-arrow.png);
    background-repeat: no-repeat;
    border-radius: 2px;
    border: 1px solid #ccc;
}

.UserQuotaPCT p {
    line-height: 15px;
}

.drop_list {
    background: #ffffff;
    position: absolute;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 14px
}

    .drop_list li {
        border-radius: 2px;
        padding: 5px 10px;
        border-bottom: 1px dashed #A5A5A5;
    }

        .drop_list li:hover {
            background: #ccc;
        }

.setting-focus {
    z-index: 300;
    position: relative;
}

.UserQuotaWarp {
    width: 280px;
    margin: 0 auto;
}

.UserQuotaPCT {
    width: 50%;
}

.UserQuotaPCT-S {
    background: rgb(133, 182, 133);
}

.UserQuotaPCT-M {
    background: rgb(232, 204, 144);
}

.UserQuotaPCT-L {
    background: rgb(213, 147, 147);
}

.EditArea {
    margin: 0 auto;
    width: 200px;
}
/*.EditArea li{
	height:20px;
}
*/
.setting-focus {
    z-index: 300;
    position: relative;
}
/*SocialMain*/
.SocialCheckIcon {
    position: absolute;
    padding: 10px;
}

.SocialCheckIcon {
    padding: 20px 0px 0px 10px;
}

    .SocialCheckIcon li {
        float: left;
    }

    .SocialCheckIcon li {
        padding: 0 10px 0 0
    }

.SocialIcon li img {
    cursor: pointer;
}

.SocialPortrait img {
    width: 45px;
    height: 45px;
    border-radius: 25px;
    border: 2px solid #BAD8DA;
    vertical-align: middle;
    background: #BAD8DA;
}

.SocialCheckIcon li span, .SocialAgree {
    background: cadetblue;
    color: #fff;
    border-radius: 18px;
    border: none;
    padding: 3px 8px;
    cursor: context-menu;
    margin: 0 9px 0 0;
}

.SocialMain .onoffswitch {
    width: 50px;
    margin: 0 0 0 60px;
}

.SocialMain .onoffswitch-switch {
    right: 36px;
    display: none;
}

.onoffswitch-inner:after {
    /* content: "關閉"; */
    padding-right: 0px;
    text-align: center;
}

.SocialMain .onoffswitch-inner:before {
    /* content: "開啟"; */
    padding-left: 0px;
}

.SocialPassBtn {
    margin: 0 0 0 18px;
}

    .SocialPassBtn li {
        float: left;
        margin: 0 0 0 8px;
    }

.user-verify-toggle {
    margin-bottom: 0;
}

    .user-verify-toggle li {
        display: inline-block;
        margin: 5px 0;
    }

        .user-verify-toggle li span {
            cursor: default;
        }

.FileEdit-On, .FileEdit-Off, .wUser-On, .wUser-Off {
    width: 25px;
    height: 24px;
    border: 0;
    cursor: pointer;
}

.FileEdit-On {
    background: url(../../images/Personal/FileEdit-on-bg.png) no-repeat 1px 0px !important;
}

.FileEdit-Off {
    background: url(../../images/Personal/FileEdit-off-bg.png) no-repeat 1px 0px;
}

.wUser-On {
    background: url(../../images/Personal/wUser-on-bg.png) no-repeat 1px 0px !important;
}

.wUser-Off {
    background: url(../../images/Personal/wUser-off-bg.png) no-repeat 1px 0px;
}
/*-------------其他Popup視窗------------------*/
#XBMC_Popup #PopupContent, #DVD_Popup #PopupContent, #PowerNASCenter_Popup #PopupContent {
    width: 606px;
    overflow: hidden;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -303px;
}

#XBMC_Popup .PopWrap, #DVD_Popup .PopWrap, #PowerNASCenter_Popup .PopWrap {
    background: #DFECEB;
}

.XBMC-Step01 {
    background: url(../../images/Management/XBMC-Step01.jpg) 0px 0px no-repeat;
}

.XBMC-Step02 {
    background: url(../../images/Management/XBMC-Step02.jpg) 0px 0px no-repeat;
}

#XBMC_Popup .TipBox p, #DVD_Popup .TipBox p, #Backup_Popup .TipBox p, .WinAppTip p, .AndroidAppTip p {
    position: relative;
    top: 310px;
    width: 600px;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    background: cadetblue;
    color: white;
    text-align: center;
}

.DVD-Step01 {
    background: url(../../images/Management/DVD-Step01.jpg) 0px 0px no-repeat;
}

.DVD-Step02 {
    background: url(../../images/Management/DVD-Step02.jpg) 0px 0px no-repeat;
}

.WinAppTip {
    background: url(../../images/Popup/WinAppTip-bg.jpg) 0px 0px no-repeat;
}

.AndroidAppTip {
    background: url(../../images/Popup/AndroidAppTip-bg.jpg) 0px 0px no-repeat;
}

    .WinAppTip div, .AndroidAppTip div {
        position: absolute;
        line-height: 25px;
        padding: 10px;
        border: 1px dashed #676767;
        margin: 170px 70px 0 70px;
        border-radius: 10px;
    }
/*---------首頁硬碟小視窗--------------------*/
#HD_Popup .HD-PopWrap {
    width: 250px;
    height: 310px;
    bottom: 30px;
    right: 30px;
    background: #fff;
    font-size: 15px;
    position: absolute;
    box-shadow: 2px 5px 20px #AAA;
    border-radius: 6px;
}

#HD_Popup .PopupBtnWrap {
    position: absolute;
    bottom: 4%;
    /*left: 18%;*/
}

#HD_Popup .PopupCloseBtn {
    left: 88%;
}

.HD-box-S {
    width: 50px;
    right: 0;
    bottom: 170px;
    height: 50px;
    z-index: 500;
    background: #FFFFFF;
    position: absolute;
    border-radius: 10px 0 0 10px;
    border-left: 4px solid #8F8F8F;
    border-top: 2px solid #8F8F8F;
    background-image: url(../../images/Management/HDBtn-bg.png);
}

    .HD-box-S:hover {
        cursor: pointer;
        background: #92C2C4;
        background-image: url(../../images/Management/HDBtn-bg.png);
    }

.HD-box-L table {
    border: 3px solid #BAD8DA;
    width: 95%;
    margin: 16px auto;
    text-align: center;
}

#PopupContent .HD-box-L .HardDiskTable td {
    padding: 16px 5px 16px 36px;
    border-bottom: 1px solid #ccc;
}

#PopupContent .HardDiskTable .HDNum {
    background: url(../../images/Management/HDNum-bg.png) 5px 2px no-repeat;
}

.HDMode-Good {
    /*background: url(../../images/Management/HDgoodmode-bg-S.png) 5px 6px no-repeat;*/
    color: #00913A !important;
}

.HDMode-Bad {
    /*background:url(../../images/Management/HDbadmode-bg-S.png) 5px 6px no-repeat;*/
    color: #C30D23 !important;
}

.HDMode-NoHD {
    /*background:url(../../images/Management/HDnohdmode-bg-S.png) 5px 6px no-repeat;*/
    color: #727171;
}
/*201603-new*/
.RD-popup .popup-4 .PopWrap {
    min-height: 182px;
    max-height: 400px;
    width: 340px;
    height: inherit;
    position: fixed;
    right: 20px;
    bottom: 50px;
    margin: auto;
    top: inherit;
    left: inherit;
    z-index: 999;
    -webkit-box-shadow: 1px 1px 5px #9A9A9A;
    -moz-box-shadow: 1px 1px 5px #9A9A9A;
    box-shadow: 1px 1px 5px #9A9A9A;
}

.RD-popup .popup-4 .div-th, -popup .popup-4 .div-td {
    display: table-cell;
    padding: 6px 0;
}

.RD-popup .popup-4 .PopupCloseBtn {
    left: 91%;
}

.RD-popup .popup-4 .space-warning {
    background-color: #fbeeed;
}

.RD-popup .popup-4 .WhiteBtn {
    margin: 0;
}
/*-----------設定----------*/
#HDSetting .TableWrap, #AboutPN .TableWrap {
}
/*硬碟設定*/
#HDSetting .TableWrap {
    height: 100%;
    animation-name: fade-in;
    animation-duration: 1s;
}

    #HDSetting .TableWrap table .HDMode-Good {
        font-weight: bold;
    }

    #HDSetting .TableWrap table .HDMode-Bad {
        font-weight: bold;
    }

    #HDSetting .TableWrap table .HDMode-NoHD {
        font-weight: bold;
    }
/*201602硬碟管理*/
#HDSetting .hd-box {
    min-width: 210px;
}

    #HDSetting .hd-box ul {
        color: white;
    }

.hd-box ul li {
    margin-bottom: 6px;
    cursor: pointer;
    padding: 4px 10px;
    color: #5f9396;
    background: #e2f5f4;
    border-left: 10px solid #bad8da;
}

#HDSetting .hd-box ul li:hover, #HDSetting .hd-box ul li:active, #HDSetting .hd-info-focus, #HDSetting .hd-info-focus, #HDSetting .hd-info-focus:hover {
    background: #5aa5a0;
    animation-name: hd-border;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

@keyframes hd-border {
    0% {
        border-left: 0px solid #438e89;
        color: #848484;
    }

    100% {
        border-left: 10px solid #438e89;
        color: rgba(255, 255, 255, 1);
    }
}

#HDSetting i {
    margin: 0 10px 0 0;
}

#HDSetting .TableWrap td {
}
/*RDSetting*/
.spacelist {
    border-bottom: 2px solid cadetblue;
    padding-left: 10px;
}

    .spacelist li {
        display: inline-block;
        cursor: pointer;
        margin-right: 6px;
        margin-bottom: -2px;
        border: 1px solid #B6B6B6;
        background: #E7E7E7;
        border-top: 3px solid #B6B6B6;
        border-bottom: 0;
        padding: 8px 15px;
        border-bottom: 2px solid cadetblue;
    }

        .spacelist li:hover {
            background: #D4D4D4;
            border-top: 3px solid #9D9D9D;
        }

.RDSetting .members-list li {
    width: 48%;
    line-height: 40px;
    display: inline-block;
    margin: 5px;
    border: 1px solid #e6e5e5;
    border-radius: 4px;
    color: #fff;
}

.RDSetting .members-list .normal {
    background: #67bf96;
}

.RDSetting .members-list .error {
    background: #e88c7e;
}


.RDSetting .members-list button {
    float: right;
    /* height: 100%; */
    padding: 0px 20px 0 20px;
    margin: 0;
    background: rgba(255, 255, 255, 0.75);
    border: 0px;
    font-weight: 900;
    color: #444;
}


.RDSetting i {
    margin-right: 5px !important;
}

.RDSetting .spacelist-focus, .RDSetting .spacelist-focus:hover, .QuotaMain .spacelist-focus, .QuotaMain .spacelist-focus:hover {
    border: 1px solid cadetblue;
    border-bottom: 0;
    border-top: 3px solid cadetblue;
    background: white;
    border-bottom: 2px solid white;
    cursor: default;
}

.rd-clean td {
    color: #27AF24;
}

.rd-resyncing {
    background: #FDFFCD !important;
}

    .rd-resyncing td {
        color: #BD5809;
    }

.rd-warning {
    background: #FFCFCD !important;
}

    .rd-warning td {
        color: #E14040;
    }

.RDSetting .TableWrap {
    height: inherit;
    background: #BAD8DA;
}

.RDSetting .space-offline {
    background: #D4D4D4;
    border-color: #D4D4D4;
    cursor: no-drop;
}

    .RDSetting .space-offline tr:nth-child(odd) {
        background-color: #E5E5E5;
    }

.RDSetting .div-table {
    width: 90%;
    margin: 0 5%;
    -webkit-box-shadow: 1px 1px 5px #9A9A9A;
    -moz-box-shadow: 1px 1px 5px #9A9A9A;
    box-shadow: 1px 1px 5px #9A9A9A;
}

.RDSetting .div-th, Setting .div-td {
    width: 33%;
    padding: 5px 0;
}

.RDSetting .popup-4 .div-th, Setting .popup-4 .div-td {
    width: inherit;
}

.RDSetting .PopupCloseBtn {
    top: -24px;
    padding: 0px 0px 5px 0px;
}

.RDSetting .popup-3 i {
    margin-right: 10px;
}

.RDSetting .tip {
    padding: 30px 0;
    color: #497285;
    font-size: 17px;
    font-weight: bold;
    line-height: 25px;
}

.RDSetting hr {
    border-bottom: 1px solid #497285;
    border-style: dashed;
}

.RDSetting .hd-box .lock-disk {
    background: #234C5F;
    cursor: no-drop;
    border-color: #234C5F;
}

.RDSetting .popup-5 .PopupFooter {
    bottom: 10px;
}

.RDSetting .popup-3 .PopupFooter {
    bottom: 20px;
}

.RDSetting .left {
    margin-left: 20px;
    width: 33%;
}

.RDSetting .right {
    border: 1px solid #D8D8D8;
    border-width: 0 0 0 1px;
    margin: 0;
    width: 64%;
}

.RDSetting .hd-box ul li {
    text-align: center;
}

.RDSetting .Left {
    border: 5px solid #a9c7ca;
    text-align: center;
    background: #a9c7ca;
}

.RDSetting #foldertree li {
    text-align: left;
    width: 80%;
    padding: 7px 0 0px 30px;
    cursor: pointer;
}

.RDSetting .foldertree-wrap {
    padding: 10px;
    margin-top: 10px;
    height: 380px;
    overflow: auto;
    background: white;
}

.RDSetting .Right {
    margin-left: 0;
}

    .RDSetting .Right ul {
        padding: 19px 0 14px 0px;
        margin: 0;
        background: #BAD8DA;
    }

    .RDSetting .Right .TableOptionWrap {
        padding: 10px 0 40px 0;
        border: 0;
    }

    .RDSetting .Right .TableOptionLeft {
        padding: 0 0 0 0px;
    }

    .RDSetting .Right thead tr td {
        border: 0;
    }

.RDSetting .hint-icon {
    margin: 0 10px;
    background: #FFFFFF;
    color: darkcyan;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 17px;
}

    .RDSetting .hint-icon:hover {
        color: #024141;
    }

.RDSetting .popup-3 i {
    margin-right: 5px;
}

.RDSetting .popup-4 .div-table {
    text-align: center;
}

    .RDSetting .popup-4 .div-table .div-td:first-child {
        width: 5%;
    }

.RDSetting .popup-4 .PopupFooter {
    bottom: 20px;
}

.share-folder-wrap {
}
/*資料夾管理*/
/*系統設定*/
#AboutNAS .TableWrap {
    height: 328px;
}

    #AboutNAS .TableWrap p {
        margin: 0;
    }
/*個人化頁面*/
/*------Checkbox樣式-------*/
input[type="checkbox"] {
    display: none;
}

    input[type="checkbox"] + label {
        margin: 0 5px;
    }

        input[type="checkbox"] + label span {
            display: inline-block;
            width: 20px;
            height: 21px;
            vertical-align: middle;
            background: url(../../images/Common/table-checkbox.png) left top no-repeat;
            cursor: pointer;
        }

    input[type="checkbox"]:checked + label span {
        background: url(../../images/Common/table-checkbox.png) -20px top no-repeat;
    }
/*3PartyMain.php*/
#PowerBoxMain .MainContent {
    background-image: url(../../images/Common/bg.png);
    /*min-width:1750px;
	background-color: #55B3AC;
	background-color: rgba(95, 135, 160, 0.62);*/
}

#PowerBoxMain .onoffswitch {
    margin: 0 auto;
}

#PowerBox_Popup .PopupCloseBtn {
    top: 7px;
    left: 96%;
}

#PowerBox_Popup ul {
    padding: 0 100px;
}

#PowerBox_Popup .AppInfo li h2 {
    font-size: 17px;
    padding: 0 0 8px 0;
    margin: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}

#PowerBox_Popup .PopupBtnWrap {
    left: 24%;
    bottom: 4%;
}

.LoadingBox {
    position: absolute;
    width: 200px;
    height: 130px;
    padding: 20px 0 0 0;
    background: #ffffff;
    margin: -75px 0 0 -100px;
    top: 50%;
    left: 50%;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #999;
}

    .LoadingBox p {
        padding: 5px 10px;
        border: 1px #989898 dotted;
        display: inline-block;
        border-radius: 10pc;
        margin: 6px 0 0 0;
    }

.AppInfo p {
    line-height: 23px;
}

.AppPic {
    width: 520px;
    height: 292px;
    margin: 15px auto;
    background-image: url(../../images/Common/bg.png);
    border-radius: 5px;
    border: 1px solid #ccc;
}

    .AppPic img {
        margin: 0 auto;
        display: block;
        /*padding-top: 20px;
	border-radius: 5px;
	border: 1px solid #ccc;*/
    }

.BoxLeft {
    width: 200px;
    min-height: 840px;
    float: left;
    border-right: 1px solid #ccc;
    /*background: rgba(95, 135, 160, 0.62);*/
    -webkit-box-shadow: inset -5px 0px 9px -3px rgba(46, 50, 50, 0.30);
    -moz-box-shadow: inset -5px 0px 9px -3px rgba(46, 50, 50, 0.30);
    box-shadow: inset -5px 0px 9px -3px rgba(46, 50, 50, 0.30);
}

    .BoxLeft ul {
        padding: 30px 0px 0px 40px;
        /*color: #fff;*/
        font-weight: bold;
    }

.BoxRight {
    width: 70%;
    padding: 15px 15px 15px 36px;
    /* min-height: 900px; */
    min-height: 810px;
    height: 810px;
    overflow-x: hidden;
    overflow-y: scroll;
    float: left;
    min-width: 590px;
    background: rgb(224, 233, 234);
    /*background: #f5f5f5;
	background: -moz-linear-gradient(left, #f5f5f5 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5f5f5), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(left, #f5f5f5 0%,#ffffff 100%);
	background: -o-linear-gradient(left, #f5f5f5 0%,#ffffff 100%);
	background: -ms-linear-gradient(left, #f5f5f5 0%,#ffffff 100%);
	background: linear-gradient(to right, #f5f5f5 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 );*/
    -webkit-box-shadow: 5px 0px 9px -3px rgba(46, 50, 50, 0.30);
    -moz-box-shadow: 5px 0px 9px -3px rgba(46, 50, 50, 0.30);
    box-shadow: 5px 0px 9px -3px rgba(46, 50, 50, 0.30);
}

    .BoxRight .AppWrap {
        width: 160px;
        height: 300px;
        margin: 0 20px 20px 0;
        float: left;
        border-top: 1px solid #C3DBE0;
        border-left: 1px solid #C3DBE0;
        background: #fff;
        border-radius: 8px;
        -webkit-box-shadow: 4px 4px 11px -3px rgba(48, 50, 50, 0.56);
        -moz-box-shadow: 4px 4px 11px -3px rgba(48, 50, 50, 0.56);
        box-shadow: 4px 4px 11px -3px rgba(48, 50, 50, 0.56);
        cursor: pointer;
    }

        .BoxRight .AppWrap li {
            margin: 0 auto;
            text-align: center;
            padding: 6px 0;
            width: 100%;
        }

            .BoxRight .AppWrap li .BlueBtn {
            }

.BoxInfo {
    width: 330px;
    min-height: 840px;
    float: left;
}

@media (max-width: 767px) {
    .BoxLeft ul {
        padding: 10px 0;
        font-weight: bold;
        text-align: center;
        margin-bottom: 0;
    }

    .BoxLeft {
        width: 100%;
        min-height: inherit;
        float: none;
        border-right: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .BoxRight {
        width: 100%;
        height: inherit;
        min-width: inherit;
    }
}

/*Power box main-FTP*/
.FTP .info .no-FTP tr:nth-child(3) td,
.FTP .info .no-FTP tr:nth-child(4) td,
.FTP .info .no-FTP tr:nth-child(5) td,
.FTP .info .no-FTP tr:nth-child(6) td{
    color: rgba(46, 50, 50, 0.30);
    background: #efefef;
}

.FTP .info table {
    border: 4px solid #BAD8DA;
}

.FTP .info table td{
    vertical-align:middle;
}

.FTP .info table tr td{
    border-right: 1px solid #e5e5e5;
}

.FTP .info .top tr:nth-child(1),
.FTP .info .top tr:nth-child(3),
.FTP .info .mode tr:nth-child(1) {
    background-color: #E2F5F4;
}

.FTP .table.top tr:nth-child(4) button,
.FTP .table.top tr:nth-child(5) button,
.FTP .table.top tr:nth-child(6) button {
    margin-right: 10px;
}

.FTP table tr:nth-child(6) button {
    margin-bottom: 10px;
}

.FTP .table.top .path {
    font-size:9px;
    color:#ccc;
    padding-top:5px;
}

.user-mofal .title {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 20px;
}

.user-mofal .radio.radio-info {
    margin-left: 5px;
}
    .user-mofal .radio.radio-info label {
        margin-right: 5px;
    }

.user-mofal input {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.user-mofal .checkbox {
    display: inline-block;
}


.FTP .file-select-list h1 {
    padding-top:15%;
}


.FTP .file-select-list i {
    background: #4682b4;
    padding: 25px 27px;
    border-radius: 100px;
    text-align: center;
    color: #fff;
}

.FTP .file-select-list h5 {
    color:#ccc;
}

/*SystemVersion.php*/
.AddNewEmail {
    margin: 0 0 0 33px;
}

.Email_list {
    border: 1px #ccc solid;
    width: 330px;
    height: 197px;
    overflow: auto;
    margin: 10px 0 0 33px;
}

    .Email_list li {
        padding: 5px 10px;
        border-bottom: 1px #ccc solid;
    }
/*1040915-user*/
#UserGroup:active {
    min-height: 34px;
    margin: 2px 0px 0px 0px;
    border-bottom: 2px solid #48945D;
}

#ChooseUser .TableWrap {
    width: 90%;
    height: 100%;
    margin: 18px auto;
}

    #ChooseUser .TableWrap table tbody tr {
        min-height: 39px;
        vertical-align: middle;
    }

    #ChooseUser .TableWrap tr td:first-child {
        text-align: left;
    }

#ChooseUser .TableOptionWrap {
    border: 0px;
}

#ChooseUser .TableTopOptionWrap {
    padding: 0px 0 40px 0;
}

#ChooseUser .TableOptionBtm {
    float: right;
    padding: 10px 10px 0 0;
    width: 28%;
}

#ChooseUser td {
    padding: 9px 12px !important;
}

    #ChooseUser td:nth-child(2), #ChooseUser td:nth-child(3) {
        width: 15%;
    }

.UserTable {
    height: 245px;
    display: block;
}

.GroupTable {
    /*height: 245px;*/
}
/*201510-便利貼改版*/
/*Login登入區---------------------------*/
.scrollLoading {
    width: 70px;
    padding: 10px 11px 10px 9px;
    height: 70px;
    position: absolute;
    bottom: 40px;
    top: initial;
    left: 50%;
    margin: 0 0 0 -45px;
    z-index: 9999;
    border-radius: 54px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 2px 2px 4px rgba(67, 67, 67, 0.4);
}

.MicroBlog .Logo {
    padding: 4px 0 0 5px;
    z-index: 99999;
}
/*RWD*/
.LoginBoxWrap {
}

.LoginBox {
    text-align: center;
    float: right;
    z-index: 500;
    margin-bottom: 0px;
}

    .LoginBox h2 {
        color: #fff;
        border-bottom: 1px solid #fff;
        padding: 0 0 20px 0;
        line-height: 25px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .LoginBox p {
        color: #fff;
        line-height: 27px;
        text-align: left;
    }

    .LoginBox .LoginBoxInfo {
        border: none;
        height: 27px;
        width: 180px;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
    }

    .LoginBox li {
        padding: 8px 0;
        margin: 0 15px;
        float: left;
        list-style-type: none;
    }

    .LoginBox .SystemControlBtn {
        margin: 12px 20px 0 0;
    }

    .LoginBox .UserID {
        font-size: 16px;
        margin: 2px 30px 0 10px;
    }

.MicroBlog .FirstBtn {
    /*width: 120px;*/
    height: 34px;
    color: #FFF;
    border: 1px #fff solid;
    background: #6cb5f4;
    border-radius: 3px;
    padding: 0px 20px;
    font-size: 14px;
}

    .MicroBlog .FirstBtn:hover {
        background: #79C1FF;
        cursor: pointer;
    }

@media screen and (max-width: 1075px) {
    .Login .LoginBoxWrap {
        width: 100%;
        height: 60px;
        position: absolute;
        border-bottom: 1px solid #ffffff;
        z-index: 999;
    }

    .Login .LoginBox {
        text-align: center;
    }

        .Login .LoginBox h2 {
            color: #fff;
            border-bottom: 1px solid #fff;
            padding: 0 0 20px 0;
            line-height: 25px;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .Login .LoginBox p {
            color: #777777;
            line-height: 27px;
            text-align: left;
        }

    .MenuBtn {
        width: 40px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 24px !important;
        color: #33516B;
    }

    .Login .LoginBox .LoginBoxInfo {
        border: none;
        height: 27px;
        width: 200px;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
    }

    .Login .LoginBox li {
        padding: 10px 0;
        margin: 0 15px;
        list-style-type: none;
        float: none;
    }

    .Login .LoginBox {
        text-align: center;
        width: 250px;
        float: right;
        border: 1px solid #ffffff;
        margin: 60px 0px 10px 10px;
        background: rgba(255,255,255,1);
        border-radius: 0 0 8px 8px;
        padding: 10px 0 0 0;
        box-shadow: 1px 2px 5px #5D5D5D;
    }

    .Login .FirstBtn {
        width: 200px;
        height: 32px;
        color: #ffffff;
        border-radius: 3px;
        padding: 0px;
        font-size: 14px;
        border: 1px #B1B1B1 solid;
        background: #6cb5f4;
        border: solid #4A86BB;
        border-width: 0px 0px 3px 0px;
    }

        .Login .FirstBtn:hover {
            background: #79C1FF;
            color: #ffffff;
            cursor: pointer;
        }
    /*容量吧*/
    .LoginSpaceBar {
        padding: 10px;
    }

    .LoginBarWrap {
        margin: 0 auto;
        /*width: 240px;*/
    }

    .LoginDiskSpace {
        color: #777777;
        border: 1px #777777 solid;
        border-width: 1px 1px 0 1px;
        background: none;
        border-radius: 3px;
        padding: 0px 10px;
        text-align: center;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    #prbar {
        overflow: hidden;
        border: 1px solid #777777 !important;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #prpos {
        background-color: #6cb5f4 !important;
    }
}
/*Login容量Bar---------------------------*/

/*檔案管理使用者配額*/
.File-User-QuotaBarWrap {
    background: #ffffff;
    width: 100%;
    padding: 10px;
    border: 4px solid #BAD8DA;
    font-size: 13px;
    border-radius: 6px;
    text-align: center;
    margin-top: 10px;
}

    .File-User-QuotaBarWrap li {
        text-align: center;
        display: inline-block;
    }

    .File-User-QuotaBarWrap .File-User-QuotaBar {
        background-color: #FFFFFF;
        color: #1F1F1F;
        height: 15px;
        border: 1px solid #e5e5e5;
        margin: 0 10px;
        background: #e5e5e5;
        -webkit-box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
        -moz-box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
        box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
    }

        .File-User-QuotaBarWrap .File-User-QuotaBar div {
            -webkit-box-shadow: inset 1px -5px 6px 1px rgba(0,0,0,0.15);
            -moz-box-shadow: inset 1px -5px 6px 1px rgba(0,0,0,0.15);
            box-shadow: inset 1px -5px 6px 1px rgba(0,0,0,0.15);
        }

#FileManage .TableOptionLeft, #FileManage .TableOptionRight {
    display: inline-block;
    float: none;
    padding: 0;
}

#FileManage .TableOptionBtmWrap {
    padding: 0;
    min-height: 50px;
}

#prbar {
    overflow: hidden;
    border: 1px solid #ffffff;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, #prbar {
    border-radius: 0px;
}

#prpos {
    width: 0%;
    background-color: #cccccc;
    border-radius: 6px;
    height: 8px;
    transition: width 2s ease;
    -moz-transition: width 2s ease;
    -webkit-transition: width 2s ease;
    -o-transition: width 2s ease;
    -ms-transition: width 2s ease /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -moz-animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -o-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;
}

.LoginLogo {
    position: absolute;
    top: 5px;
    left: 20px;
    width: 120px;
    height: 51px;
    background: url(../../images/FHD/FirstLogo.png) no-repeat;
    z-index: 5;
}

.BlogAreaWrap {
    width: 100%;
    margin: auto 0%;
    height: 100%;
    overflow: auto;
    top: 80px;
    position: absolute;
    /*width: 80%;
    margin: 0 10%;*/
}

    .BlogAreaWrap .Blog {
        background: #E5F5FF;
        width: 400px;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.49) 1px 1px 2px;
        border-radius: 4px;
    }

button.GearBtn {
    height: 20px;
    /*width: 24px;*/
    background-position: -431px 1px;
    border-radius: 2px;
    background-color: white;
}

.BlogAreaWrap .Blog .GearBtn {
    float: right;
}

.BlogAreaWrap .Blog:hover {
    background: lightblue;
    box-shadow: #000000 1px 1px 4px;
}

.BlogAreaWrap .Blog iframe {
    width: 100%;
}

.Blog ul {
    margin: 0;
}

    .Blog ul li {
        list-style-type: none;
        float: left;
    }

.Blog > div {
    cursor: pointer;
    margin: 0 4px;
    padding: 4px;
    background: #ffffff;
    box-shadow: 0px 0px 1px #363636 inset;
    min-height: 100px;
    max-height: 544px;
    font-size: medium;
    overflow: hidden;
    border-radius: 2px;
}

    .Blog > div:hover {
        /*background: aliceblue;*/
        cursor: pointer;
        box-shadow: 0px 0px 2px #363636 inset;
    }

.Blog header, .Blog footer {
    cursor: pointer;
}

.Blog header {
    padding: 4px;
    height: 18px;
}

.Blog footer {
    text-align: center;
    padding: 2px;
}

.GearBtn {
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.MicroBlog .Footer {
    background-image: url(../../images/FHD/footer.png);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.BlogPopup .PopupContent .BlogContent > ul > li {
    float: left;
}

.BlogPopup .PopupContent .BlogContent > ul:first-child, .BlogPopup .PopupContent .BlogContent > ul:last-child {
    padding: 10px 5px 0px 5px;
    background: #E5F5FF;
    border: 1px solid #cccccc;
    border-radius: 5px 5px 0 0;
    width: 77.5%;
}

.BlogPopup .PopupContent .BlogContent > ul:first-child {
    margin: 20px 10% 0 10%;
    height: 40px;
    border-width: 1px 1px 0 1px;
    border-radius: 5px 5px 0 0;
}

    .BlogPopup .PopupContent .BlogContent > ul:first-child > li:last-child {
        float: right;
    }

.BlogPopup .PopupContent .BlogContent > ul:last-child {
    margin: 0 10%;
    height: 30px;
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 5px 5px;
}

    .BlogPopup .PopupContent .BlogContent > ul:last-child > li {
        padding: 0 10px 0 0;
    }

        .BlogPopup .PopupContent .BlogContent > ul:last-child > li:last-child {
            float: right;
        }

.BlogPopup .PopupContent .BlogContent ul li {
    list-style: none;
}

.BlogPopup .BlogContent .View, .BlogPopup .PopupContent > iframe, .BlogPopup .PopupContent textarea {
    width: 77.5% !important;
    height: 420px !important;
    margin: 0 10% !important;
    /*overflow: auto;*/
}

.BlogPopup footer {
    width: 100%;
    text-align: center;
}

.BlogPopup .BlogContent .View iframe {
    width: 100%;
    height: 100%;
    overflow: auto;
}
/*RWD*/
@media screen and (min-width: 1200px) {
    .BlogAreaWrap {
        width: 80%;
        margin: auto 10%;
    }
    /*BlogPopup*/
    .BlogPopup .PopWrap {
        width: 800px;
        height: 700px;
        margin: -350px 0 0 -400px;
    }

    .BlogPopup .PopupCloseBtn {
        position: absolute;
        left: 96%;
        top: 7px;
    }

    .BlogPopup .PopupContent {
        height: 80%;
    }

    .BlogPopup .BlogContent {
        height: 100%;
    }

        .BlogPopup .BlogContent .View {
            border: 1px solid #cccccc;
            border-radius: 5px;
            padding: 5px;
        }

    .BlogPopup header {
        height: 5%;
    }
    /*.BlogPopup footer{
	width: 25%;
    height: 42px;
    margin: 0 auto;
}*/
}

@media screen and (min-width: 980px) and (max-width: 1199px) {
    .BlogAreaWrap {
        width: 100%;
        margin: auto 0%;
    }
    /*BlogPopup*/
    .BlogPopup .PopWrap {
        width: 70%;
        height: 620px;
        margin: -310px 0 0 -35%;
    }

    .BlogPopup .PopupCloseBtn {
        left: 96%;
        top: -20px;
    }

    .BlogPopup .PopupContent {
        height: 80%;
    }

    .BlogPopup .BlogContent {
        height: 100%;
    }

    .BlogPopup .PopupContent .BlogContent > ul {
        margin: 10px 0 0 80px;
        height: 40px;
    }

    .BlogPopup .PopupContent .BlogContent ul li {
        list-style: none;
    }

    .BlogPopup .BlogContent .View, .BlogPopup .PopupContent iframe, .BlogPopup .PopupContent textarea {
        width: 78.5% !important;
        height: 350px !important;
        margin: 0 10% !important;
        overflow: auto;
    }

    .BlogPopup .BlogContent .View {
        width: 79.8% !important;
        border: 1px solid #cccccc;
        border-radius: 5px;
    }

    .BlogPopup .BlogContent .GearBtn {
        width: 28px;
        height: 28px;
    }

    .BlogPopup .PopupContent .BlogContent > ul:first-child, .BlogPopup .PopupContent .BlogContent > ul:last-child {
        width: 78.2%;
    }

    .BlogPopup header {
        height: 5%;
    }
    /*.BlogPopup footer{
	width: 26%;
    height: 42px;
    margin: 0 auto;
}*/

}

@media screen and (min-width: 768px) and (max-width: 979px) {
    .BlogAreaWrap {
        width: 100%;
        margin: auto 0%;
    }
    /*BlogPopup*/
    .BlogPopup .PopWrap {
        width: 700px;
        height: 620px;
        margin: -310px 0 0 -350px;
    }

    .BlogPopup .PopupCloseBtn {
        left: 96%;
        top: -22px;
    }

    .BlogPopup .PopupContent {
        height: 80%;
    }

    .BlogPopup .BlogContent {
        height: 100%;
    }

    .BlogPopup .PopupContent .BlogContent > ul {
        margin: 10px 0 0 80px;
        height: 40px;
    }

    .BlogPopup .PopupContent .BlogContent ul li {
        list-style: none;
    }

    .BlogPopup .BlogContent .View, .BlogPopup .PopupContent iframe, .BlogPopup .PopupContent textarea {
        /*width: 80% !important;*/
        height: 350px !important;
        margin: 0 10% !important;
        overflow: auto;
    }

    .BlogPopup .BlogContent .View {
        border: 1px solid #cccccc;
        border-radius: 5px;
        padding: 5px;
    }

    .BlogPopup .BlogContent .GearBtn {
        width: 28px;
        height: 28px;
    }

    .BlogPopup header {
        height: 5%;
    }
    /*.BlogPopup footer{
	width: 27%;
    height: 42px;
    margin: 0 auto;
}*/
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .BlogAreaWrap {
        width: 100%;
        margin: auto 0%;
    }
    /*BlogPopup*/
    .BlogPopup .PopWrap {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0;
    }

    .BlogPopup .PopupCloseBtn {
        position: absolute;
        right: 10px;
        top: 8px;
        left: initial;
    }

    .BlogPopup .PopupContent {
        height: 80%;
    }

    .BlogPopup .BlogContent {
        height: 100%;
    }

    .BlogPopup .PopupContent .BlogContent > ul {
        margin: 10px 0 0 80px;
        height: 40px;
    }

    .BlogPopup .PopupContent .BlogContent ul li {
        list-style: none;
    }

    .BlogPopup .BlogContent .View, .BlogPopup .PopupContent iframe, .BlogPopup .PopupContent textarea {
        height: 60% !important;
        margin: 0 10% !important;
        overflow: auto;
    }

    .BlogPopup .BlogContent .View {
        border: 1px solid #cccccc;
        border-radius: 5px;
        padding: 5px;
    }

    .BlogPopup .BlogContent .GearBtn {
        width: 28px;
        height: 28px;
    }

    .BlogPopup header {
        height: 5%;
    }
    /*.BlogPopup footer{
    width: 100%;
    height: 42px;
    margin: 0 0 0 40px;
}*/
    .BlogAreaWrap .Blog {
        width: 300px;
    }
}

@media screen and (max-width: 480px) {
    .BlogAreaWrap {
        width: 100%;
        margin: auto 0%;
    }

        .BlogAreaWrap .Blog {
            width: 280px;
        }
    /*BlogPopup*/
    .BlogPopup .PopWrap {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0;
    }

    .BlogPopup .PopupCloseBtn {
        position: absolute;
        right: 10px;
        top: 8px;
        left: initial;
    }

    .BlogPopup .PopupContent {
        height: 80%;
    }

    .BlogPopup .BlogContent {
        height: 100%;
    }

    .BlogPopup .PopupContent .BlogContent > ul {
        margin: 10px 0 0 30px;
        height: 40px;
    }

    .BlogPopup .PopupContent .BlogContent ul li {
        list-style: none;
    }

    .BlogPopup .PopupContent .BlogContent > ul:first-child > li:last-child {
        float: left;
    }

    .BlogPopup .PopupContent .BlogContent > ul:first-child {
        overflow: auto;
    }

    .BlogPopup .BlogContent .View, .BlogPopup .PopupContent iframe, .BlogPopup .PopupContent textarea {
        width: 77.5% !important;
        height: 60% !important;
        margin: 0 10% !important;
        overflow: auto;
    }

    .BlogPopup .BlogContent .View {
        border: 1px solid #cccccc;
        border-radius: 5px;
        padding: 5px;
    }

    .BlogPopup .BlogContent .GearBtn {
        width: 28px;
        height: 28px;
    }

    .BlogPopup header {
        height: 5%;
    }
    /*.BlogPopup footer {
    text-align: center;
}*/
    .BlogPopup .PopupContent .BlogContent > ul:last-child {
        height: 40px;
    }

        .BlogPopup .PopupContent .BlogContent > ul:last-child > li:last-child {
            float: none;
        }
}
/*2015/12/28 SystemAPI.php*/
.SystemAPI .TableWrap {
    height: initial;
    height: auto;
}
/*2015/12/29 SystemSync.php*/
/*Step01*/
.sync-setting .PopupContent .Step1 table {
    width: 50%;
    margin: 50px 25% 0 25%;
}

    .sync-setting .PopupContent .Step1 table tr:last-child {
        background-color: white;
    }

.sync-setting .PopupContent table tr:last-child td {
    border: 0;
    padding: 50px 0 0 0;
}

.sync-setting .PopupContent .Step1 ul {
    width: 100%;
}

    .sync-setting .PopupContent .Step1 ul li {
        width: 30%;
        text-align: center;
        float: left;
    }

        .sync-setting .PopupContent .Step1 ul li input[type="radio"] {
            margin: 14px 0 0px 15px;
            float: left;
        }

        .sync-setting .PopupContent .Step1 ul li p {
            padding: 7px 0 0px 0;
        }

        .sync-setting .PopupContent .Step1 ul li a {
            display: block;
            color: #595959;
            font-weight: bolder;
        }

            .sync-setting .PopupContent .Step1 ul li a img {
                width: 60%;
                border-radius: 3px;
                margin: 2px 0 10px 30px;
                border: 2px solid rgb(231, 231, 231);
            }

                .sync-setting .PopupContent .Step1 ul li a img:hover {
                    background: #FBFBFB;
                }

                .sync-setting .PopupContent .Step1 ul li a img:active {
                    box-shadow: 0px 0px 1px #cccccc;
                }

.sync-setting .PopupContent .Step1 .img-focus {
    box-shadow: 1px 1px 7px #848484 !important;
    border: 2px solid #6cb5f4 !important;
}
/*Step02*/
/*Left*/
.sync-setting .FileLeft {
    width: 65%;
    min-height: 561px;
}

.sync-setting .jqueryFileTree {
    margin: 0 !important;
}

.sync-setting .FileList {
    height: 560px;
    min-height: 560px;
}

.sync-setting .PopupContent .FileLeft .FileList {
    margin: 0;
    width: 18.5%;
}

    .sync-setting .PopupContent .FileLeft .FileList li {
        /*width: 100%;
	margin: 0;
	padding: 20px 0 20px 30px;*/
    }

.sync-setting .FileListliFocus {
    /*width: 100% !important;
	background-color:white !important;
	border-left:0 !important;
	border-bottom:0 !important;*/
}

.sync-setting .space-folder {
    width: 29%;
    float: left;
    height: 561px;
    min-height: 561px;
    background: #D9EEEF;
    padding-right: 8px;
}

    .sync-setting .space-folder li {
        cursor: pointer;
        width: 100%;
        background: #D9EEEF;
        padding: 10px 0 10px 8px;
    }

        .sync-setting .space-folder li:hover, .sync-setting .space-folder .space-folder-focus {
            background: white !important;
            border: 0;
        }

.sync-setting .PopupContent #foldertree li {
    text-align: left;
    padding: 7px 0 0px 30px;
    cursor: pointer;
}

.sync-setting .TreeViewWrap {
    height: 551px;
    position: relative;
    width: 68%;
}
/*Right*/
.sync-setting .FileRight {
    width: 31.9%;
    min-height: 531px;
    min-width: inherit;
}

    .sync-setting .FileRight ul {
    }

        .sync-setting .FileRight ul li {
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            line-height: 25px;
            min-height: 50px;
        }

            .sync-setting .FileRight ul li p {
                color: chocolate;
            }

            .sync-setting .FileRight ul li:first-child p:first-child {
                overflow: auto;
                max-height: 90px;
            }

            .sync-setting .FileRight ul li:last-child {
                border-bottom: 0;
                padding: 80px 0 0 0;
                text-align: center;
            }

            .sync-setting .FileRight ul li .Btn-basic {
                padding: 25px 10px;
                font-size: 16px;
                margin: 0 20px;
            }

                .sync-setting .FileRight ul li .Btn-basic i {
                    padding: 0 5px 0 0;
                }

#syncDetail table tr td:first-child {
    width: 20%;
}

#syncDetail table tr:nth-child(4) td:nth-child(2) {
    min-height: 25px;
    max-height: 100px;
    overflow: auto;
    display: block;
    border: 0;
}

.sync-run {
    color: #00AAD0;
    display: inline-block;
}

.sync-finish {
    color: #27AF24;
}

.sync-abort {
    color: #D07300;
}

.sync-error {
    color: #D07300;
}

.sync-percent {
    color: #00AAD0;
}

#ListSync tr td:nth-child(1) {
    width: 40%;
}

#ListSync tr td:nth-child(2) {
    width: 32%;
}

#ListSync tr td:nth-child(3) {
    width: 13%;
}

#ListSync tr td:nth-child(4) {
    width: 15%;
    word-break: keep-all;
}

.foldertree-lock {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0.7;
    background-color: white;
}
/*2016/01/06 API*/
.SystemAPI .popup-5 .PopupFooter .flat-btn {
    margin-left: 24%;
}

.SystemAPI .popup-4 .popuptablewrap table input[type="text"] {
    width: 80%;
}

.SystemAPI .popup-4 input[type="checkbox"] {
    display: initial;
}

.SystemAPI .popup-4 .popuptablewrap table {
    margin: 20px 50px;
}
/*SpaceManage*/
.volume-bar {
    border: 4px solid #bad8da;
    border-width: 0px 5px 5px 5px;
    flex-direction: row;
    display: flex;
}

    .volume-bar li {
        text-align: center;
        cursor: pointer;
        min-width: 100px;
    }

        .volume-bar li:hover {
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transform: scale(1.1,1.1);
            opacity: 0.9;
        }

.partition {
    color: white;
}

.partition-1 {
    background: #fc8675;
}

.partition-2 {
    background: #6bafbd;
}

.partition-3 {
    background: #eac272;
}

.partition-4 {
    background: #65cea7;
}

.partition-5 {
    background: #ce6597;
}

.Partition-Info {
    color: black;
}

    .Partition-Info li {
        text-align: left;
        list-style-type: disc;
        margin: 0 0 0 20px;
    }

        .Partition-Info li:last-child {
            text-align: center;
            border-top: 1px solid #cccccc;
            padding-top: 7px;
            margin-top: 4px;
            list-style-type: none;
            margin-left: 0;
        }

    .Partition-Info span {
        border: 1px solid #278fe2;
        padding: 5px;
        border-radius: 3px;
        margin: 0 4px;
        background: #03A9F4;
        color: white;
    }

        .Partition-Info span:hover {
            background: #116eb7;
        }

@media (max-width: 1100px) {
    .volume-bar {
        border: 4px solid #bad8da;
        border-width: 0px 5px 5px 5px;
        flex-direction: row;
        display: block;
    }
}
/*System Backup*/
.backup-log-list {
    padding: 10px 20px;
    margin: 10px 0 0 0;
    border: 1px solid #e4e4e4;
    max-height: 300px;
    overflow: auto;
}

    .backup-log-list li:first-child {
        border-top: 0;
    }

    .backup-log-list li {
        border-top: 1px solid #e4e4e4;
        padding: 5px;
    }

        .backup-log-list li span {
            padding: 0 5px;
        }
/*layout-blog*/
.layout-blog {
    font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    /*background-image: url(../../images/FHD/first_bg.jpg);
    background: url(https://static.pexels.com/photos/111187/pexels-photo-111187.jpeg);*/
    /*background-image: url(../../images/login-bg01.jpg);*/
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

    .layout-blog .navbar-inverse {
        background: rgba(0, 0, 0, 0.27);
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        color: white;
    }

    .layout-blog footer {
        background: rgba(0, 0, 0, 0.27);
        color: white;
    }
/*.layout-blog .logo img {
    padding: 10px;
}*/
/*UserMain*/
.creat-userpopup-s1, .creat-grouppopup-s1 {
    margin: 20px 100px;
}

    .creat-userpopup-s1 .input-group, .creat-grouppopup-s1 .input-group {
        margin: 0 0 20px 0;
    }

.creat-userpopup-s2, .creat-grouppopup-s2 {
    min-height: 340px;
}

.creat-userpopup-s3, .creat-grouppopup-s3{
    margin:20px 50px;
}

.choose-box ul {
    height: 300px;
    overflow: auto;
    border: 1px solid #dedede;
}

.choose-box p {
    background: darkseagreen;
    text-align: center;
    padding: 4px 0;
    color: white;
    margin: 0;
}

.choose-box li {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #e6e6e6;
}

    .choose-box li:hover {
        background: #f3f3f3;
    }

.creat-userpopup-s2 i.fa-exchange, .creat-grouppopup-s2 i.fa-exchange {
    position: absolute;
    top: 50%;
    left: 35%;
    font-size: 14px;
    color: #5b8e5b;
}

.creat-userpopup-s2 i.fa-exchange {
    margin: -17px 0 0 82px;
}

.creat-grouppopup-s2 i.fa-exchange {
    margin: -17px 0 0 -18px;
}

@media (max-width: 992px) {
    .creat-userpopup-s2 i.fa-exchange {
        transform: rotate(90deg);
        margin: -17px 0 0 -11px;
        left: 50%;
    }

    .choose-box ul {
        height: 250px;
        margin-bottom: 22px;
    }

    .creat-grouppopup-s2 i.fa-exchange {
        left: 50%;
        transform: rotate(90deg);
        margin: -32px 0 0 -18px;
    }
}

.choose-user-table {
    height: 330px;
    overflow: auto;
}

    .choose-user-table .table tr td:first-child {
        cursor: pointer;
    }

        .choose-user-table .table tr td:first-child:hover {
            background: #f3f3f3;
        }

    .choose-user-table .table td {
        padding: 0;
        vertical-align: middle;
    }

.creat-userpopup-s3, .creat-grouppopup-s3 {
    margin: 20px 50px;
}

    .creat-userpopup-s3 .table .user-check-td, .creat-grouppopup-s3 .table .user-check-td {
        display: block;
        max-height: 130px;
        overflow: auto;
        border: 0;
    }

        .creat-userpopup-s3 .table .user-check-td span, .creat-grouppopup-s3 .table .user-check-td span {
            background: darkseagreen;
            color: white;
            padding: 2px 6px;
            margin: 5px;
            border-radius: 5px;
            display: inline-block;
        }

.user-check-td span {
    background: darkseagreen;
    color: white;
    padding: 2px 6px;
    margin: 5px;
    border-radius: 5px;
    display: inline-block;
}
/*user-permission*/
.user-permission-list {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

    .user-permission-list li {
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
    }
/*MicroBlog*/
.layout-blog {
    background-image: url(../../images/login-bg01.jpg);
    ;
}

    .layout-blog .Content {
        margin-top: 20px;
        background-image: none;
    }

#mblogHeader .container .mblog-tool {
    background: rgba(255, 255, 255, 0.95);
    margin: 0 0 20px 0;
    padding: 20px;
    border-radius: 7px;
}

.mblog-tool hr {
    border-color: #cccccc;
}

.mblogItem {
    border: 1px solid #d8d8d8;
    background: rgba(255, 255, 255, 0.95);
    margin-bottom: 15px;
    padding: 5px;
    border-radius: 2px;
    -webkit-box-shadow: 11px 11px 18px -11px rgba(0,0,0,0.65);
    -moz-box-shadow: 11px 11px 18px -11px rgba(0,0,0,0.65);
    box-shadow: 11px 11px 18px -11px rgba(0,0,0,0.65);
}

.mblog-category {
    padding: 4px 0px 10px 5px;
}

.mblog-title {
    padding: 5px;
    color: #089bde;
    font-size: 16px;
}

.mblog-body {
    min-height: 150px;
    /*max-height: 220px;*/
    border: 1px solid #cccccc;
    cursor: pointer;
    padding: 8px;
    position: relative;
    background: white;
}

.mblog-body-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0);
    background: rgba(255,255,255,0);
    transition: all 0.15s cubic-bezier(0.55, 0.09, 0.68, 0.53);
}

    .mblog-body-hover:hover {
        /* border: solid rgba(56, 56, 56, 0.43); */
        /* border-width: 50px 60px; */
        color: #ffffff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
        background: rgba(73, 176, 216, 0.54);
    }

    .mblog-body-hover:before {
        content: "\f002";
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 30px;
        margin: -15px 0 0 -15px;
    }

.mblog-info {
    padding: 10px 5px;
}

.mblog-username {
    padding: 0 0 5px 0;
    color: palevioletred;
}

.mblog-viewtype {
    color: #b1b1b1;
    padding: 0 5px 0 0;
}

.mblog-date {
    font-size: x-small;
}

.layout-blog input, .layout-blog select, .layout-blog textarea {
    max-width: inherit;
}

.view-mblog-body {
    height: 500px;
}

.view-mblog-textarea.form-control, .view-mblog-content {
    height: 400px;
}

.view-mblog-content {
    border: 1px solid #cccccc;
    padding: 8px;
    overflow: auto;
}

.view-mblog-footer {
    margin-top: 60px;
}

.mblog-viewmode .mblog-username {
    font-size: 16px;
    padding: 0 0 15px 10px;
}

.mblog-viewmode-info.col-md-12 {
    padding: 0 0 15px 10px;
}

.mblog-viewmode-info > div {
    padding: 0;
}

.mblog-viewmode-info .mblog-date {
    font-size: 14px;
}

.mblog-preview-mode {
    overflow: auto;
}

textarea.mblog-code-mode {
    font-family: Consolas;
    color: rgb(171, 178, 191);
    background-color: rgb(40, 44, 52);
}
/*mblog select file*/
.mblog-select-file {
    min-height: 400px;
    margin: 0 0 20px 0;
}

    .mblog-select-file .space-folder {
        height: 385px;
        border-right: 1px solid #ccc;
    }

        .mblog-select-file .space-folder li {
            cursor: pointer;
        }

    .mblog-select-file .TreeViewWrap {
        height: 385px;
        border-right: 1px solid #ccc;
    }

    .mblog-select-file .file-select-list {
        max-height: 385px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mblog-select-file .file-list-s {
        width: 120px;
        margin: 5px;
        padding: 13px 5px 0px 5px;
        float: left;
        text-align: center;
        cursor: pointer;
    }

        .mblog-select-file .file-list-s img {
            width: 80px;
            height: 80px;
        }

    .mblog-select-file .File-selected {
        background-color: #cee6f7;
        border: 1px solid #85acc7;
        padding: 11px 5px 0px 5px;
    }

    .mblog-select-file .file-list-s:hover {
        background-color: #cee6f7;
    }

    .mblog-select-file .file-list-l p, .mblog-select-file .file-list-s p {
        padding: 10px 0 2px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

@media (min-width: 992px) {
    .mblog-select-file .file-list-s {
        margin: 11px;
    }
}

@media (min-width: 768px) {
    .mblog-select-file .space-folder {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .mblog-select-file .space-folder {
        height: inherit;
        border-right: 0;
        border-bottom: 1px solid #ccc;
    }

    .mblog-select-file .TreeViewWrap {
        height: 150px;
        border-right: 0;
        width: inherit;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding-top: 0;
    }

    .mblog-select-file UL.jqueryFileTree {
        margin-bottom: 10px;
    }

    .mblog-select-file .file-select-list {
        max-height: 150px;
        padding: 0;
    }

    .mblog-select-file .file-list-s img {
        width: 50px;
        height: 50px;
    }
}
/*----------------FileManage----------------*/
.FileManage {
    *-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#FilePage .Content {
    background: white;
}
/*file tree*/
.TreeViewWrap {
    /*width: 158px;
	height: 900px;*/
    height: 736px;
    overflow: auto;
    /*border-left: 1px solid #ccc;*/
    padding: 10px 0 0 10px;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

.FileTreeFocus {
    background-color: #CFE6FA;
    border: 1px solid #88ACCC;
    margin: 1px !important;
}
/*share link manage*/

.share-link-table table tr td {
    word-break: break-all;
}
/*file location*/
.FileManage .location-wrap {
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

    .FileManage .location-wrap .dropdown {
        float: left;
    }

.FileManage .location {
    padding: 5px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
}

    .FileManage .location .location-name {
        float: left;
        color: #69B3C8;
        font-weight: bold;
        padding: 2px 9px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }

    .FileManage .location .location-arrow {
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 24px;
        display: inline-block;
        height: 24px;
        vertical-align: super;
        padding: 0 10px;
        color: grey;
    }

span.location-arrow:before {
    content: "\f105";
}
/*file table*/
.FileManage .table-option-topwrap {
    /*padding: 30px 20px 85px 20px;*/
}

    .FileManage .table-option-topwrap .dropdown {
        margin: 10px 0;
    }

    .FileManage .table-option-topwrap .dropdown-menu > li > a {
        color: #8e8e8e;
    }

.FileManage .table-wrap {
    min-height: 445px;
}
    .FileManage .table-wrap .table-body-scroll {
        max-height: 50vh;
        min-height: 400px;
        /* height: 400px; */
        overflow: auto;
        background: white;
    }

    .FileManage .table-wrap tr {
        border-bottom: 1px solid #e5e5e5;
    }

    .FileManage .table-wrap td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        height: 40px;
        max-width: 400px;
    }

        .FileManage .table-wrap td.file-name {
            text-align: left;
        }

.contextMenuBody {
    position: absolute;
    padding: 8px;
    border: 1px solid #c3c3c3;
    background: #fff;
    z-index: 100;
    border-radius: 3px;
    box-shadow: 1px 2px 6px rgba(0,0,0,.2);
    transform: translate(0, 15px) scale(.95);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

    .contextMenuBody ul li {
        padding: 4px 20px;
        border-bottom: 1px solid #efefef;
        font-size: 15px;
    }

        .contextMenuBody ul li:last-child {
            border-bottom: 0;
        }

    .contextMenuBody ul {
        margin-bottom: 0;
    }

        .contextMenuBody ul li:hover {
            cursor: pointer;
            background: #6d9da0;
            color: white;
        }

        .contextMenuBody ul li.pdm-contextmenu-disabled {
            cursor: default;
            background: none;
            color: #bdbdbd;
        }
/*file list mode*/
.photolist-L {
    /*position: inherit;*/
    width: 200px;
    height: 200px;
    padding: 5px 4px 30px 4px;
    float: left;
    text-align: center;
    margin: 12px;
}

.photolist-S {
    /*position: inherit;*/
    width: 120px;
    height: 140px;
    margin: 12px;
    padding: 13px 5px;
    float: left;
    text-align: center;
}

    .photolist-L p, .photolist-S p {
        padding: 10px 0 2px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.photolist p {
    padding: 7px 0 2px 0;
}
#FilePage .table-option-right .search-file-input {
    max-width: unset;
    display: inherit;
}
.file-sort-list-hidearea {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
    left: 0;
}
@media (min-width: 2048px) {
    .FileManage .table-wrap .table-body-scroll {
        max-height: unset;
        min-height: unset;
        height: unset;
    }
}
.file-sort-list {
    background: white;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    padding: 0 30px 0 20px;
    position: absolute;
    width: max-content;
}
    .file-sort-list li {
        padding:5px 0;
    }
.file-sort-list hr{
    margin: 10px 0;
}
@media (max-width: 1200px) {
    #FilePage .table-option-right{
        float:none;
    }
        #FilePage .table-option-right .search-file-input {
            margin-top:20px;
        }
}
    /*file popup*/
    /*photo popup*/
    .FileCrash {
        display: block;
        position: absolute;
        top: 25%;
        left: 44%;
        background: url(../../images/FileManage/FileCrash.png) -45px -29px no-repeat;
        padding: 170px 20px 0 20px;
    }

    .photo-frame-wrap {
        display: table;
        min-height: 250px;
        width: 100%;
    }

    .photo-frame {
        display: table-cell;
        vertical-align: middle;
        background: black;
    }

        .photo-frame img {
            margin: 10px auto 20px auto;
            display: block;
            max-height: 450px;
        }

            .photo-frame img.file-crash {
                width: 200px;
                height: 200px;
                margin: 10px auto;
            }

    .SliderBtn {
        text-align: center;
        margin: 10px 0 10px 0;
        height: 34px;
    }

        .SliderBtn li {
            width: 48px;
            height: 100%;
            margin: 0 5px 0 0;
            cursor: pointer;
            display: inline-block;
        }

        .SliderBtn .PlayPhotoBtn {
            background: url(../../images/FileManage/PhotoSliderBtn.png) 2px 0px no-repeat;
        }

            .SliderBtn .PlayPhotoBtn:hover {
                background: url(../../images/FileManage/PhotoSliderBtn-Hover.png) 2px 0px no-repeat;
            }

        .SliderBtn .StopPhotoBtn {
            background: url(../../images/FileManage/PhotoSliderBtn.png) -46px 0px no-repeat;
        }

            .SliderBtn .StopPhotoBtn:hover {
                background: url(../../images/FileManage/PhotoSliderBtn-Hover.png) -46px 0px no-repeat;
            }

        .SliderBtn .DelPhotoBtn {
            background: url(../../images/FileManage/PhotoSliderBtn.png) -98px 0px no-repeat;
        }

            .SliderBtn .DelPhotoBtn:hover {
                background: url(../../images/FileManage/PhotoSliderBtn-Hover.png) -98px 0px no-repeat;
            }

        .SliderBtn .DownloadPhotoBtn {
            background: url(../../images/FileManage/PhotoSliderBtn.png) -145px 0px no-repeat;
        }

            .SliderBtn .DownloadPhotoBtn:hover {
                background: url(../../images/FileManage/PhotoSliderBtn-Hover.png) -145px 0px no-repeat;
            }

        .SliderBtn .R-90Btn {
            background: url(../../images/FileManage/PhotoSliderBtn.png) -197px 0px no-repeat;
        }

            .SliderBtn .R-90Btn:hover {
                background: url(../../images/FileManage/PhotoSliderBtn-Hover.png) -197px 0px no-repeat;
            }

        .SliderBtn .R90Btn {
            background: url(../../images/FileManage/PhotoSliderBtn.png) -244px 0px no-repeat;
        }

            .SliderBtn .R90Btn:hover {
                background: url(../../images/FileManage/PhotoSliderBtn-Hover.png) -244px 0px no-repeat;
            }

    .PhotoSlider {
        background: #f5f5f5;
        overflow: auto;
    }

        .PhotoSlider span {
            font-size: 65px;
            /*position: relative;*/
            color: #797979;
        }

            .PhotoSlider span:hover {
                color: #03A9F4;
            }

    .Small_File {
        width: 86%;
        margin: 0 8%;
        /*overflow: auto;*/
    }

        .Small_File div {
            padding: 17px 0;
        }

            .Small_File div span {
                position: relative;
            }

                .Small_File div span img {
                    cursor: pointer;
                    max-height: 100px;
                    max-width: 100px;
                    margin: 5px;
                    border-radius: 4px;
                    border: 3px solid #cccccc;
                }

                .Small_File div span:first-child img {
                    margin-left: 50px;
                }

                .Small_File div span:last-child img {
                    margin-right: 50px;
                }


            .Small_File div img.file-crash {
                height: 100px;
                width: 100px;
            }

        .Small_File.img-xline-list {
            margin: 0;
            position: relative;
            height: 140px;
        }

            .Small_File.img-xline-list div:first-child {
                position: absolute;
                min-width: 120%;
                min-width: -webkit-max-content;
                min-width: -moz-max-content;
            }

            .Small_File.img-xline-list span {
                display: inline-block;
            }


    .ImageViewerWrapLeft {
        position: absolute;
        padding: 0 0 140px 0px;
        overflow: hidden;
        width: 40px;
        left: 15px;
        z-index: 999;
        /*opacity: 0.7 ,1;*/
        background: url(../../images/FileManage/PhotoSlider_Btn-Hover.png) 1px 40px no-repeat, #f5f5f5;
        border-left: 5px solid #f5f5f5;
        border-right: 5px solid #f5f5f5;
        cursor: pointer;
    }

    .ImageViewerWrapRight {
        position: absolute;
        padding: 0 0 140px 0px;
        overflow: hidden;
        width: 40px;
        right: 15px;
        z-index: 999;
        /*opacity: 0.7 ,1;*/
        background: url(../../images/FileManage/PhotoSlider_Btn-Hover.png) -30px 40px no-repeat,#f5f5f5;
        border-left: 5px solid #f5f5f5;
        border-right: 5px solid #f5f5f5;
        cursor: pointer;
    }

    .PhotoSlider .PreBtn {
        top: 10px;
        left: 20px;
    }

    .PhotoSlider .NextBtn {
        top: 10px;
        right: 20px;
    }

    .PhotoSlider ul {
        position: relative;
        text-align: center;
        margin: 0 5%;
        padding: 10px 0;
        width: 90%;
    }

        .PhotoSlider ul li {
            /*width: 100px; */
            /* height: 100px; */
            /* float: left; */
            /* background: black; */
            margin: 0 15px 0 0;
            display: inline-block;
        }

    .SliderFocus {
        /*border: 5px solid #32AFE4 !important;*/
        border: 3px solid #F2A254 !important;
        border-radius: 6px;
    }
    /*Audio popup*/
    .audio-frame-wrap .audio-list {
        height: 300px;
        overflow: auto;
    }

        .audio-frame-wrap .audio-list li {
            padding: 7px;
            cursor: pointer;
        }

            .audio-frame-wrap .audio-list li:hover {
                background: lightyellow !important;
            }

            .audio-frame-wrap .audio-list li:nth-child(odd) {
                background: #f7f7f7;
            }

            .audio-frame-wrap .audio-list li.music-focus {
                background: #585858 !important;
                color: white !important;
            }
    /*QuotaMain*/
    .QuotaMain .table-wrap {
        max-height: 350px;
        overflow: auto;
    }

    .quota-search-more {
        background: rgb(233, 247, 247);
    }

        .quota-search-more > div {
            padding: 10px;
        }

    @media (max-width: 992px) {
        .Quota-header li {
            float: left;
        }

            .Quota-header li:first-child {
                width: 8.33333333%;
            }

            .Quota-header li:nth-child(2) {
                width: 16.66666667%;
            }

            .Quota-header li:nth-child(3) {
                width: 25%;
            }

            .Quota-header li:last-child {
                width: 50%;
            }
    }
    /**/
    .ite2-tool-popup {
        min-height: 450px;
    }

        .ite2-tool-popup .col-left {
            background: #fbfbfb;
            border-right: 1px solid #e5e5e5;
            position: absolute;
            height: 100%;
            padding: 10px;
            top: 0;
            left: 0;
            width: 20%;
        }

            .ite2-tool-popup .col-left h4 {
                padding: 10px 0;
                background: #5f5f5f;
                color: white;
                cursor: none;
            }

            .ite2-tool-popup .col-left ul li {
                background: #dedede;
                border-bottom: 1px solid white;
                padding: 5px;
                cursor: pointer;
                transition: background 0.1s ease-in;
            }

                .ite2-tool-popup .col-left ul li:hover, .ite2-tool-popup .col-left ul li.tool-focus {
                    background: #a0a0a0;
                    color: white;
                }

        .ite2-tool-popup .col-right {
            float: right;
            width: 80%;
        }

            .ite2-tool-popup .col-right .tool-content h3 {
                color: #5f5f5f;
                padding: 10px;
                margin: 0;
            }

            .ite2-tool-popup .col-right .tool-link li {
                float: left;
                border: 1px solid #dcdcdc;
                margin: 14px;
                padding: 10px;
                text-align: center;
            }

    .multipleLanguageLinkTips {
        padding: 0 5px;
    }
    /*file upload management*/
    .file-upload-management {
        min-height: 587px;
    }

        .file-upload-management .upload-task-num {
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
            padding: 10px;
            font-weight: bold;
        }

            .file-upload-management .upload-task-num li {
                display: inline-block;
                padding-right: 20px;
                border-right: 1px solid #e5e5e5;
            }

        .file-upload-management .file-upload-list {
            width: 40%;
            height: 510px;
            overflow: auto;
            float: left;
            border-right: 1px solid #e5e5e5;
        }

            .file-upload-management .file-upload-list .file-status {
                margin: 12px 2% 0 0;
                padding: 24px 0 15px 15px;
                min-height: 90px;
                background: white;
                cursor: pointer;
                width: 96%;
                border: 1px solid #e4e4e4;
                position: relative;
            }

                .file-upload-management .file-upload-list .file-status i.cancle-upload {
                    position: absolute;
                    top: 7px;
                    right: 0px;
                    font-size: 17px;
                    color: rgb(189, 189, 189);
                }

                    .file-upload-management .file-upload-list .file-status i.cancle-upload:hover {
                        position: absolute;
                        top: 7px;
                        right: 0px;
                        font-size: 17px;
                        color: rgb(138, 138, 138);
                    }

    .file-status-waiting {
        background: #e0e0e0 !important;
    }

        .file-status-waiting .progress-bar {
            width: 100%;
            height: 5px;
            background-color: #9a9a9a;
        }

    .file-status-fail {
        background: oldlace !important;
    }

    .file-status-success {
        background: #eefde6 !important;
    }

    .file-upload-management .file-upload-list .file-status:hover, .file-status-focus {
        border: 5px solid #73b0b3 !important;
        border-width: 0 0 0 5px !important;
        background: #ecf4f5 !important;
        padding: 23px 0 14px 10px !important;
        color: #73b0b3 !important;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
    }

        .file-upload-management .file-upload-list .file-status-focus .status-field, .file-upload-management .file-upload-list .file-status:hover .status-field {
            background-color: #ffffff;
        }

    .file-upload-management .file-upload-list .file-status-focus .upload-percent-text {
        color: #77b3b6 !important;
    }

    .file-upload-management .file-upload-list .file-status .upload-type {
        float: left;
    }

    .file-upload-management .file-upload-list .file-status .file-name {
        padding: 0 0 5px 0;
        height: 25px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 62%;
    }

    .file-upload-management .file-upload-list .file-status .status-field {
        border: 1px solid #e4e4e4;
        height: 7px;
        border-radius: 3.5px;
        position: relative;
        overflow: hidden;
        margin: 7px 0 0 0;
        width: 70%;
        float: left;
    }

        .file-upload-management .file-upload-list .file-status .status-field .status-line {
            max-width: 100%;
            min-width: 1%;
            height: 100%;
            background-color: #9acd32;
            /*-webkit-animation: file-upload 10s linear;
                animation: file-upload 10s linear;*/
        }

    .file-upload-management .file-upload-list .file-status .upload-percent-text {
        float: left;
        width: 30%;
        text-align: center;
        color: #333333;
    }

    .file-upload-management .file-upload-list .file-status-disappear {
        -webkit-animation: file-status-disappear 1s;
        animation: file-status-disappear 1s;
        /*animation-delay: 10s;*/
    }

    .file-upload-management .file-upload-list .file-status-move {
        transition: 0.2s cubic-bezier(0.71, -0.04, 1, 1);
        -webkit-animation: file-status-move 0.5s;
        animation: file-status-move 0.5s;
        position: relative;
        /*animation-delay: 10.5s;*/
    }

    .file-upload-management .file-upload-detail {
        width: 60%;
        float: right;
        height: 500px;
    }

        .file-upload-management .file-upload-detail .file-name {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            margin: 0 0 0 5%;
            width: 90%;
            background: #f3f3f3;
            color: #797979;
            padding: 10px;
            border-radius: 7px;
            position: relative;
            top: 35%;
        }

        .file-upload-management .file-upload-detail .upload-detail-percent {
            margin: 0 auto;
            position: relative;
            left: 0;
            top: 17%;
            height: 220px;
            width: 220px;
            /*background: #9acd33;*/
            border: 4px solid #ffffff;
            color: white;
            border-radius: 50%;
            box-shadow: 0px 0px 0 80px #ebf4f5;
            background: #73b0b3;
            /*-webkit-animation: upload-detail-percent 10s cubic-bezier(0.71, -0.04, 1, 1);
        animation: upload-detail-percent 10s cubic-bezier(0.71, -0.04, 1, 1);*/
            animation-iteration-count: 1;
        }

            .file-upload-management .file-upload-detail .upload-detail-percent:after {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                border-radius: 100%;
                top: -0%;
                left: -0%;
                -webkit-animation: upload-detail-percent-loading 2s linear;
                animation: upload-detail-percent-loading 2s linear;
                animation-iteration-count: infinite;
                box-shadow: #ffffff 8px 8px 0px 0px;
            }

            .file-upload-management .file-upload-detail .upload-detail-percent ul {
                width: 100%;
                height: 100%;
                text-align: center;
                padding: 16% 0 0 0;
            }

                .file-upload-management .file-upload-detail .upload-detail-percent ul li {
                    vertical-align: middle;
                }

                    .file-upload-management .file-upload-detail .upload-detail-percent ul li p {
                        margin: 0;
                        line-height: 30px;
                    }

                    .file-upload-management .file-upload-detail .upload-detail-percent ul li:first-child {
                        font-size: 40px;
                        color: lightgoldenrodyellow;
                        font-weight: bold;
                    }

                        .file-upload-management .file-upload-detail .upload-detail-percent ul li:first-child p {
                            line-height: 65px;
                        }

            .file-upload-management .file-upload-detail .upload-detail-percent:after {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                border-radius: 100%;
                top: -0%;
                left: -0%;
                -webkit-animation: upload-detail-percent-loading 2s linear;
                animation: upload-detail-percent-loading 2s linear;
                animation-iteration-count: infinite;
                box-shadow: #ffffff 8px 8px 0px 0px;
            }

        .file-upload-management .file-upload-detail .file-task-success {
            position: relative;
            text-align: center;
            margin: 0 auto;
            z-index: 5;
            left: 0;
            top: 12%;
            height: 220px;
            width: 220px;
        }

            .file-upload-management .file-upload-detail .file-task-success i {
                width: 220px;
                background: #9acd33;
                color: #ffffff;
                border-radius: 50%;
                font-size: 220px;
                -webkit-animation: file-task-success 1s ease-in-out;
                animation: file-task-success 1s ease-in-out;
                animation-iteration-count: 1;
                opacity: 1;
            }

    .no-upload-task .upload-task-num {
        color: #dedede !important;
    }

    .upload-task-btn {
        border-bottom: 1px solid #e5e5e5;
        padding: 0 10px 10px 10px;
        margin-bottom: 0;
    }

        .upload-task-btn li {
            display: inline-block;
        }

    .no-upload-task img {
        position: absolute;
        top: 45%;
        left: 50%;
        margin: -150px 0 0 -131px;
    }

    .no-upload-task span {
        position: absolute;
        top: 85%;
        left: 0%;
        margin: -20px 0 0 0px;
        font-size: 28px;
        font-weight: bold;
        color: #e6e6e6;
        width: 100%;
        text-align: center;
    }

    .no-upload-task .btn {
        position: absolute;
        top: 82%;
        left: 50%;
        margin: -23px 0 0 -53px;
    }

    .file-upload-detail-waiting {
        margin: 0 auto;
        position: relative;
        left: 0;
        top: 17%;
        height: 220px;
        width: 220px;
        border: 5px solid #dcdcdc;
        color: white;
        border-radius: 50%;
        box-shadow: 0px 0px 50px 55px #f3f3f3;
        background: #b9b9b9;
        animation-iteration-count: 1;
    }

        .file-upload-detail-waiting p {
            line-height: 210px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            animation: opacity-010 2s ease-in-out infinite;
        }

    .file-loading-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -135px 0 0 -135px;
    }

        .file-loading-circle svg {
            width: 270px;
            animation: file-loading-circle-border 7s linear infinite;
        }

            .file-loading-circle svg circle {
                stroke-dashoffset: 0;
                stroke-dasharray: 300;
                stroke-width: 3px;
                stroke-miterlimit: 9;
                stroke-linecap: round;
                animation: file-loading-circle-border-dash 5s linear infinite;
                stroke: #ffffff;
                fill: transparent;
            }

    @keyframes file-loading-circle-border {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes file-loading-circle-border-dash {
        0% {
            stroke-dashoffset: 0;
        }

        100% {
            stroke-dashoffset: -600;
        }
    }

    @keyframes opacity-010 {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    .file-upload-detail-fail {
        margin: 0 auto;
        position: relative;
        left: 0;
        top: 17%;
        height: 220px;
        width: 220px;
        border: 5px solid #f0ad4e;
        border-radius: 50%;
        background: #fdf5e6;
    }

        .file-upload-detail-fail div {
            width: 100%;
            height: 100%;
            text-align: center;
            padding: 16% 0 0 0;
        }

            .file-upload-detail-fail div p {
                vertical-align: middle;
                font-size: 24px;
                font-weight: bold;
                padding: 40px 0 7px 0;
            }
    /*檔案上傳列表百分比條動態*/
    @-webkit-keyframes file-upload {
        from {
            max-width: 0%;
            background-color: #92C2C4;
        }

        20% {
            max-width: 40%;
        }

        60% {
            max-width: 60%;
        }

        to {
            max-width: 100%;
            background-color: #9acd32;
        }
    }

    @keyframes file-upload {
        from {
            max-width: 0%;
            background-color: #92C2C4;
        }

        20% {
            max-width: 40%;
        }

        60% {
            max-width: 60%;
        }

        to {
            max-width: 100%;
            background-color: #9acd32;
        }
    }
    /*檔案上傳列表消失動態*/
    @-webkit-keyframes file-status-disappear {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes file-status-disappear {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
    /*檔案上傳列表上移動態*/
    @-webkit-keyframes file-status-move {
        from {
            bottom: 0px;
        }

        to {
            bottom: 90px;
        }
    }

    @keyframes file-status-move {
        from {
            bottom: 0px;
        }

        to {
            bottom: 90px;
        }
    }
    /*檔案上傳百分比圈圈動態*/
    @-webkit-keyframes upload-detail-percent {
        from {
            box-shadow: 0px 0px 0 80px #ebf4f5;
            background: #73b0b3;
        }

        to {
            box-shadow: 0px 0px 0px 0px #9acd33;
            background: #87bb1d;
        }
    }

    @keyframes upload-detail-percent {
        from {
            box-shadow: 0px 0px 0 80px #ebf4f5;
            background: #73b0b3;
        }

        to {
            box-shadow: 0px 0px 0px 0px #9acd33;
            background: #87bb1d;
        }
    }
    /*檔案上傳白圈動態*/
    @-webkit-keyframes upload-detail-percent-loading {
        0% {
            transform: rotateZ(0deg);
        }

        100% {
            transform: rotateZ(360deg);
        }
    }

    @keyframes upload-detail-percent-loading {
        0% {
            transform: rotateZ(0deg);
        }

        100% {
            transform: rotateZ(360deg);
        }
    }
    /*檔案上傳成功綠勾動態*/
    @-webkit-keyframes file-task-success {
        0% {
            transform: rotateY(0deg);
            opacity: 0;
        }

        20% {
            transform: rotateY(360deg);
            opacity: 1;
        }

        80% {
            transform: rotateY(360deg);
            opacity: 1;
        }

        100% {
            transform: rotateY(0deg);
            opacity: 0;
        }
    }

    @keyframes file-task-success {
        0% {
            transform: rotateY(0deg);
            opacity: 0;
        }

        100% {
            transform: rotateY(360deg);
            opacity: 1;
        }
    }
    /*檔案拖曳*/
    .file-drag-wrap {
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99999;
    }

    .file-drag-info .bg {
        margin: 12vh 3% 7vh 5%;
        border: 6px dashed #c3c3c3;
        background: rgba(255, 255, 255, 0.8);
        width: 90%;
        height: 80vh;
        border-radius: 14px;
    }

    .file-drag-info ul {
        text-align: center;
        padding: 25vh 0 30vh 0;
    }

        .file-drag-info ul li {
            padding: 0 0 30px 0;
        }

            .file-drag-info ul li i.fa-file-text-o {
                font-size: 126px;
                z-index: 999;
                color: #636363;
            }

            .file-drag-info ul li span {
                font-size: 40px;
                color: #636363;
                font-weight: bold;
            }

    .file-drag-follow {
        position: absolute;
        top: 0;
        left: 0;
    }

        .file-drag-follow .fa-files-o {
            font-size: 65px;
            background: rgba(3, 169, 244, 0.21176470588235294);
            padding: 20px;
            border: 2px solid #03a9f4;
            color: #03a9f4;
            border-radius: 5px;
        }

        .file-drag-follow .fa-circle {
            color: #02a9f4;
        }

        .file-drag-follow .file-drag-num {
            font-size: 22px;
            line-height: 33px;
            font-weight: bold;
            color: #02a9f4;
            vertical-align: middle;
        }
    /*檔案上傳計數樣式*/
    .file-upload-num {
        position: relative;
        top: 7px;
        left: -20px;
        background: darkorange;
        color: white;
        font-weight: bold;
        font-size: 10px;
        border-radius: 7px;
        text-align: center;
        vertical-align: middle;
        padding: 0 5px;
    }

    .folder-upload-alert {
        position: fixed;
        right: -465px;
        bottom: 35px;
        z-index: 99999;
        background: #464646;
        padding: 13px;
        color: white;
        transition-property: right,width;
        transition-duration: 2s,1s;
        transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        border-radius: 3px;
    }

        .folder-upload-alert i {
            color: #92c2c4;
        }

    .folder-upload-alert-in {
        right: 15px;
    }

    .folder-upload-alert-out {
        right: -465px;
    }

/*設定-系統管理-系統控制台 樣式*/
.system-manage__control__certificate-row .dis-flex {
    display: flex;
    flex-wrap: wrap;
}

.system-manage__control__certificate-row .certificate-table td {
    padding: 5px 5px 5px 5px;
}

.system-manage__control__certificate-row .certificate-table .inner {
    color: #167ac9;
}

.system-manage__control__certificate-popup #file-upload {
    padding: 4px;
}