@charset "utf-8"; /* CSS Document */
.btn-gray{ border:none; background:linear-gradient(135deg, rgba(30,25,25,.2), rgba(30,25,25,.3));}
.btn-blue{ border:none; background:linear-gradient(135deg, rgba(80,130,250,.7), rgba(80,130,250,1));}
.btn-sm{ padding:8px 12px; font-size:13px;}
.btn-lg,.btn-sm,.btn-xs,.btn-xxs,.btn-xxl{ font-size:14px; line-height:1; color:#ffffff !important; border-radius:4px; transition:0.15s; box-sizing:border-box; display:inline-block;}
.btn-red{ border:solid 1px #ff6969; background:#ff6969;}
a:hover, a:hover i, a:hover em{ color:#5082fa; text-decoration:none;}

.ph-photo-gallery-modal{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.ph-modal{ background:#ffffff; box-shadow:0 0 25px rgba(30,25,25,.4); border-radius:4px; display:flex; flex-direction:column;}
.ph-modal-large{ width:1000px; height:640px;}
.ph-modal-middle{ width:720px;}
.ph-modal-small{ width:420px;}
.ph-modal-head{ width:100%; height:50px; padding:0 20px; border-bottom:solid 1px #eceff5; display:flex; align-items:center; justify-content:space-between;}
.ph-modal-head.head-small{ height:40px;}
.ph-modal-head .name{ font-size:15px; color:#0e0909; line-height:1; display:flex; align-items:center;}
.ph-modal-head .name i{ font-size:17px; color:#5082fa; line-height:inherit; margin-right:3px;}
.ph-modal-head .search-box{ position:relative; width:360px; height:32px; background:rgba(80,130,250,.04); border-radius:50px; display:flex; align-items:center;}
.ph-modal-head .search-box i{ position:absolute; font-size:15px; color:#9e9999; line-height:1; right:10px; z-index:10; cursor:pointer;}
.ph-modal-head .search-box input{ border:0; padding-left:10px;}
.ph-modal-head .closed i{ font-size:15px; color:#0e0909; cursor:pointer;}
.ph-modal-content{ width:100%; height:calc(100% - 40px); padding:15px 20px; display:flex;}
.ph-modal-content .text-describe{ font-size:13px; color:#0e0909;}
.ph-modal-image-view{ position:relative; width:100%; display:flex; align-items:center; justify-content:space-between;}
.ph-modal-image-view a{ position:absolute; width:40px; height:40px; font-size:16px; line-height:1; color:#ffffff !important; border-radius:50px; background:rgba(30,25,25,.5); display:flex; align-items:center; justify-content:center;}
.ph-modal-image-view a.previous{ left:20px;}
.ph-modal-image-view a.next{ right:20px;}
.ph-modal-image-view a:hover{ background:rgba(30,25,25,.6);}
.ph-modal-image-view a i{ font-size:inherit; line-height:inherit; color:inherit;}
.ph-modal-image-view .image-view{ width:100%; height:400px; display:flex; align-items:center; justify-content:center;}
.ph-modal-image-view .image-view img{ max-width:100%; max-height:100%;}
.ph-modal-image-folder{ position:relative; width:100%; height:400px; display:flex; flex-direction:column;}
.ph-modal-image-folder .search-item{ width:100%; height:50px; padding:0 20px; display:flex; align-items:center; justify-content:center;}
.ph-modal-image-folder .search-box{ position:relative; width:100%; height:32px; border:solid 1px rgba(80,130,250,.12); border-radius:4px; display:flex; align-items:center;}
.ph-modal-image-folder .search-box:focus{ border:solid 1px rgba(80,130,250,.24);}
.ph-modal-image-folder .search-box i{ position:absolute; font-size:15px; color:#9e9999; line-height:1; right:10px; z-index:10; cursor:pointer;}
.ph-modal-image-folder .search-box input{ border:0; background:none; border:none !important; outline:none !important;}
.ph-modal-image-folder .ph-folder-item{ width:100%; height:350px; padding:0 16px 0 20px; overflow-y:scroll; display:flex; flex-direction:column; gap:5px;}
.ph-modal-image-folder .folder-list{ width:100%; height:40px; padding:5px; border-radius:4px; gap:10px; display:flex; align-items:center; justify-content:start; cursor:pointer;}
.ph-modal-image-folder .folder-list:hover{ background:rgba(80,130,250,.08);}
.ph-modal-image-folder .folder-list.selected{ background:rgba(80,130,250,.08);}
.ph-modal-image-folder .folder-list .cover{ width:30px; height:30px;}
.ph-modal-image-folder .folder-list .cover img{ width:100%; height:100%;}
.ph-modal-image-folder .folder-list .name{ font-size:13px; color:#5e5959;}
.ph-modal-image-folder .folder-list .name.edit{ background:#ffffff; padding:3px 10px; border-radius:4px; outline:none !important;}

.ph-modal-body{ width:100%; height:calc(100% - 50px); display:flex; align-items:stretch; justify-content:space-between;}
.ph-modal-body a i{ font-size:inherit; color:inherit; line-height:inherit; margin-right:3px;}
.ph-modal-body .sidebar-menu{ width:180px; padding:0 22px; display:flex; flex-direction:column; border-right:solid 1px #eceff5;}
.ph-modal-body .menu-item{ width:100%; display:flex; flex-direction:column; padding:12px 0; border-bottom:solid 1px #eceff5;}
.ph-modal-body .menu-item:last-child{ border:0;}
.ph-modal-body .menu-item a.name{ font-size:13px; line-height:30px; color:#0e0909;}
.ph-modal-body .menu-item a.active{ color:#5082fa;}
.ph-modal-body .menu-item .menu-tree li a{ background:none; font-size:12px; line-height:32px; margin:2px 0; padding:0 15px; color:#5e5959;}
.ph-modal-body .menu-item .menu-tree li.active{ background:rgba(80,130,250,.08); border-radius:6px;}
.ph-modal-body .menu-item .menu-tree li.active a{ color:#5082fa;}
.ph-modal-body .main-content{ width:calc(100% - 180px); height:calc(100% - 50px); display:flex; flex-direction:column;}
.ph-modal-body .main-content .content-head{ width:100%; height:70px; padding:0 20px; border-bottom:solid 1px #eceff5; display:flex; align-items:center; justify-content:space-between;}
.ph-modal-body .main-content .content-head .operation{ display:flex; align-items:center;}
.ph-modal-body .main-content .content-head a.upload-image{ height:30px; font-size:13px; line-height:1; color:#ffffff; background:rgba(80,130,250,1); padding:0 16px; border-radius:30px; display:flex; align-items:center;}
.ph-modal-body .main-content .content-head a.upload-image:hover{ background:rgba(80,130,250,.9);}
.ph-modal-body .main-content .content-head .btn-group{ height:30px; margin-left:10px; background:rgba(80,130,250,.12); padding:0 12px; border-radius:30px; display:flex; align-items:center;}
.ph-modal-body .main-content .content-head .btn-group a{ font-size:12px; line-height:1; color:#5e5959; margin:0 6px;}
.ph-modal-body .main-content .content-head .btn-group a:hover{ color:#5082fa;}
.ph-modal-body .main-content .content-head .btn-group a i{ margin-right:2px;}
.ph-modal-body .main-content .content-head .view-mode{ display:flex; align-items:center;}
.ph-modal-body .main-content .content-head .view-mode .info{ font-size:12px; color:#9e9999; line-height:1; margin-right:10px;}
.ph-modal-body .main-content .content-head .view-mode .info em{ font-size:inherit; color:inherit; line-height:inherit;}
.ph-modal-body .main-content .content-head .view-mode .mode{ display:flex; align-items:center;}
.ph-modal-body .main-content .content-head .view-mode .mode a{ width:30px; height:30px; font-size:12px; line-height:1; color:#5082fa; background:rgba(80,130,250,.12); display:flex; align-items:center; justify-content:center;}
.ph-modal-body .main-content .content-head .view-mode .mode a:first-child{ border-radius:4px 0 0 4px;}
.ph-modal-body .main-content .content-head .view-mode .mode a:last-child{ border-radius:0 4px 4px 0;}
.ph-modal-body .main-content .content-head .view-mode .mode a.active{ background:rgba(80,130,250,1); color:#ffffff;}
.ph-modal-body .main-content .content-head .view-mode .mode a i{ margin:0;}
.ph-modal-body .main-content .content-body{ width:100%; height:calc(100% - 70px); display:flex;}
.ph-modal-body .main-content .content-body .tab-content{ width:100%; height:100%; display:flex; flex-direction:column;}

.ph-modal-body .main-content .disabled.upload-image{background: #cccccc !important;}
.ph-modal-body .main-content .disabled.btn-group{background: rgba(204,204,204,.5) !important;}
.ph-modal-body .main-content .disabled.btn-group a:hover{color: #5e5959 !important;}
.ph-modal-body .main-content .disabled.view-mode .mode a{background: rgba(204,204,204,.5) !important; color: #cccccc !important;}
.ph-modal-body .main-content .disabled.view-mode .mode a.active{background: rgba(204,204,204,.5) !important; color: #cccccc !important;}


.ph-modal-foot{ width:100%; padding:10px 20px; border-top:solid 1px #eceff5; display:flex; align-items:center; justify-content:flex-end; gap:5px;}
.ph-modal-foot-info{ width:100%; padding:15px 20px; border-top:solid 1px #eceff5; display:flex; align-items:center; justify-content:start;}
.ph-modal-foot-info .info-item{ width:100%; display:flex; align-items:center; justify-content:space-between;}
.ph-modal-foot-info .info-name{ font-size:13px; color:#0e0909; line-height:1;}
.ph-modal-foot-info .info-value{ display:flex; align-items:center; gap:10px;}
.ph-modal-foot-info .info-value .value{ font-size:12px; color:#3e3939; line-height:1;}
.ph-modal-foot-info .info-value .value em{ font-size:inherit; color:inherit; line-height:inherit;}

.ph-table-container{ width:100%; height:100%; display:flex; flex-direction:column;}
.ph-table-container .table-header{ width:100%; height:40px; border-bottom:solid 1px #eceff5; display:flex; align-items:center;}
.ph-table-container .table-header .btn-group{ margin-right:20px;}
.ph-table-container .demo-list{ padding-right:10px;}
.ph-table-container .header-cell{ height:40px; flex:1; padding:10px 12px; border-right:solid 1px #eceff5; display:flex; align-items:center; justify-content:start;}
.ph-table-container .header-cell:nth-child(1){ flex:4;}
.ph-table-container .header-cell:nth-child(5){ flex:2;}
.ph-table-container .header-cell em{ font-size:13px; line-height:1; color:#5e5959;}
.ph-table-container .header-cell a{ font-size:13px; line-height:1; color:#5e5959;}
.ph-table-container .header-cell em.gap{ margin:0 3px;}
.ph-table-container .header-cell .sort{ margin-left:10px; display:flex; flex-direction:column;}
.ph-table-container .header-cell .sort i{ height:8px; cursor:pointer; margin:1px 0;}
.ph-table-container .header-cell .sort i.top { border-right:4px solid transparent; border-bottom:4px solid #9e9999; border-left:4px solid transparent;}
.ph-table-container .header-cell .sort i.bottom { border-right:4px solid transparent; border-top:4px solid #9e9999; border-left:4px solid transparent;}
.ph-table-container .header-cell .sort i.top:hover{ border-bottom:4px solid #5082FA;}
.ph-table-container .header-cell .sort i.bottom:hover{ border-top:4px solid #5082FA;}
.ph-table-container .table-body-container{ width:100%; height:440px; overflow-y:scroll;}
.ph-table-container .table-body-container:first-child{ flex:2;}
.ph-table-container .table-row{ border-bottom:1px solid #eceff5; background:#ffffff; display:flex; align-items:center;}
.ph-table-container .table-row .data-cell{ height:100%; flex:1; padding:10px 12px; font-size:12px; display:flex; align-items:center;}
.ph-table-container .table-row .data-cell .image-info{ display:flex; align-items:center; gap:8px;}
.ph-table-container .table-row .data-cell .image-info .cover{ width:36px; height:36px; display:flex; align-items:center; justify-content:center;}
.ph-table-container .table-row .data-cell .image-info .cover img{ width:100%; height:100%; border-radius:4px; object-fit:cover; transition:transform 0.3s ease;}
.ph-table-container .table-row .data-cell .image-info .name{ font-size:12px; color:#0e0909; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ph-table-container .table-row .data-cell .image-info .name.edit{ background:#ffffff; padding:3px; border-radius:4px; outline:none !important;}
.ph-table-container .table-row .data-cell:nth-child(1){ position:relative; flex:4;}
.ph-table-container .table-row .data-cell:nth-child(5){ flex:2;}
.ph-table-container .table-row:hover, .ph-table-container .table-row.selected{ background:#f1f3f8;}
.ph-table-container .table-row .data-cell .demo-list{ opacity:1;}
.ph-table-container .table-row .data-operation{ position:absolute; background:#f1f3f8; height:40px; display:none; align-items:center; z-index:10; right:5px; gap:2px;}
.ph-table-container .table-row .data-operation a{ font-size:12px;}
.ph-table-container .table-row:hover .demo-list{ opacity:1;}
.ph-table-container .table-row.selected .demo-list{ opacity:1;}
.ph-table-container .table-row:hover .data-operation{ display:flex;}
.ph-table-container .table-row .data-cell.ph-trigger{ position:relative;}
.ph-table-container .table-row .ph-trigger .label-name{ font-size:12px; display:flex; align-items:center;}
.ph-table-container .table-row .ph-trigger .label-name i{ font-size:inherit;}
.ph-table-container .table-row .ph-trigger .trigger{ position:absolute; right:-75px; top:5px; width:150px; max-height:120px; padding:10px 12px; background:#ffffff; border-radius:4px; box-shadow:0 0 15px rgba(30,25,25,.12); opacity:0; visibility:hidden; transition:all .3s ease; display:flex; align-items:self-start; flex-direction:column; overflow-y:scroll;}
.ph-table-container .table-row .ph-trigger .trigger a{ width:100%; font-size:12px; line-height:2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;}
.ph-table-container .table-row .ph-trigger:hover .trigger{ opacity:1; visibility:visible;}

.ph-table-container .table-grid{ width:100%; padding:12px; display:flex; align-items:stretch; flex-direction:row; flex-wrap:wrap; gap:10px;}
.ph-table-container .grid-cell{ padding:12px; background:#f7f7f7; border-radius:8px; display:flex; flex-direction:column; justify-content:start; gap:5px;}
.ph-table-container .grid-cell:hover, .ph-table-container .grid-cell.selected{ background:#ffffff; box-shadow:0 0 15px rgba(30,25,25,.12);}
.ph-table-container .grid-cell .name{ width:125px; font-size:12px; color:#0e0909; text-align:center; float:left; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.ph-table-container .grid-cell .name.edit{ background:#f2f2f2; padding:3px; border-radius:4px; outline:none !important;}
.ph-table-container .grid-cell .info{ display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ph-table-container .grid-cell .info em{ font-size:12px; line-height:1.2; color:#9e9999;}
.ph-table-container .image-box{ position:relative; width:125px; height:125px; border-radius:8px; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease;}
.ph-table-container .image-box img{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;}
.ph-table-container .image-box:hover img{ transform:scale(1.05);}
.ph-table-container .image-box .grid-operation{ position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); padding:4px; z-index:10; display:none; align-items:center; justify-content:center;}
.ph-table-container .image-box .grid-operation a{ font-size:12px; margin:0 2px; color:rgba(255,255,255,.8); text-align:center;}
.ph-table-container .image-box .grid-operation a:hover{ color:rgba(255,255,255,1);}
.ph-table-container .image-box .demo-list{ position:absolute; top:5px; left:5px; z-index:10; opacity:0;}
.ph-table-container .grid-cell:hover .demo-list, .ph-table-container .grid-cell.selected .demo-list{ opacity:1;}
.ph-table-container .grid-cell:hover .grid-operation, .ph-table-container .grid-cell.selected .grid-operation{ display:flex;}

.ph-table-container .table-folder{ width:100%; padding:15px; display:flex; align-items:stretch; flex-direction:row; flex-wrap:wrap; gap:15px;}
.ph-table-container .folder-cell{ position:relative; padding:12px 10px; background:#f7f7f7; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.ph-table-container .folder-cell:hover, .ph-table-container .folder-cell.selected{ background:#ffffff; box-shadow:0 0 15px rgba(30,25,25,.12);}
.ph-table-container .folder-cell .name{ width:80px; font-size:12px; color:#5e5959; text-align:center; float:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ph-table-container .folder-cell .name.edit{ background:#f2f2f2; padding:3px; border-radius:4px; outline:none !important;}
.ph-table-container .folder-cover{ width:50px; height:50px;}
.ph-table-container .folder-cover img{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;}
.ph-table-container .folder-cell .demo-list{ position:absolute; top:5px; left:5px; z-index:10; opacity:0;}
.ph-table-container .folder-cell:hover .demo-list, .ph-table-container .folder-cell.selected .demo-list{ opacity:1;}

.ph-table-container .table-system{ width:100%; padding:15px; display:flex; align-items:stretch; flex-direction:row; flex-wrap:wrap; gap:15px;}
.ph-table-container .system-cell{ position:relative; padding:10px; background:#f7f7f7; border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.ph-table-container .system-cell:hover{ background:#ffffff; box-shadow:0 0 15px rgba(30,25,25,.12);}
.ph-table-container .system-cell .name{ width:80px; font-size:12px; color:#5e5959; text-align:center; float:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ph-table-container .system-cell .system-cover{ width:80px; height:80px; border-radius:8px; overflow:hidden; cursor:pointer;}
.ph-table-container .system-cell .system-cover img{ width:100%; height:100%; border-radius:8px; object-fit:cover; transition:transform 0.3s ease;}
.ph-table-container .system-cell .system-cover:hover img{ transform:scale(1.2);}

.we-check-box{ display:flex; align-items:center;}

.ph-crop-container{ width:100%; padding:20px; display:flex; flex-wrap:wrap; gap:25px;}
.ph-crop-container .crop-area{ flex:1; min-width:300px; display:flex; flex-direction:column;}
.ph-crop-container .scale-box{ width:100%; margin-bottom:10px; display:flex; align-items:center; gap:5px;}
.ph-crop-container .scale-box .we-check-box{ gap:10px;}
.ph-crop-container .crop-box{ width:100%; border:1px dashed #5082FA; border-radius:8px; overflow:hidden; position:relative; background:rgba(30,25,25,.06); display:flex; justify-content:center; align-items:center;}
.ph-crop-container #image-to-crop{ max-width:100%; max-height:100%; position:absolute; cursor:move;}
.ph-crop-container .controls{ margin-top:15px; display:flex; flex-direction:column; gap:10px;}
.ph-crop-container .zoom-control{ display:flex; align-items:center; gap:10px;}
.ph-crop-container input[type="range"]{ flex:1; height:6px; -webkit-appearance:none; appearance:none; background:rgba(30,25,25,.06); border-radius:3px; outline:none;}
.ph-crop-container input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; background:#5082FA; border-radius:50%; cursor:pointer;}
.ph-crop-container .preview-area{ flex:1; min-width:250px; display:flex; flex-direction:column; justify-content:start;}
.ph-crop-container .preview-title{ margin-bottom:10px; color:#1e1919;}
.ph-crop-container .preview-box{ width:200px; border:1px solid #dddddd; border-radius:8px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.1);}
#preview{ width:100%; height:100%; object-fit:cover;}
@media (max-width:768px){
  .ph-crop-container{ flex-direction:column;}
  .ph-crop-container .crop-area, .ph-crop-container .preview-area{ width:100%;}
}