@media (min-width: 1300px) {
  .layui-container {
    width: 1250px
  }
}

@media (min-width: 1400px) {
  .layui-container {
    width: 1350px
  }
}

@media (min-width: 1500px) {
  .layui-container {
    width: 1450px
  }
}

@media (min-width: 1600px) {
  .layui-container {
    width: 1550px
  }
}

@media (max-width: 768px) {
  .crumbs {
    margin-top: 10px;
  }

  .pc {
    display: none !important;
  }
}

#header {
  margin-bottom: 1rem;
  background-color: #2f363c;
}

.jumbotron {
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px dashed #ff9163;
  padding: 40px 0 30px;
}

#upload-box {
  width: 100%;
  background: #fafafa;
  padding: 20px 0;
  margin-bottom: 10px;
}

.hidden {
  display: none
}

body {
  font: 15px Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
  color: #333;
}

th,
td {
  white-space: nowrap !important;
  vertical-align: middle !important;
  padding: .5rem 1rem !important;
  text-align: center !important;
  min-height: 24px !important;
  line-height: 24px !important;
}

img,
video {
  max-width: 100% !important
}

a {
  color: #888;
}

a:hover {
  color: #5872f7;
}

p {
  font-size: 15px;
  line-height: 28px;
}

.filelist {
  table-layout: fixed;
}

.arrow-down {
  content: '';
  width: 0;
  height: 0;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  -webkit-transition: all .2s;
  position: absolute;
  top: 50%;
  margin-left: 6px;
  margin-top: -3px;
  border-width: 6px;
  border-top-color: rgba(128, 102, 102, 0.7);
}

.arrow-down.arrow-up {
  margin-top: -9px;
  border-style: dashed dashed solid;
  border-color: transparent transparent rgba(128, 102, 102, 0.7);
}

input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}

.batch-upload input[type=file] {
  display: inline-block;
  left: 32px;
  width: 32px;
}

#masonry {
  margin-top: 10px;
  margin-bottom: 10px;
}

.crumbs {
  text-align: right;
  font-weight: 900;
  padding-right: 10px;
}

.crumbs a i {
  font-size: 18px;
  margin-left: 15px;
  position: relative;
  display: inline-block;
}

.crumbs a i:hover {
  color: blue;
}

.layui-breadcrumb>* {
  font-size: 18px;
}

.route {
  padding-left: 15px;
}

.route .layui-breadcrumb>* {
  color: #888 !important;
  font-size: 16px;
}

.route .layui-breadcrumb .icon {
  font-size: 18px !important;
}

.layui-icon-shrink-right,
.layui-icon-spread-left {
  font-size: 16px !important;
  margin-right: 12px !important;
}

.layui-icon:hover,
.iconfont:hover {
  color: #63ab5e;
}

.layui-fixbar-top:hover {
  color: #9b0913 !important
}

.layui-card {
  background-color: #f9f9f9;
  text-align: center;
}

.layui-card-body {
  padding: 20px 15px 10px;
}

.layui-card-body:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

.table-name {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layui-laypage {
  display: block;
}

.layui-table {
  color: #87888a;
}

.layui-layer-title {
  border-bottom: none;
}

.layui-icon-close:before {
  content: none;
}

.layui-layer-setwin .layui-layer-close2 {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8xNC8xNxpI5/gAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAEN0lEQVRIiaWXTUhjVxTH/+diAmNMDGpCSCBNtWFEIQ0MFAYGZlNt6aKbUhpxYeAZxY0MlGy7K67LLIraYA26sd2UblrUEYp0oIKIgviBaaqNlYRIJgkulDm3i+Q9XvJenjoeCLxz7j3nd9595957QlJKqEJEsBJmfg7gGYAgAB+AtwAKRPQ3gE0i2rQMoBcppfZrMR5l5llmzstbhJn/ZeaXzDxw5wRMgEFmnrkNZpHEN8zsaRXfdG2llB9LKX8iIrfeXigUsLe3h1KphGq1CiKCw+FAV1cXIpEIurq6muP8ByAmhPjjVjAzjxHRj3rb7u4u1tbWkM/nLVfJ7/djeHgY/f39zQl8LoT4tSWYmT8hot9UvVKpYHl5Gdls1hLYLOFwGCMjI2hvb9fDn+vfXAMz8/sA9ojIAQC5XA6Li4sol8v3gqrS3d0NRVG05ZdS/kNEHxLRGwAQurlTKrRcLj8ICgDFYhGpVApXV1cAACJ6D8CUOi7q2TwhoqRqXFpaehBUD19ZWdGbZpj5Az1Yy2RnZwenp6eGIH6/3xJit9vhdrsN9oODAxwdHelNUxqYiBTVur6+bnCORqOYnp5GIpGAzWYzjPt8PiSTSSSTSdjtdsP46uqq9qyyBDMPqcZsNotCoWBwPDk5QblcRl9fH+LxeAPc6/UikUjA6XQik8ng+vra4H92doaLiwtV7WTmjwRqZy8A4Pj42OAE1LbV7OysAe71ejE5OQmHw4FMJoN0Om3qbxL7mQDwWNXM3laVYrHYAFcUpQG6sLCAm5ublv5NsR8LIvKpWrVabemowufn51EulxEKhe4MNYntE60mthIiarg+hbh3iJqflFL76h0dHZaTPR6PVkjZbBaVSgWhUAiKophWu16aYl8IAIf6wFbQiYkJrXpTqRTm5uYa4GZbqUXsQwFA6xrC4bCpk9vtboCq37RQKDTAx8bGWi59U+xNQUSvVC0YDBruVAAIBAJwOp04OTkxFJIKVwuura3N1N/n02r4jRDiLwIAZv6TiJ4CwPb2dvP5CqB2UFjdxzabDY8ePTI94+PxuHZHSym/E0K8UNfla3VSNBpFIBAwON/WBNzc3JhCe3t7mxuD74H6WS2EeC2lfF1/RiwWa7jE31VcLhdisZimSym/FUIcauC6TEkpr4FaBSqKAqfT+c5Qt9uN8fFxuFwuFVpE/W0BY+vzBRH9rOqlUgnpdBrn5+f3goZCIYyOjjYkLqX8VAjxuym4Djc0e1tbW9jY2MDl5aUl0OPxYGhoCJFIpMEupfxKCNFQsabtLTN/BuAXImrYG7lcDvv7+6hUKsjn8xBCoKenB52dnRgcHNRvGRVYIqIviWjNMuMm+AAzv3xAQz8jpQzeGWiSwFNmTjPz1R14JWb+QUr55La41v/SjEkModY4+AAMENFbKeUhgByATSHEK8sAOvkfU5us3WE/neAAAAAASUVORK5CYII=');
  position: absolute;
  right: -28px;
  top: -28px;
  width: 30px;
  height: 30px;
  margin-left: 0;
  transition: All .4s ease-in-out;
  *right: -18px;
  _display: none;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}

.layui-layer-setwin .layui-layer-close2:hover {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8xNC8xNxpI5/gAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAEXUlEQVRIiaWXf2iVZRTHv8957t3d3ruSja0mA82NLTMl7gZzjJH0A0RLCKIiskDTzFhmhFrLqKDAMtHMGvvRVn8lSFFS2i/s19rWmC2DVlKbiRtzc2Ngce1u95ynP+7e1/e97/2x6fnvnOf5ns95fr3P8yrMw0RkFYB6AIsAlABgABeUUmcAdCqlOueTL6MZYx5g4QEWZpPFWDjOwqdYeN3VAGtZuDsbLEMRJ1h4abr8Kg10pxjZQ4o87dOjo+CeXtDkFGR4GABAlRUwxUUI1K1EIJzvySNGBMB2TfqtrGAWbiVFmzzArh7EWzsQ/6k37Qwpy0LgztsR2LwBwfKy5AJe0aRfSAtm4UZS9KrjT0witvtlxL//IS3QZ8EchDY+guATj4GCQTd8m3vkDpiFbwXwrT29M4NDiDVsh5w9N3eoywL1dQgd2AttWTY4TorKlFLnAIBcfffaUJ6YQOzxbVcMBYB4ZxemdzTCxOMAAFIUANBqtxMAGGPWk6IaOxjb8TxkZOSKobbNfPMdplva3aHVLHyHAxYjzsLPfPFVyk1ES2/MCFGWBVpY4otPt7ZDxsbdodccMCmqtKOxg2/7xMG71iD/o8Ow2puhQiF/UZUVCB//BPmfH4WaXVPbTCyGWFPL5b6KqgCAWHiXHeT+XyFnzvoS88/9kAsTCNTWIK/poAdO5WUItzeDiosQ7+2DiUZ9+vixL2H+i9muYuENBGCt06G7xycCABk9j+jGLT44lZch/H4bVGEBuLcPlxqeTqk3//4D+W3AHbqHANzgAP4aSikEABkc8sCttiYPNLqlASYWS6vn30+73QoiRdc6yScn0gqT4bo6MmcoAJipKbdbQJ5WlozilKb1/DUASIxcdJyiosydlyyGNbuR+GS/M3KrrSnlbnebKihwu1ME4G8ncfmSzND32hLQ3j5EN231TLvV1uQ7Ssl6l/1JAI7ZXqCuNrVoYYkXOrumyWued2g/QOTTq1AIurrKHfqYSNF+29ORW0ClpT6hXnZT4pz29Po2kgMfG0egOgKVm+vTB+5eA5XrLIXRpDsSl4LwRVJ0DQDMfHocl3Y2+kddXgYZTH/cVCgEtWABZHzc2xDMQfjoEejFixKFGvlFk47Y8/KM02/taugVy32JM0GBxKfRBwWQ8/CDDnTWngO897EzahkbR/S+hyATmc91NgusrIHVcgiYfRCIkR816XrAex8/KiZxjun665D3zptZj1cm01UR5O3b44YaAE/Z7Q5Ykz4C4A3HX74M1ocfQFdF5g0N3n8vwh3NUIWes7tbkz5pO3N67M18fQLTze+CvR96P/C2Vch5cit00t0tRg5o0p4bJOXzloVfBPASqaQv6vAIuKsbPPDH5QR5eaAVN0PX1kAXFiYDDSl6Vin1esaKk+DrWPjUVTzou40xqb9IcyxgMwsPsmT9gzHGGGHh08aY9dnyppzqDEXsQuLhUAyglBSJGBkFcB7AZ5r0vrnm+h+4JqLbk005nAAAAABJRU5ErkJggg==');
  transform: rotate(180deg);
  background-color: rgba(0, 0, 0, 0);
}

.btn-enter {
  cursor: pointer;
}

.action .layui-btn {
  background: none;
  border: none !important;
  padding: 0 3px;
}

.action .layui-btn i {
  font-size: 16px !important;
}

.layui-btn+.layui-btn {
  margin-left: 3px;
}

.layui-table tbody tr:hover {
  /*
  transform: scale(1.01);
	transition: transform 0.3s ease-in-out;
	position: relative;
  */
  background-color: #f2f2f2;
}

.layui-table tbody tr.selected {
  background-color: #f2f2f2 !important;
}

.layui-table td,
.layui-table th {
  font-size: 15px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.layui-table .file-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.layui-tree {
  line-height: 22px;
  padding: 10px;
}

.layui-tree-branch {
  display: none
}

.layui-tree-branch+cite {
  color: #e20808;
  font-weight: 900;
}

.layui-btn,
.layui-laypage-em {
  border-radius: 8px;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  border: none;
}

.layui-btn-danger {
  background: linear-gradient(90deg, #f42b2b 0%, #ef4444 100%);
}

.layui-btn .layui-icon {
  margin-right: 0;
  padding: 0;
}

.layui-breadcrumb span[lay-separator] {
  margin: 0 5px;
}

.layui-btn-xs {
  height: 25px;
  line-height: 25px;
  padding: 0 8px;
}

.layui-btn-xs i {
  font-size: 14px !important
}

.layui-btn-xs i.icon-delete {
  font-size: 16px !important
}

.layui-btn-menu {
  background: #fff;
  padding: 0;
  border-radius: 20px;
  display: inline-block;
  margin-left: 5px;
  bottom: 3px;
}

.layui-btn-menu .btn-menu {
  width: 15px;
  line-height: 25px;
  color: #555 !important;
  padding: 0 8px !important;
}

.layui-nav li a i {
  margin-right: 5px;
}

.layui-nav .layui-form {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 60px;
}

.layui-nav .layui-input {
  height: 30px;
  line-height: 30px;
  border: 1px solid #5d872f;
  background: #333640;
  border-radius: 20px;
  color: #fff;
  width: 250px;
}

.search:hover {
  border-bottom: none !important;
}

.layui-nav-bar {
  height: 2px;
}

.layui-nav .layui-input:hover {
  border: 1px solid #b76f32 !important;
}

.layui-nav .layui-input:focus {
  border: 1px solid #b76f32 !important;
  /* width: 300px; */
}

.layui-form .layui-btn {
  min-width: 100px;
}

@media (max-width: 768px) {
  .search {
    display: none !important;
  }

  header .nav-left .layui-nav-item {
    display: none
  }

  header .nav-left .layui-nav-item.logo {
    display: block;
  }
}

/*
.layui-btn-menu .layui-this:after,
.layui-nav-bar,
.layui-nav-tree .layui-nav-itemed:after {
  height: 0 !important;
  background-color: #fff !important;
}

.layui-btn-menu .layui-nav-child dd.layui-this,
.layui-btn-menu .layui-nav-child dd.layui-this a {
  color: #333;
  background-color: #eee !important;
}

.layui-btn-menu .layui-nav-child {
  z-index: 9999 !important;
  top: 34px;
  left: -30px;
  background: #fff;
}

.layui-btn-menu .layui-nav-child a {
  font-size: 13px;
  line-height: 30px;
}
*/



.logo a {
  color: #fff !important;
  font-size: 20px;
}

.nav-right {
  position: absolute;
  right: 0;
  top: 0;
}

.signin,
.signup,
.reset {
  max-width: 400px;
  margin: 20px auto;
}

.signin .reset {
  float: right;
  margin-top: 10px;
}

.weixin-login {
  color: #4ed01e;
  font-size: 25px;
}

.input-group input {
  display: inline-block;
  width: 320px;
}

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1604933705048');
  /* IE9 */
  src: url('iconfont.eot?t=1604933705048#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAfYAAsAAAAADsQAAAeLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqPLIxLATYCJAMoCxYABCAFhG0HfBuFDFGUUFIa2VcYt/BEobqLbDxfdBYR+YSoxOGhZgeArQBAAgBAiqwgi/b7zezunX9BTKInk0YidAgVQiHRaJWQyXRNnt/lsi2lFJkZ7HdJ7araq5t8PsntTbJfcN1pjMMhJAgHDzyX+zf5IpnA8dTiNm7qAHt+3KQ8goC2wA3Vps1AajsrcYiKr0TMSR1ah5jVnEDFJbLAt6e/+tNogABA4GmOpD7ffq7OMGsL5fC2UHjU9MXu+6HmmbRIJqSJeINGs9AghYgFeNt90gRXiYGAbFLFUOv89gEmGZYnNiy0SmDS0soCqijK3iNgDB6QiOG9vAUPyt/zr1kEhIvAerwcneVw+DKaj9bMUNKAyq4bwDkYoIB1AAMWnr2PIg2uK0L22h67Aei1eIhOXhUimfKNvqrenebLBmez5iex3dTLNV39Nw+QCOOoKPAITAGhHvLu5hK8GgmkIZoDQSCKgGAQM4HgIOYDQSGOAiFCVKERArw7NYKHT54efCFLAfoBdoFMALQKVjpWup0eYXnkGT10a2aHHMZElGq9Ha3VKC2O13Z7sHZql5ZOrswlaVX0pJEcMZuUaug7M1EVde2ejcHBu8Hk9fu2q448YAABEUntyttuZFUYLnc/Kcbki8BAuoQIxQqEZy5AoYw1Z9hCBmOHZsxc5OYzXVJlpNoquEqmRkhzD3FSG370gRB4WUCoZE7EYnKl/lKhlqm40wFaajbLOYhqCWLe3swo/Pp729LZA2dOmZXM7Mt16ICobM6U6D7T4oNvq0i5SqYWUTMLUmW9XGVeKguzUmmKsNn98KRZ6JpWVmIJ3K+SK4GOH5ccWQm7tmSDrDbyPK3RMAhCrbYEk7++f1l25cEbxat7l0Cdex0AkU7HVStfYhgck16sxpLgLxXS5o67LxOtQagOg8CTfBP3PggR3qlOzqq0hfvPyy5YqXV5OgWzoCnYd056Vqzks3msiufzp6VmSzGzLpqTmS9r2ZLnWscTurRnGoejfDJ38q70nuKB7H5TP2iuUSSZU3gz7Z+u0/3Daf9m+Y+05q8c7Tge0XEajc1Rni1eYCsZHXf6vuyB4p707kakOCcunj6JkfLl3oArHZy8RwGhWAI0xFlMwM2dQcUUR24EJOwS2suvJ1NYFclvV7/7Drr22dYkRAJEsx15QLIgvDj8htce48XanNvEzt0kUGVxmurK86y/Xo3oG8qyLaUaqFmhndGrnwuECfYeOwVEMZYBJBPt9c6nz/u91y+v995xDc8tLolvXHSsv5qQdLGto3211GZ7sD8oWJ0f71JLBVO/yGOqj0omI01s99kcDkoXCBZ5TVoOPw9RQeS1dS/9438d26hgm2CqjUy2SS7v1MocecTtTv84GQiFX+2uBKzdQTI4Mk3eCg7F5/uFek/jP47HWXvN4F/xffQVrc1axx3/Ud8WXfwkMRtJIyujxU2LsOxweIUwRFZl5PdLfsRpOS58OC9Y/KENE3HHBLCODDF70oiEQy57jIkYkZD43cXFtzgBwZIwnoMDA5DjMGmGg4tgUbUaVjFuE7KnKLJoT0jksc8m70MI3O9IxH1EUFKIzfi4DZlHFu29H4A/qfBP4j7c4Z5ne15cDgwx2RAPIiuSIgH69m5TzjKTaPCV2CS+nS3KKDQL325Fwm8lX89FsB6I+lbd3hJ5zu9s5O2tfQa9BtJU5Fm/c5GvrX2rQHEsO9vSQig8NoEsLJVZsPhREsN59BRMTrpRErs7kxNqO4ntHYtFNdBX/0emn4SpwhRpyf/4P7jok4YRRpn/43sP+/kiMPrnm3v4XfzXm+jAXy/uupfAAQnkYMlAf4lohIP9IFtuQFKyd3EwShLdFNUIQgo0tPm2+h46O4+sdTJyAsL0Dqc9b3wVSK9bEdH0jh0597NyiEzagtEH2xfVLNvB6MXlC1vj9eflhfBk7o+2TcwMeQ8xYv/bdvApgAVS1S3u56XAjh2j9QLAggNKwWbYtfFInbl3wUxZKeiD50bt+wpMmveCLpPavesrYQYYyLFP3p6Yi2oGQBEs7RwqEoATyEkZwZWTfvz9yD7HxqW5aGmu03gAQAcjm9a823vIdwAjd4Z/Rh0G9KZQvzOO8Py++Io6u/8R/fWYvXzYRaPNTTa9kfjxLJD4VaEiXrEXw8L8vjcE+sdr7tYS2C0RMvcE+DUZ7PWXdceAYropWqgzEMEEUNG81vLWgVNsAC/aA9mai+BFH28E4wRg1ScDqOsLiLYnqF55P9CQ9wucQf+cR1kKsqtgJcJisevpE48JYy7SZ6EzKiTfwdPqxjtUXZt4Yo6untAHTYVo1hqfhQss0GfhJfRUi1kK6cmJc8YDWkui9NTBjGttzJfb9bq8eq1l5GDaEQ8lWKqbE1LPplqGFOTzbNrx+3eQ0mUlfMCJT9MnyAv064WmmkYE7YVQRDqxKtuDHqWFqVsSwn6POMI5dSPLzRKh9LbXgTKspp1gurStTjfJqEKteMmNbebP6hT2Q3MgVBodPQMjEzML3DJJLY5mVD6P52iRcSIgsy7UdGYpYITPGEZE6+OSbI5+1OrAc+42u3lO/cJSkgMAAA==') format('woff2'),
    url('iconfont.woff?t=1604933705048') format('woff'),
    url('iconfont.ttf?t=1604933705048') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1604933705048#iconfont') format('svg');
  /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-table:before {
  content: "\ead4";
}

.icon-copy:before {
  content: "\e616";
}

.icon-delete:before {
  content: "\e650";
}

.icon-setting:before {
  content: "\e617";
}

.icon-closeeye:before {
  content: "\e64a";
}

.icon-eye:before {
  content: "\e823";
}

.icon-folder:before {
  content: "\e6aa";
}

.icon-list:before {
  content: "\e68e";
}

.icon-clouddownload:before {
  content: "\e611";
}

.user-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px;
  height: 300px;
  transition: transform 0.3s ease;
}

.user-card:hover {
  transform: translateY(-5px);
}

.user-header {
  text-align: center;
  margin-bottom: 25px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.user-name {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.user-email {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.user-details {
  padding-top: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-label {
  color: #888;
  font-size: 14px;
}

.detail-value {
  color: #333;
  font-weight: 500;
}

.storage-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  margin-top: 5px;
  overflow: hidden;
}

.storage-progress {
  height: 100%;
  width: 5.3%;
  background: linear-gradient(90deg, #6e8efb, #a777e3);
  border-radius: 4px;
  transition: width 0.5s ease;
}