html {
   height: 100%;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff5c0;
   /* background: linear-gradient(-45deg, #ff4d4d, #ff0844, #ffb199, #ff416c); */
   /* background: linear-gradient(-45deg, #f7dd2f, #ff9b08, #ffb199, #ff416c); */
   /* background: linear-gradient(-45deg, #ffcf83, #feb953, #f9c9bb, #f98aa3); */
   background-size: 400% 400%;
   animation: gradient 15s ease infinite;
   overflow: hidden;
 }

 @keyframes gradient {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 /* 添加红包和金币动画元素 */
 .lucky-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: hidden;
 }

 .lucky-item {
   position: absolute;
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 0;
   animation: fall 3s linear infinite;
 }

 .red-packet {
   width: 40px;
   height: 50px;
   background-image: url("../image/hb.png");
   /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF0000" d="M20,4H4C2.89,4 2,4.89 2,6V18C2,19.11 2.89,20 4,20H20C21.11,20 22,19.11 22,18V6C22,4.89 21.11,4 20,4M20,18H4V12H20V18M20,8H4V6H20V8M13,16H15V14H13V16M9,16H11V14H9V16Z"/></svg>'); */
 }

 .coin {
   width: 40px;
   height: 40px;
   background-image: url("../image/jb.png");
   /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFD700" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,7H13V14H11V7M11,15H13V17H11V15Z"/></svg>'); */
 }

 @keyframes fall {
   0% {
     transform: translateY(-100px) rotate(0deg);
     opacity: 1;
   }

   100% {
     transform: translateY(calc(100vh + 100px)) rotate(360deg);
     opacity: 0;
   }
 }

 /* 添加闪烁光效 */
 .light {
   position: fixed;
   width: 100%;
   height: 100%;
   pointer-events: none;
   background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
   animation: shine 4s ease-in-out infinite;
 }

 @keyframes shine {

   0%,
   100% {
     opacity: 0.3;
   }

   50% {
     opacity: 0.7;
   }
 }

 #my-lucky {
   width: 35rem;
   height: 35rem;
   filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
   z-index: 1;
   position: relative;
   top: 2rem;
 }

 .header-info {
   position: absolute;
   top: 3%;
   left: 3%;
   z-index: 1;
 }

 .header-info>i {
   font-size: 72px;
 }

 .header-info > img {
   width: 200px;
 }

 .logo-style {
   background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-size: 200% 100%;
   animation: logo-name 5s infinite linear;
   font-size: 30px;
   font-family: fantasy;
   display: flex;
   width: min-content;
   align-items: center;
 }

 @keyframes logo-name {
   0% {
     background-position: 0 0;
   }

   to {
     background-position: -100% 0;
   }
 }

 @font-face {
   font-family: "icomoon";
   src: url("../fonts/icomoon.eot?9wlqx1");
   src: url("../fonts/icomoon.eot?9wlqx1#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?9wlqx1") format("truetype"), url("./fonts/icomoon.woff?9wlqx1") format("woff"),
     url("../fonts/icomoon.svg?9wlqx1#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }

 [class^="icon-"],
 [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: "icomoon" !important;
   /* speak: never; */
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 .icon-logo:before {
   content: "\e900";
 }

 /* .lucky-title {
   position: fixed;
   top: 6%;
   left: 50%;
   transform: translateX(-50%);
   font-size: 36px;
   font-weight: bold;
   padding: 10px 30px;
   border-radius: 25px;
   background: linear-gradient(135deg, rgba(255, 219, 131, 0.9), rgba(255, 122, 51, 0.9));
   color: #fff;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   box-shadow: 0 4px 15px rgba(255, 122, 51, 0.3);
   z-index: 10;
   font-family: "Microsoft YaHei", sans-serif;
   letter-spacing: 2px;
   backdrop-filter: blur(5px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   animation: titleFloat 3s ease-in-out infinite;
 } */

 .lucky-title {
  position: fixed;
  /* width: 300px; */
  height: 120px;
  top: 18px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  animation: titleFloat 3s ease-in-out infinite;
 }

 .lucky-title img {
  /* width: 100%; */
  height: 100%;
 }

 @keyframes titleFloat {

   0%,
   100% {
     transform: translateX(-50%) translateY(0);
   }

   50% {
     transform: translateX(-50%) translateY(-10px);
   }
 }

 /* 添加奖品展示弹窗样式 */
 .prize-popup {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 219, 131, 0.95));
   padding: 20px;
   border-radius: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   text-align: center;
   z-index: 1000;
   animation: popIn 0.5s ease-out;
 }

 .prize-popup img {
   width: 120px;
   height: 120px;
   object-fit: contain;
   margin-bottom: 10px;
 }

 .prize-popup h2 {
   color: #ff7a33;
   margin: 10px 0;
   font-size: 24px;
 }

 @keyframes popIn {
   0% {
     transform: translate(-50%, -50%) scale(0.5);
     opacity: 0;
   }

   100% {
     transform: translate(-50%, -50%) scale(1);
     opacity: 1;
   }
 }

 /* 修改奖品栏样式 */
 .prize-sidebar {
   position: fixed;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.9);
   padding: 20px;
   border-radius: 15px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   z-index: 3;
   width: 300px;
   transition: transform 0.3s ease-in-out;
 }

 /* 隐藏状态的样式 */
 .prize-sidebar.hidden {
   transform: translate(calc(100% + 20px), -50%);
 }

 /* 添加切换按钮样式 */
 .toggle-stats {
   position: fixed;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   background: #ff7a33;
   color: white;
   padding: 10px;
   border-radius: 10px 0 0 10px;
   cursor: pointer;
   z-index: 99;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease-in-out;
   writing-mode: vertical-lr;
   font-size: 14px;
   letter-spacing: 2px;
   height: auto;
   display: flex;
   align-items: center;
   opacity: 0;
   pointer-events: none;
 }

 .toggle-stats.visible {
   opacity: 1;
   pointer-events: auto;
 }

 .toggle-stats:hover {
   background: #ff8c4d;
 }

 .prize-sidebar h3 {
   margin: 0;
   text-align: center;
   font-size: 18px;
 }

 /* 修改表头样式 */
 .stats-header {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   padding: 8px;
   background: rgba(255, 122, 51, 0.1);
   border-radius: 8px;
   margin-bottom: 10px;
   font-weight: bold;
   color: #ff7a33;
 }

 .stats-header span {
   text-align: center;
   font-size: 14px;
 }

 /* 修改奖品项样式 */
 .prize-item {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   padding: 8px;
   margin-bottom: 8px;
   background: rgba(255, 219, 131, 0.2);
   border-radius: 8px;
   align-items: center;
 }

 .prize-item .name,
 .prize-item span {
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0 5px;
 }

 .prize-item .name {
   font-weight: bold;
   color: #333;
 }

 .prize-item span {
   color: #666;
   font-size: 12px;
 }

 /* 添加关闭按钮和头部样式 */
 .sidebar-header {
   margin-bottom: 15px;
 }

 .sidebar-header h3 {
   margin: 0;
   color: #ff7a33;
   font-size: 18px;
 }

 .close-btn {
   background: none;
   border: none;
   color: #ff7a33;
   font-size: 24px;
   cursor: pointer;
   padding: 0 5px;
   line-height: 1;
   transition: color 0.3s ease;
   position: absolute;
   right: 8px;
   top: 20px;
 }

 .close-btn:hover {
   color: #ff8c4d;
 }

 .settings-content {
   display: flex;
 }

 .settings-item {
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   width: max-content;
   align-items: center;
   cursor: pointer;
 }

 .settings-title,
 .settings-value {
   color: #fff;
   display: inline-block;
   /* padding: 8px; */
 }

 .settings-title {
   opacity: 0.6;
   width: 24px;
   height: 24px;
   padding: 3px;
   text-align: center;
   border-radius: 50%;
   background-color: #000000b3;
 }

 .settings-title>svg {
   width: 20px;
   height: 20px;
 }

 .settings-value {
   font-size: 13px;
   color: rgb(233, 213, 171);
 }

.settings-panel {
  position: fixed;
  right: 0px;
  bottom: -65px;
  width: auto;
  height: 65px;
  background-color: rgba(0, 0, 0, 0.463);
  border-radius: 20px 0px 0 0;
  transition: all 0.3s ease;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 4;
}

.settings-button:hover~.settings-panel,
.settings-panel:hover {
  bottom: 0;
}

/* 设置图标的过渡动画 */
.settings-button svg {
  transition: transform 0.3s ease;
}

/* 当面板处于上移状态时，旋转图标 */
.settings-panel:hover svg,
.settings-button:hover svg {
  transform: rotate(180deg);
}

.settings-title>svg {
  transform: none !important;
}

.settings-button {
  position: absolute;
  right: 0;
  top: -34px;
  height: 34px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  border-width: 1px 1px 0px;
  border-style: solid solid solid;
  border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7);
  border-image: initial;
  border-bottom: 0px;
  border-radius: 40px 40px 0px 0px;
  /* background: rgba(255, 255, 255, 0.5); */
  background-color: #ff8c4d;
  color: #FFF;
}


.modal,
.settings-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: 5% auto;
  /* padding: 20px; */
  border-radius: 4px;
  width: 60%;
  max-width: 500px;
  position: relative;
  box-shadow: rgb(169, 163, 155) 0px 0px 200px;
  background: rgb(0 0 0 / 52%);
  color: #c7c7c7;
}

.el-upload__text>em {
  color: yellow
}

.modal-content h2 {
  color: #fdd835;
  text-align: center;
  background: #00000069;
  margin: 0;
  padding: 14px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  color: #b7b7b7;
  cursor: pointer;
}

.upload-setting {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.upload-container,
.download-template {
  margin: 40px 0;
}

.upload-container {
  width: 200px;
  height: 200px;
}

.upload-area {
  border: 2px dashed #e5e5e5;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: yellow;
}

.upload-area.dragover {
  border-color: #dcd21c;
  background-color: rgba(33, 150, 243, 0.1);
}

.upload-text {
  color: #e5e5e5;
}

.upload-text:hover {
  color: #fbdcad;
}

.upload-hint {
  font-size: 12px;
  /* color: #999; */
  margin-top: 8px;
}

.upload-status {
  margin-top: 10px;
  padding: 10px;
  display: none;
  position: absolute;
}

.upload-status.success {
  color: #fdd835;
  display: block;
}

.upload-status.error {
  background-color: #efe96e;
  color: #c62828;
  display: block;
  border-radius: 12px;
}

.modal-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: #0000005c;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.modal-button {
  display: flex;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.modal-button.confirm {
  background-color: #f9a825f5;
  color: white;
}

.modal-button.confirm:hover {
  background-color: dda602;
}

.modal-button.cancel {
  background-color: #e0e0e0;
  color: #333;
}

.modal-button.cancel:hover {
  background-color: #bdbdbd;
}

.settings-modal {
  z-index: 1999;
}

.logo-upload {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1.5px dashed;
  border-radius: 4px;
  cursor: pointer;
}

.logo-upload:hover {
  border-color: yellow;
}

.upload-input {
  display: none;
}

.flex {
  display: flex;
}

.logo-setting {
  margin: 10px;
  padding: 0 20px;
  overflow: auto;
  max-height: 400px
}

.logo-upload-title {
  color: #f6df06;
  margin-bottom: 12px;
  font-size: 16px
}

/* 自定义复选框样式 */
.reset-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 创建自定义复选框 */
.reset-item {
  position: relative;
  padding-left: 35px;
  margin: 15px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  display: flex;
  align-items: center;
}

/* 自定义复选框的框 */
.reset-item label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 3px;
  background-color: transparent;
  transition: all 0.3s ease;
}

/* 自定义复选框的勾 */
.reset-item label:after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 12px;
  border: solid #f6df06;
  /* 黄色的勾 */
  border-width: 0 2px 2px 0;
  opacity: 0;
  transition: all 0.3s ease;
}

/* 选中状态的样式 */
.reset-item input[type="checkbox"]:checked+label:before {
  border-color: #f6df06;
  background-color: #9c9c9c66;
}

.reset-item input[type="checkbox"]:checked+label:after {
  opacity: 1;
  transform: translateY(-75%) rotate(45deg);
}

/* 悬停状态的样式 */
.reset-item:hover label:before {
  border-color: #f6df06;
}

/* 确保文字垂直居中 */
.reset-item label {
  margin: 0;
  cursor: pointer;
  color: #c7c7c7;
}

 .load {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #fff5c0;
     opacity: 1;
     filter: alpha(opacity=80);
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .loading {
     font-weight: bold;
     letter-spacing: 2px;
     color: #000;
     animation: smoke-out 1s ease-in-out infinite alternate;
     text-shadow: 0 0 1px white;
     font-family: Mangueira Alt, sans-serif;
 }
 @keyframes smoke-out {
     100% {
         opacity: 0.08;
         filter: blur(5px);
         letter-spacing: 4px;
     }
 }

 .loading:before {
     content: "LuckDay";
     font-size: xx-large;
     color: #000;
 }

 /* 添加奖品设置弹框样式 */
 .prize-settings-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     justify-content: center;
     align-items: center;
 }

 .prize-settings-content {
     background: #fffdee;
     padding: 20px;
     border-radius: 15px;
     width: 80%;
     max-width: 800px;
     max-height: 80vh;
     overflow-y: auto;
 }

 .prize-settings-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
     position: relative;
 }

 .prize-settings-header h2 {
     margin: 0;
     color: #ff7a33;
 }

 .total-probability {
     right: 13%;
     top: 8%;
     position: absolute;
     background: #f9db55;
     padding: 10px;
     border-radius: 10px;
 }

 .prize-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 20px;
     margin-bottom: 20px;
 }

 .prize-item-setting {
     border: 1px solid #eee;
     padding: 15px;
     border-radius: 10px;
     background: #f9f9f9;
 }

 .prize-item-setting input,
 .prize-item-setting select {
     width: 100%;
     padding: 8px;
     margin: 5px 0;
     border: 1px solid #ddd;
     border-radius: 5px;
 }

 .prize-item-setting .label {
     display: block;
     margin-top: 10px;
     color: #666;
     font-size: 14px;
     display: flex;
     align-items: center;
     position: relative;
 }

 .prize-item-setting .label div {
     width: 70px;
     flex: none;
 }

 .prize-image-preview {
     width: 80px;
     height: 80px;
     object-fit: contain;
     margin: 10px 0;
     border: 1px solid #ddd;
     border-radius: 5px;
 }

 small {
     position: absolute;
     top: 40px;
     left: 23%;
 }

 .color-preview {
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     margin-left: 10px;
     vertical-align: middle;
     border: 1px solid #ddd;
 }

 .settings-buttons {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 20px;
 }

 .settings-button {
     /* padding: 8px 20px; */
     border: none;
     /* border-radius: 5px; */
     cursor: pointer;
     transition: all 0.3s;
 }

 .settings-button.save {
     background: #ff7a33;
     color: white;
 }

 .settings-button.cancel {
     background: #eee;
     color: #666;
 }

 .settings-button:hover {
     opacity: 0.8;
 }

 .qr-code-container {
     position: fixed;
     top: 50%;
     left: -200px; /* 初始位置在屏幕外 */
     transform: translateY(-50%);
     transition: left 0.5s ease; /* 动画效果 */
     z-index: 999;
 }

 .qr-code-container.show {
     left: 20px; /* 显示时的位置 */
 }

 .qr-code {
     width: 150px; /* 根据需要调整二维码大小 */
     height: auto;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
 }

 .scrollbar::-webkit-scrollbar-thumb:horizontal {
     width: 8px;
     background-color: #f9a825f5;
     border-radius: 8px;
 }

 .scrollbar::-webkit-scrollbar-thumb:vertical {
     height: 8px;
     background-color: #f9a825f5;
     border-radius: 8px;
 }

 .scrollbar::-webkit-scrollbar {
     width: 6px;
     margin: 30px 0;
     padding: 10px 0;
 }

 .scrollbar::-webkit-scrollbar-track {
     height: 8px;
     background-color: #fffdee;
     border-radius: 8px;
     margin: 30px 0;
 }

 .scrollbar2::-webkit-scrollbar-thumb:horizontal {
     width: 8px;
     background-color: #f9a825f5;
     border-radius: 8px;
 }

 .scrollbar2::-webkit-scrollbar-thumb:vertical {
     height: 8px;
     background-color: #f9a825f5;
     border-radius: 8px;
 }
 .scrollbar2::-webkit-scrollbar {
     width: 10px;
     padding: 10px 0;
 }
 .scrollbar2::-webkit-scrollbar-track {
     height: 8px;
     background-color: #ddd1ba;
     border-radius: 8px;
 }

 /* 音乐设置美化 */
 .logo-setting .settings-music {
   display: flex;
   flex-direction: column;
   padding: 12px 0;
   /* align-items: center; */
   /* justify-content: space-between; */
   /* background: #f7f8fa;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 18px 24px;
  margin-bottom: 18px;
  transition: box-shadow 0.2s; */
 }

 .logo-setting .settings-music:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }

 .logo-setting .settings-music-title {
   display: flex;
   align-items: center;
   font-size: 17px;
   font-weight: 500;
   color: #333;
   gap: 10px;
 }

 .logo-setting .settings-music-title>svg {
   background: red;
   border-radius: 50%;
 }

 .logo-setting .settings-value {
   display: flex;
   /* align-items: center; */
   flex-direction: column;
   gap: 12px;
 }

 .flex-space {
   justify-content: space-between;
 }

 .logo-setting input[type="file"] {
   display: none;
 }

 .logo-setting label {
   display: flex;
   align-items: center;
   cursor: pointer;
   font-size: 15px;
   margin-right: 10px;
 }

 /* 自定义开关样式 */
 .settings-value>div>label>input[type="checkbox"] {
   appearance: none;
   width: 36px;
   height: 20px;
   background: #d1d5db;
   border-radius: 10px;
   position: relative;
   outline: none;
   transition: background 0.2s;
   margin-right: 7px;
 }

 .settings-value>div>label>input[type="checkbox"]:checked {
   background: #b7ba1a;
 }

 .settings-value>div>label>input[type="checkbox"]::before {
   content: "";
   position: absolute;
   left: 3px;
   top: 3px;
   width: 14px;
   height: 14px;
   background: #fff;
   border-radius: 50%;
   transition: left 0.2s;
 }

 .settings-value>div>label>input[type="checkbox"]:checked::before {
   left: 19px;
 }

 .logo-setting #bgMusicFileName,
 .logo-setting #lotteryMusicFileName {
   font-size: 13px;
   max-width: 350px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #fff;
   margin-left: 14px;
   display: block;
   height: 100%;
   padding: 8px 0;
   border-bottom: 1px solid #fff;
 }

 .musicEnabledactive {
   background: red;
   border-radius: 50%;
 }

 .message {
   background: #f8d4d4;
   padding: 0 20px;
   border-radius: 10px;
   color: #db2828;
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2000;
 }

.message-error {
  color: red;
  background: #fff5e8;
}