@media (max-width: 768px) {  /* หรือขนาดที่คุณต้องการ */     .tooltip {         display: none !important;     } } *, ::after, ::before {     box-sizing: border-box; }  body, html {     height: 100%;     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }  body {     touch-action: manipulation;     background-image: linear-gradient(to right, #ebe7eb, #f4f3f5, #ebe7eb, #e3dbdf, #dbcfd2, #dbcfd2, #dbcfd2, #dbcfd2, #e3dbdf, #ebe7eb, #f4f3f5, #ffffff); }  #text-rows-container {     flex: 1;     overflow-y: auto;     -webkit-overflow-scrolling: touch;     padding: 20px;     padding-bottom: 30vh !important;     position: relative; }  #text-rows-container .text-row:first-child .editable-div[data-empty]:before, #text-rows-container .text-row:first-child .editable-div:empty:before {     content: attr(data-ph) !important;     color: grey !important; }  #addnewprojecttitle:empty:before {     content: attr(data-ph);     color: grey; }  .no-select {     -webkit-touch-callout: none;     -webkit-user-select: none;     -khtml-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     cursor: default !important;     display: inline-block; }  .circular-button {     display: none;     width: 38px;     height: 38px;     border-radius: 50% !important;     display: flex;     align-items: center;     justify-content: center;     color: white;     cursor: pointer;     border: none; }  .text-row:last-child .circular-button {     display: flex; }  @keyframes borderPulseReDownload {     0% {         box-shadow: 0 0 0 0 rgba(173, 81, 235, 0.7);     }      70% {         box-shadow: 0 0 0 10px rgba(173, 81, 235, 0);     }      100% {         box-shadow: 0 0 0 0 rgba(173, 81, 235, 0);     } }  @keyframes borderPulsePlay {     0% {         box-shadow: 0 0 0 0 rgba(27, 76, 148, 0.7);     }      70% {         box-shadow: 0 0 0 10px rgba(27, 76, 148, 0);     }      100% {         box-shadow: 0 0 0 0 rgba(27, 76, 148, 0);     } }  @keyframes borderPulseRed {     0% {         box-shadow: 0 0 0 0 rgba(207, 13, 35, 0.7);     }      70% {         box-shadow: 0 0 0 10px rgba(27, 76, 148, 0);     }      100% {         box-shadow: 0 0 0 0 rgba(27, 76, 148, 0);     } }  @keyframes borderPulseGreen {     0% {         box-shadow: 0 0 0 0 rgba(6, 92, 13, 0.7);     }      70% {         box-shadow: 0 0 0 10px rgba(6, 92, 13, 0);     }      100% {         box-shadow: 0 0 0 0 rgba(6, 92, 13, 0);     } }  .downloadbutton-disable, .downloadbutton, .downloadbutton-audio-editor, .show-editor-popup-disable, .show-editor-popup {     cursor: default;     color: #b3b3b3;     transition: color 0.3s ease; }  .downloadbutton, .downloadbutton-audio-editor, .show-editor-popup {     width: 40px;     height: 40px;     border-radius: 50%;     display: inline-flex;     justify-content: center;     align-items: center;     text-align: center;     overflow: hidden;     font-size: 130%;     position: relative; }  .playbutton-loading {     opacity: 0.6;     cursor: wait;     pointer-events: none;     color: #417496 !important; }  .playbutton, .playPauseBtn-audio-editor {     width: 40px;     height: 40px;     border-radius: 50%;     display: inline-flex;     justify-content: center;     align-items: center;     text-align: center;     overflow: hidden;     font-size: 180%;     position: relative; }  .playbutton-enable, .playPauseBtn-audio-editor-enable {     cursor: pointer;     color: #417496 !important;     transition: color 0.3s ease; }  .playbutton-stop, .playPauseBtn-audio-editor-stop {     cursor: pointer;     color: #417496 !important;     transition: color 0.3s ease;     color: #ffffff !important;     background: linear-gradient(45deg, #417496 0%, #81c5f3 100%);     animation: borderPulsePlay 1s infinite; }  .playbutton-enable:hover, .playPauseBtn-audio-editor-enable:hover {     cursor: pointer;     color: #ffffff !important;     background: linear-gradient(45deg, #417496 0%, #81c5f3 100%);     animation: borderPulsePlay 1.5s ease; }  .playbutton-stop:hover {     cursor: pointer;     color: #ffffff !important;     background: linear-gradient(45deg, #417496 0%, #81c5f3 100%);     animation: borderPulsePlay 1.5s ease; }  .playbutton-disable {     cursor: default;     color: #b3b3b3;     transition: color 0.3s ease; }  .editable-container {     position: relative;     border-radius: 10px !important;     background-color: #f7f5f3;     padding: 0 !important;     border: none;     margin-left: 15px !important;     border-bottom: 3px solid #f1e0cf;     opacity: 1;     border-top: 1px solid #f1e0cf;     border-left: 1px solid #f1e0cf;     border-right: 1px solid #f1e0cf;     width: 100%;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }  .editable-div {     padding: 0.575rem 0.75rem;     min-height: 55px;     background-color: #fff;     color: black;     font-size: 18px !important;     border: none;     outline: none;     border-top-right-radius: 10px;     border-top-left-radius: 10px;     line-height: 35px;     transition: all 0.5s ease; }  .editable-container:hover {     border-bottom: 3px solid #f1952b; }  .container {     max-width: 1100px !important; }  @supports not (selector(::-webkit-scrollbar-thumb)) {      /*   .main-rows-container, */     .main-studio-center,     .scrolling-style {         scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);         scrollbar-width: thin;         cursor: default;     } }  /* .main-rows-container::-webkit-scrollbar, */ .main-studio-center::-webkit-scrollbar, .scrolling-style::-webkit-scrollbar {     width: var(--scroll-size, 10px);     height: var(--scroll-size, 10px);     cursor: default; }  /* .main-rows-container::-webkit-scrollbar-track, */ .main-studio-center::-webkit-scrollbar-track, .scrolling-style::-webkit-scrollbar-track {     background-color: var(--scroll-track, transparent);     border-radius: var(--scroll-track-radius, var(--scroll-radius));     cursor: default; }  /* .main-rows-container::-webkit-scrollbar-thumb, */ .main-studio-center::-webkit-scrollbar-thumb, .scrolling-style::-webkit-scrollbar-thumb {     background-color: var(--scroll-thumb-color, grey);     background-image: var(--scroll-thumb, none);     border-radius: var(--scroll-thumb-radius, var(--scroll-radius));     cursor: default; }  .scrolling-style {     --scroll-size: 12px;     --scroll-radius: 20px;     --scroll-track: rgb(0 0 0 / 0%);     --scroll-thumb: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 20%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.25) 40%, rgba(255, 255, 255, 0.25) 60%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.25) 80%);     --scroll-thumb-color: #f97316; }  /* .main-rows-container {    flex: 1;    box-sizing: border-box;    overflow-y: auto;    position: relative;    height: calc(100vh - 100px); */ .main-studio-center {     --scroll-size: 12px;     --scroll-radius: 20px;     --scroll-track: rgb(0 0 0 / 0%);     --scroll-thumb: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 20%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.25) 40%, rgba(255, 255, 255, 0.25) 60%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.25) 80%);     --scroll-thumb-color: #f97316; }  .control-setting {     display: flex; }  .control-setting-column {     padding: 0;     box-sizing: border-box;     width: 190px; }  .control-setting-left-column {     padding: 0 20px 20px 20px; }  .control-setting-center-column {     flex-grow: 1; }  .flex-container {     display: flex;     justify-content: space-between; }  .slider-container {     display: flex;     justify-content: space-between;     margin: 20px auto; }  .slider-wrapper-key {     position: relative;     width: 25%;     top: 15px }  .slider-wrapper {     position: relative;     width: 35%;     top: 15px }  .slider {     -webkit-appearance: none;     /* Override default CSS styles */     appearance: none;     width: 100%;     height: 7px;     border-radius: 5px;     background: #d3d3d3;     outline: none;     opacity: 0.7;     -webkit-transition: opacity .15s ease-in-out;     transition: opacity .15s ease-in-out; }  .slider-red::-webkit-slider-thumb {     background-color: red !important; }  .slider-red::-moz-range-thumb {     background-color: red !important; }  .slider-red::-ms-thumb {     background-color: red !important; }  .slider::-webkit-slider-thumb {     -webkit-appearance: none;     appearance: none;     width: 20px;     height: 20px;     border-radius: 50%;     background-color: #ecc2c2;     cursor: pointer;     transition: background-color 0.5s ease; }  .slider::-webkit-slider-thumb:hover {     background-color: #f80404; }  .key-tooltip {     display: none; }  .key-tooltip.show {     display: inline-block; }  .slider {     pointer-events: none; }  .slider-active::-webkit-slider-thumb {     background-color: #f80404 !important; }  .slider::-moz-range-thumb {     width: 20px;     height: 20px;     border: 0;     border-radius: 50%;     background-color: #fff;     cursor: pointer; }  .slider-label {     position: absolute;     top: -20px;     left: 50%;     transform: translateX(-50%);     padding: 2px 6px;     border-radius: 3px;     font-size: 14px;     white-space: nowrap; }  .breakTimeDecrease {     background: rgb(68, 68, 68);     padding: 2px 5px 2px 5px;     color: #fff;     border-top-left-radius: 5px;     border-bottom-left-radius: 5px;     border: 1px solid rgb(68, 68, 68);     margin-left: 7px;     font-size: 14px;     transition: background-color 0.5s ease; }  .breakTimeIncrease {     background: rgb(68, 68, 68);     padding: 2px 5px 2px 5px;     color: #fff;     border-top-right-radius: 5px;     border-bottom-right-radius: 5px;     border: 1px solid rgb(68, 68, 68);     margin-right: 7px;     font-size: 14px;     transition: background-color 0.5s ease; }  .breakTimeIncrease:hover, .breakTimeDecrease:hover {     background: rgb(82, 82, 82);     cursor: pointer; }  .breakTimeValue {     padding: 2px 5px 2px 5px;     background: #fff;     color: black;     border-top: 1px solid rgb(68, 68, 68);     border-bottom: 1px solid rgb(68, 68, 68);     font-size: 14px; }  .main-studio-top {     background-color: #e0e0e0;     text-align: center;     width: 100%;     box-sizing: border-box;     position: sticky;     left: 0;     top: 0;     z-index: 10;     display: flex;     justify-content: space-between;     align-items: center;     padding: 0 20px; }  .main-studio-wrapper {     display: flex;     height: 100vh;     height: -webkit-fill-available;     /* สำหรับ iOS */     overflow: hidden; }  .main-studio-left, .main-studio-right {     position: relative;     min-width: 200px;     max-width: 70%;     height: 100%;     overflow-y: auto;     -webkit-overflow-scrolling: touch; }  .main-studio-left {     width: 360px;     padding: 15px 20px 15px 15px;     box-sizing: border-box;     transition: transform 0.5s ease-in-out;     background-color: rgba(255, 255, 255, 0.2);     -webkit-backdrop-filter: blur(10px);     backdrop-filter: blur(10px);     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);     color: #000000; }  .main-studio-center {     transition: 0.5s all ease-in-out;     flex: 1;     /*     display: flex; */     flex-direction: column;     min-width: 300px;     overflow: hidden;     position: relative; }  #hbpnf {     display: flex;     flex-direction: column;     height: 100%; }  /* new */ .resizer {     position: absolute;     top: 0;     width: 10px;     height: 100%;     background-color: #f0f0f0;     cursor: col-resize;     z-index: 100; }  .left-resizer {     right: 0; }  .right-resizer {     left: 0; }  .resizer:hover, .resizer.active {     background-color: #ccc; }  .main-studio-right {     width: 400px;     padding: 20px;     box-sizing: border-box;     transition: transform 0.5s ease-in-out;     -webkit-backdrop-filter: blur(10px);     backdrop-filter: blur(10px);     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);     background-color: rgba(255, 255, 255, 0.7) }  @media (max-width: 1100px) {     .logout-fixed-bottom-center {         margin-top: 20px !important;         position: relative !important;         width: 100% !important;         max-width: unset !important;         bottom: 0 !important     }      .resizer {         display: none;     }      .main-studio-center {         margin-top: 0;     }      .main-studio-left,     .main-studio-right {         position: fixed;         /*top: 80px;*/         bottom: 0;         z-index: 5;         width: 100%;         z-index: 100;     }      .main-studio-left {         left: 0;         transform: translateX(-100%);     }      .main-studio-right {         right: 0;         transform: translateX(100%);     }      .main-studio-left.open,     .main-studio-right.open {         transform: translateX(0);     } }  .action-btn {     padding: 10px 15px 10px 15px;     text-align: center;     text-decoration: none;     color: #ffffff;     border-radius: 8px;     cursor: pointer;     transition: all 0.5s ease;     font-size: 20px;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);     border: none;     outline: none; }  .action-btn-import {     padding: 10px;     text-align: center;     text-decoration: none;     color: #ffffff;     border-radius: 8px;     cursor: pointer;     transition: all 0.5s ease;     font-size: 17px;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);     border: none; }  .add-new-row:disabled, .add-new-row:disabled:hover {     opacity: 0.2 !important;     cursor: default !important;     /*  transform: translateX(-50%) translateY(0px);    transform: translateY(0px); */     transform: scale(1); }  .add-new-row {     background: linear-gradient(90deg, #d99f9f 0%, #a168ab 100%);     /*    position: fixed;    bottom: 20px;    left: 50%;     transform: translateX(-50%); */     transform: scale(1); }  .add-new-row:hover {     /*  transform: translateX(-50%) translateY(-10px);    transform:  translateY(-10px); */     transform: scale(1.2); }  .add-new-row:active {     /*    transform: translateX(-50%) translateY(1px);  transform:  translateY(1px);*/     transform: scale(1.2); }  .scroll-to-bottom {     background: #6d6b6b;     position: fixed;     bottom: 20px;     left: 340px;     transform: translateX(-50%);     z-index: 9999; }  .scroll-to-top {     background: #6d6b6b;     position: fixed;     bottom: 20px;     right: 355px;     transform: translateX(-50%);     z-index: 9999; }  .scroll-to-bottom:hover, .scroll-to-top:hover {     transform: translateX(-50%) translateY(-10px); }  .scroll-to-bottom:active, .scroll-to-top:active {     transform: translateX(-50%) translateY(1px); }  .search-btn {     background: linear-gradient(45deg, #494949 0%, #0a4f7c 100%);     margin-right: 5px; }  .search-btn:hover {     transform: translateY(-10px); }  .search-btn:active {     transform: translateY(1px); }  .save-btn {     background: linear-gradient(90deg, #19b467 0%, #92c012 100%); }  .save-btn:hover {     transform: translateY(-10px); }  .save-btn:active {     transform: translateY(1px); }  .save-btn:disabled, .save-btn:disabled:hover, .new-project-btn:disabled, .new-project-btn:disabled:hover, .search-btn:disabled, .search-btn:disabled:hover, .import-text-btn:disabled, .import-text-btn:disabled:hover, .import-text-btn-export:disabled, .import-text-btn-export:disabled:hover, .import-text-btn-download:disabled, .import-text-btn-download:disabled:hover {     opacity: 0.2 !important;     cursor: default !important;     transform: translateY(0px) !important; }  .addnew-project-bnt {     background: linear-gradient(90deg, #19b467 0%, #92c012 100%); }  .addnew-project-bnt:hover {     transform: translateY(-10px); }  .addnew-project-bnt:active {     transform: translateY(1px); }  .addnew-project-bnt-cancel {     background: linear-gradient(45deg, #ac0f0f 0%, #771331 100%); }  .addnew-project-bnt-cancel:hover {     transform: translateY(-10px); }  .addnew-project-bnt-cancel:active {     transform: translateY(1px); }  .title-editable {     cursor: text !important;     outline: none !important;     border: none !important;     text-align: left !important;     background: none !important;     box-shadow: none !important;     color: #000; }  .new-project-btn {     background: linear-gradient(90deg, #1988b4 0%, #125dc0 100%);     margin-right: 10px; }  .new-project-btn:hover {     transform: translateY(-10px); }  .new-project-btn:active {     transform: translateY(1px); }  .top-control-panel-wrapper {     width: 100%;     padding-right: 10px;     /* add right side space, margin-right of secondary button */     box-sizing: border-box; }  .top-control-panel-container {     display: flex;     width: 100%;     /*    gap: 15px; */     justify-content: space-between;     align-items: center; }  .top-panel-btn:first-child {     flex: 0 0 auto; }  .top-panel-btn:last-child {     flex: 1 1 auto; }  .left-controls, .right-controls {     display: flex;     align-items: center; }  .right-controls {     margin-left: auto;     /* make save button to right */ }  .keyboard-button {     /*     display: inline-block; */     display: inline-flex;     align-items: center;     justify-content: center;     padding: 3px 8px 3px 8px;     font-size: 14px;     font-weight: bold;     text-align: center;     color: #333;     background-color: #f0f0f0;     border: 2px solid #999;     border-radius: 5px;     box-shadow: 0 2px 0 #999;     cursor: default !important;     user-select: none; }  .right-heading {     font-size: 18px; }  .right-collapse-button {     background-color: #e0e0e0;     color: #000000;     cursor: pointer;     padding: 10px;     width: 100%;     border: none;     text-align: left;     outline: none;     transition: background-color 0.3s ease;     display: flex;     align-items: center;     border-radius: 5px;     margin-bottom: 10px; }  .right-collapse-active, .right-collapse-button:hover {     background-color: #e0e0e0;     color: #000000; }  .right-collapse-button i {     margin-right: 10px;     transition: transform 0.3s ease; }  .right-collapse-active i {     transform: rotate(90deg); }  .right-collapse-wrapper {     overflow: hidden;     transition: max-height 0.5s ease-in-out; }  .right-collapse-content {     padding: 10px 0px 20px 5px;     border-radius: 0 0 5px 5px;     transition: opacity 0.8s ease, transform 0.8s ease; }  .right-collapse-content.right-collapse-hide {     opacity: 0;     transform: translateY(-20px); }  .right-collapse-content.right-collapse-wrapper {     overflow: scroll }  .shortcut-list {     display: flex;     flex-wrap: wrap;     gap: 5px; }  .shortcut-item {     flex: 1 0 calc(50% - 5px);     min-width: 180px;     display: flex;     align-items: center; }  .tempText {     display: inline-block; }  /* sidebar */ .user-profile {     text-align: center;     padding: 20px;     background-color: #fff;     border-radius: 10px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);     margin: 0 auto 10px auto; }  .user-avatar {     width: 120px;     height: 120px;     border-radius: 50%;     background-color: #eae5eb;     position: relative;     cursor: pointer;     transition: all 0.3s ease;     --before-content: "+";     text-align: center;     margin: 0 auto 10px auto; }  .user-avatar:hover {     transform: scale(1.05); }  .user-avatar::before {     content: var(--before-content);     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     font-size: 40px;     color: #c29bb3; }  .user-name {     position: relative;     display: inline-block;     font-size: 18px;     color: #000000;     padding: 5px;     border-radius: 3px;     transition: background-color 0.3s ease; }  /* .user-name:hover {    background-color: #e1bee7;} */ .sidebar-credits {     text-align: center;     margin-bottom: 30px;     padding: 15px;     background-color: #fff;     border-radius: 10px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }  .sidebar-credits span {     font-size: 24px;     font-weight: bold;     color: #000000; }  .sidebar-add-credits {     background: linear-gradient(90deg, #07a57e 0%, #15725b 100%);     color: white;     border: none;     padding: 8px 15px;     cursor: pointer;     border-radius: 5px;     font-size: 14px;     transition: all 0.3s ease;     margin-top: 10px; }  .sidebar-add-credits:hover {     transform: scale(1.2); }  .sidebar-menu {     list-style-type: none;     padding: 0;     flex-grow: 1; }  .sidebar-menu li {     margin-bottom: 0px; }  .sidebar-menu>li>a {     font-size: 18px;     font-weight: bold;     color: #000000;     padding: 10px 10px 10px 10px; }  .sidebar-menu a {     text-decoration: none;     color: #000000;     display: block;     padding: 10px;     border-radius: 5px;     transition: all 0.3s ease; }  .sidebar-menu>li>a:hover {     background-color: #eed5db;     color: #000000;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }  .sidebar-submenu {     list-style-type: none;     padding-left: 20px;     margin-top: 10px;     margin-bottom: 10px; }  .sidebar-submenu a {     font-size: 16px;     padding: 10px 10px;     margin-top: 5px;     cursor: pointer; }  .sidebar-submenu a:hover, .sidebar-submenu .active, .sidebar-menu .active {     background-color: #eed5db;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);     color: #000000; }  .sidebar-edit-mode .sidebar-save-button {     display: inline-block; }  .sidebar-save-button {     display: none;     background-color: #ce93d8;     color: white;     border: none;     padding: 5px 10px;     cursor: pointer;     border-radius: 3px;     font-size: 14px;     margin-left: 5px;     transition: background-color 0.3s ease; }  .sidebar-save-button:hover {     background-color: #ba68c8; }  .button-voice-setting-container {     display: flex;     width: 100%;     gap: 5px;     padding: 10px 0 20px 0;     border-bottom: 1px dashed #b3b3b3; }  .button-voice-setting-container button {     flex: 1;     padding: 5px 3px 5px 3px;     background-color: #ffffff;     border: none;     border-radius: 6px;     cursor: pointer;     transition: background-color 0.3s;     border: 1px solid #1986a1;     color: #000000 }  .button-voice-setting-container button:hover {     background-color: #1986a1;     color: #fff; }  .downloadfilepopup {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.5);     z-index: 104;     justify-content: center;     align-items: center;     -webkit-backdrop-filter: blur(30px);     backdrop-filter: blur(30px); }  .downloadfilepopup-content {     background-color: #fff;     padding: 30px;     border-radius: 15px;     width: 90%;     max-width: 770px;     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);     transition: all 0.3s ease;     opacity: 0;     transform: translateY(20px); }  .downloadfilepopup-content.show {     opacity: 1;     transform: translateY(0); }  .pronun-row {     display: flex;     margin-bottom: 10px;     gap: 5px;     transition: all 1s ease; }  /* .pronun-row input {    flex: 1;    padding: 5px;    width: calc(50% - 2.5px);    box-sizing: border-box;} */ .pronun-row input {     flex: 1;     padding: 5px;     box-sizing: border-box; }  .pronun-to-wrapper {     position: relative;     flex: 1;     display: flex;     align-items: center; }  .pronun-to {     flex: 1;     padding-right: 35px !important; }  .info-pronun-btn {     position: absolute;     right: 15px;     background: none;     border: none;     cursor: pointer;     font-weight: bold;     color: #8f8f8f;     padding: 0;     width: 25px;     height: 25px;     display: flex;     align-items: center;     justify-content: center;     transition: all 0.3s ease;     background: #fff; }  .info-pronun-btn:hover {     color: #101111; }  #popupPronun-container, #popupPronun-check-rows-container {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.5);     justify-content: center;     align-items: center;     -webkit-backdrop-filter: blur(30px);     backdrop-filter: blur(30px); }  #popupPronun-container {     z-index: 105; }  #popupPronun-check-rows-container {     z-index: 105; }  h4, h3, h2, h1 {     font-weight: bold; }  .popupPronun-content, .popupPronun-check-rows-content {     background-color: #fff;     padding: 30px;     border-radius: 15px;     width: 80%;     max-width: 850px;     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);     transition: all 0.3s ease;     opacity: 0;     transform: translateY(20px); }  .popupPronun-content.show, .popupPronun-check-rows-content.show {     opacity: 1;     transform: translateY(0); }  #popupPronun-check-rows-content-main {     height: 500px;     overflow-y: scroll;     padding-top: 10px;     padding-bottom: 10px;     margin-top: 10px;     border-bottom: 1px dashed #b3b3b3;     margin-bottom: 10px; }  #tab-pronun-add-container, #tab-pronun-example, #tab-pronun-document, #tab-pronun-alphabet {     height: 500px;     overflow-y: scroll;     padding-top: 10px;     padding-bottom: 10px;     margin-top: 10px;     border-bottom: 1px dashed #b3b3b3;     margin-bottom: 10px; }  .tab-container {     background-color: white;     overflow: hidden; }  .tab-header {     display: flex;     justify-content: space-between;     align-items: center;     border-bottom: 2px solid #d4d4d4; }  .tab-buttons {     display: flex; }  .tab-button {     padding: 10px 10px;     background-color: transparent;     border: 1px solid #d4d4d4;     border-bottom: none;     color: #000000;     cursor: pointer;     font-size: 16px;     /*     transition: all 0.3s; */     margin-right: 5px;     border-radius: 5px 5px 0 0;     position: relative;     bottom: -2px; }  .tab-button:not(.active) {     background-color: transparent; }  .tab-button.active {     background-color: #cdd9e9;     color: rgb(0, 0, 0);     border-bottom: 2px solid #d4d4d4;     font-weight: bold; }  .tab-pane {     display: none; }  .tab-pane.active {     display: block; }  .pronun-row {     display: flex;     margin-bottom: 10px;     z-index: 99;     background-color: #fff; }  .pronun-row input {     flex: 1;     padding: 10px;     margin-right: 10px;     border: 1px solid #d4d4d4;     border-radius: 4px;     margin-left: 5px; }  .pronun-row div {     flex: 1;     margin-right: 10px;     border-radius: 4px; }  .pronun-row-document {     display: flex;     z-index: 99;     background-color: #fff;     border-bottom: 1px dashed #999;     padding: 5px; }  .pronun-row-document div {     flex: 1;     padding-right: 20px; }  strong1 {     color: #b17315;     font-weight: normal; }  strong2 {     color: #8a0426;     font-weight: normal; }  strong3 {     color: #048a62;     font-weight: normal; }  strong4 {     color: #04438a;     font-weight: normal; }  strong5 {     color: #8a048a;     font-weight: normal; }  #tab-pronun-document u {     text-underline-offset: 5px;     text-decoration: underline;     color: #101111; }  .pronun-addnew-word {     padding: 10px 15px;     background-color: #2ecc71;     color: white;     border: none;     border-radius: 5px;     cursor: pointer;     transition: background-color 0.3s;     margin-left: 5px;     outline: none; }  .pronun-addnew-word:hover {     background-color: #27ae60; }  .pronun-addnew-word.hidden {     display: none; }  .pronun-save-word {     padding: 10px 15px;     background-color: #2e65cc;     color: white;     border: none;     border-radius: 5px;     cursor: pointer;     transition: background-color 0.3s;     margin-left: 5px;     outline: none; }  .pronun-save-word:hover {     background-color: #2734ae; }  .pronun-save-word.hidden {     display: none; }  .pronun-save-word-disable {     padding: 10px 15px;     background-color: #eeeeee;     color: rgb(136, 136, 136);     border: none;     border-radius: 5px;     cursor: default !important;     transition: background-color 0.3s;     margin-left: 5px;     outline: none; }  .pronun-save-word-disable.hidden {     display: none; }  .delete-btn-pronun {     background-color: transparent;     border: none;     cursor: pointer;     padding: 5px;     color: #e74c3c;     transition: color 0.3s; }  .delete-btn-pronun:hover {     color: #c0392b; }  #pronun-detail-popup-link {     cursor: pointer;     color: #125dc0;     padding-left: 10px; }  #pronun-detail-popup-link:hover {     color: cadetblue;     text-decoration: underline; }  .btn-popup-download-srt {     background: linear-gradient(90deg, #21be62 0%, #199681 100%);     width: 100%;     margin-top: 10px;     font-size: 17px !important; }  .btn-popup-download {     background: linear-gradient(90deg, #be2150 0%, #941818 100%);     width: 100%;     margin-top: 10px;     font-size: 17px !important; }  .btn-popup-download.disable {     opacity: 0.2;     cursor: default; }  .btn-popup-download.disable:hover {     opacity: 0.2;     transform: translateY(0px); }  .btn-popup-download-srt:hover, .btn-popup-download:hover {     transform: translateY(-10px);     opacity: 0.8; }  .btn-popup-download-container {     display: flex;     gap: 10px; }  .download-file-container {     padding: 5px;     display: flex;     border-bottom: 1px dashed #ccc; }  .download-file-status {     text-align: center;     color: #199681 }  .download-file-lineno {     width: 50px;     text-align: right;     margin-left: auto;     padding-right: 15px; }  .download-file-text {     flex: 1;     color: gray; }  #download-file-main-container {     border: 1px solid #ccc;     padding: 10px;     border-radius: 8px;     min-height: 100px;     overflow-y: scroll;     display: none; }  #download-file-main-container-overlay {     border: 1px solid #ccc;     padding: 10px;     border-radius: 8px;     min-height: 100px;     width: 100%;     background-color: #f8f8f8;     display: flex;     justify-content: center;     align-items: center;     text-align: center; }  #download-file-main-container-overlay p {     margin: 0; }  .download-progress-bar {     width: 100%;     background-color: #e0e0e0;     padding: 3px;     border-radius: 3px;     box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }  .download-progress-bar-fill {     display: block;     height: 22px;     background-color: #659cef;     border-radius: 3px;     transition: width 500ms ease-in-out; }  #download-progressText {     margin-top: 10px;     font-weight: bold; }  #waveformContainer {     position: relative;     overflow: hidden;     height: 220px;     width: 100%;     visibility: hidden; }  #playbackControls {     position: absolute;     left: 10px;     top: 10px;     z-index: 20; }  .silence-control {     position: absolute;     display: none;     align-items: center;     justify-content: center;     z-index: 15;     width: 100%;     height: 150px;     top: 0;     left: 0; }  .silence-slider {     writing-mode: bt-lr;     /* IE */     -webkit-appearance: slider-vertical;     writing-mode: vertical-lr;     direction: rtl;     width: 20px;     height: 80px;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, calc(-50% + 10px));     z-index: 16; }  .silence-region {     position: absolute;     transition: background-color 0.3s ease; }  #playCursor {     position: absolute;     top: 15px;     width: 2px;     height: 120px;     background-color: red;     z-index: 10;     transition: left 0.05s linear; }  #waveform {     position: absolute;     top: -25px;     left: 0;     z-index: 5;     width: 100%;     height: 100%; }  .text-row {     /*      transition: all 1s  ease-in-out ;  */     transition: transform 1s ease-in-out, background-color 1s ease-in-out;     position: relative;     /*   transition: max-height 1s ease-in-out */ }  .edit-audio-processing {     opacity: 0.4 !important;     pointer-events: none !important; }  .blurred {     transform: scale(0.8);     filter: blur(16px);     pointer-events: none !important;     /*  display: none;  */ }  .blurred-search {     transform: scale(0.8);     filter: blur(16px);     display: none; }  .highlighted {     transform: scale(1);     filter: blur(0px); }  .highlighted .editable-container {     box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; }  #editAudioContainer {     border-radius: 10px;     /*    box-shadow: rgba(0, 0, 0, 0.4) 0px -30px 90px;  */     transition: all 1s ease;     width: calc(100% - 65px);     margin: 0 65px 0 0px;     z-index: 111;     left: 10px;     opacity: 0;     pointer-events: none;     position: absolute;     display: flex;     background: transparent }  #editAudioContainer.show {     opacity: 1;     transform: translateY(0);     pointer-events: auto;     transition: all 1s ease; }  #waveLoading {     position: absolute;     width: 100%;     text-align: center;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); }  .button-group-control {     transition: all 1s ease;     zoom: 95%; }  #editAudioContainerSub {     width: 100%;     padding: 0 20px 0 10px;     flex: 1;     border-radius: 10px;     background-color: rgba(255, 255, 255, 0.7) }  #audio-editor-popup-control {     transition: all 1s ease; }  #searchBox {     position: fixed;     top: -100px;     background-color: rgba(255, 255, 255, 0.5);     padding: 30px;     border-radius: 5px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);     z-index: 10;     transition: top 1s ease;     width: 100%;     text-align: center;     -webkit-backdrop-filter: blur(10px);     backdrop-filter: blur(10px); }  #searchInput, #replaceInput {     width: 200px;     /*     padding: 5px; */     border: none;     /*     border-radius: 5px; */     outline: none;     -webkit-backdrop-filter: blur(10px);     backdrop-filter: blur(10px);     background-color: rgba(255, 255, 255, 0.5);     cursor: text !important; }  mark {     background-color: darkorchid;     color: #fff;     padding: 3px;     margin: 2px;     border-radius: 5px; }  .btn-audio {     width: 30px;     height: 30px;     padding: 3px;     border-radius: 50%;     margin-right: 20px;     position: relative;     border: none }  .btn-audio:active, .btn-audio-enable:active, .btn-audio-reload {     border: none }  .btn-audio i {     font-size: 1.4em;     position: relative;     top: -6px }  .btn-audio-enable, .btn-audio-reload {     background-color: transparent;     border: none;     cursor: pointer;     padding: 5px;     transition: color 0.3s;     outline: none; }  .btn-audio-enable i {     color: #125dc0;     zoom: 150%;     position: relative;     top: -1px; }  .btn-audio-reload i {     color: #af1052;     zoom: 150%;     position: relative;     top: -1px; }  .btn-select-active-pronun-rows {     background: none;     border: none;     outline: none; }  .tab-pronun-check-rows-container {     background-color: white;     overflow: hidden; }  .pronun-check-rows-columns {     display: flex;     flex-direction: column;     gap: 10px;     padding: 10px; }  .pronun-check-rows-column {     display: flex;     align-items: center;     border-bottom: 1px dashed #ccc;     padding-bottom: 5px; }  .pronun-check-rows-eye-container {     width: 30px;     text-align: center; }  .pronun-check-rows-line-no {     width: 80px;     text-align: left; }  .pronun-check-rows-text {     flex-grow: 1;     padding-left: 10px; }  .eye-icon-PronunCheckRows, .toggle-all-PronunCheckRows {     cursor: pointer;     font-size: 1.2rem;     margin-right: 10px; }  .bi-eye-fill {     color: #007bff; }  .pronun-check-rows-founded-hilight, .pronun-check-rows-founded-hilight-suggest {     background-color: darkorchid;     color: #fff;     padding: 3px;     margin: 2px;     border-radius: 5px; }  .pronun-check-rows-founded-hilight-normal, .pronun-check-rows-founded-hilight-normal-suggest {     color: #000000;     font-weight: bold;     text-decoration: underline; }  .toggle-all-container-PronunCheckRows {     margin-bottom: 10px;     background: rgba(224, 224, 224, 0.4);     padding: 10px;     border-radius: 5px;     border: 1px solid rgba(0, 0, 0, 0.2);     cursor: pointer; }  .toggle-all-container-PronunCheckRows label {     cursor: pointer; }  .pronun-check-rows-save-button {     margin-top: 10px;     background: linear-gradient(90deg, #19b467 0%, #92c012 100%); }  .pronun-check-rows-reset-button {     margin-top: 10px;     background: linear-gradient(90deg, #ac1334 0%, #bd164e 100%); }  .pronun-check-rows-save-button:hover, .pronun-check-rows-reset-button:hover {     transform: translateY(-10px); }  .pronun-check-rows-save-button:active, .pronun-check-rows-reset-button:active {     transform: translateY(1px); }  .alert-info {     background-color: rgba(230, 248, 255, 0.5) !important;     margin-top: 5px !important;     margin-bottom: 10px !important;     line-height: 30px; }  .alert-warning {     background-color: rgba(255, 253, 230, 0.5) !important;     margin-top: 10px !important;     margin-bottom: 5px !important; }  .logout-fixed-bottom-center {     /*   position: fixed; */     position: absolute;     bottom: 20px;     left: 50%;     transform: translateX(-50%);     width: calc(100% - 40px);     max-width: 360px;     border-radius: 5px;     text-align: center;     min-width: 200px;     transition: left 0.3s, width 0.3s; }  .language-switcher {     position: relative;     width: 100%; }  .button-container {     display: flex;     justify-content: space-between;     align-items: stretch;     gap: 5px; }  .language-switcher-container {     width: 200px; }  .language-button {     flex-grow: 1;     background-color: #4CAF50;     color: white;     padding: 0;     font-size: 16px;     border: none;     cursor: pointer;     border-radius: 5px;     overflow: hidden;     display: flex;     align-items: center;     min-width: 0;     position: relative; }  .language-button-content {     display: flex;     align-items: center;     justify-content: flex-start;     width: 100%;     height: 100%;     padding: 8px 16px;     min-width: 0; }  .language-name {     flex-grow: 1;     text-align: left;     margin-left: 0px;     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;     min-width: 0; }  .sidebar-logout {     flex-shrink: 0;     background: linear-gradient(90deg, #bb184f 0%, #7c1437 100%);     color: white;     padding: 10px 15px;     font-size: 16px;     border: none;     cursor: pointer;     border-radius: 5px;     display: flex;     align-items: center;     transition: all 0.5s ease;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);     white-space: nowrap; }  .sidebar-logout:hover {     background: linear-gradient(90deg, #da1e5c 0%, #ac1b4b 100%);     transform: translateY(-5px); }  .language-menu {     display: none;     position: absolute;     background: rgba(255, 255, 255, 1);     width: 100%;     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);     z-index: 1;     border-radius: 5px;     overflow: hidden;     top: 100%;     left: 0;     margin-bottom: 5px;     -webkit-backdrop-filter: blur(10px);     backdrop-filter: blur(10px); }  .language-menu a {     color: black;     padding: 8px 16px;     text-decoration: none;     display: flex;     align-items: center; }  .language-menu a:hover {     background-color: #d4d4d4; }  .language-menu a.active {     background-color: #4CAF50;     color: white; }  .flag {     width: 24px;     height: 16px;     margin-right: 10px;     background-size: cover;     display: inline-block;     flex-shrink: 0; }  @media screen and (max-width: 480px) {     .button-container {         flex-direction: column;     }      .sidebar-logout {         width: 100%;         justify-content: center;     } }  .VoiceLangSwitch-dropdown-toggle::after {     display: none; }  .VoiceLangSwitch-dropdown-item {     display: flex;     align-items: center; }  .VoiceLangSwitch-dropdown-item:hover {     background-color: #d7d8da; }  .VoiceLangSwitch-flag-icon {     width: 24px;     height: 24px;     margin-right: 10px; }  #VoiceLangSwitch-dropdownMenuButton {     width: 100%;     text-align: left;     display: flex;     align-items: center;     justify-content: space-between; }  #VoiceLangSwitch-selectedFlag {     width: 24px;     height: 24px;     margin-right: 10px; }  .VoiceLangSwitch-dropdown {     padding-bottom: 10px; }  .VoiceLangSwitch-dropdown-item.active {     background-color: #d7d8da;     color: #1e2125;     font-weight: bold; }  .voice-tts-select-option.disabled, .voice-tts-select-option-setall.disabled {     opacity: 0.5;     cursor: not-allowed; }  .voice-tts-select-option.disabled .voice-tts-play-button, .voice-tts-select-option-setall.disabled .voice-tts-play-button {     pointer-events: none; }  .pagination-btn {     z-index: 1000; }  #load-on-start {     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     background-color: rgba(0, 0, 0, .4);     z-index: 10;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     color: white;     font-size: 20px; }  .spinner {     width: 50px;     height: 50px;     border: 3px solid #f3f3f3;     border-top: 3px solid #3498db;     border-radius: 50%;     animation: spin 1s linear infinite; }  @keyframes spin {     0% {         transform: rotate(0deg);     }      100% {         transform: rotate(360deg);     } }  .voice-tts-select-container, .voice-tts-select-container-setall {     position: relative; }  .voice-tts-select-options {     position: absolute;     top: 100%;     left: 0;     right: 0;     z-index: 1000;     max-height: 300px;     overflow-y: auto;     background-color: white;     border: 1px solid #ced4da;     border-radius: 0.25rem;     display: none;     color: #000;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }  .voice-tts-select-option, .voice-tts-select-option-setall {     padding: 0.3rem;     cursor: pointer;     display: flex;     justify-content: space-between;     align-items: center; }  .voice-tts-select-option:hover, .voice-tts-select-option-setall:hover {     background-color: #f0e8c5; }  .voice-tts-select-option.selected, .voice-tts-select-option-setall.selected {     background-color: #f0e8c5;     font-weight: bold; }  .voice-tts-play-button {     background: none;     border: none;     color: #007bff;     cursor: pointer; }  .voice-tts-play-button:hover {     color: #0056b3; }  .voice-tts-selected-icon {     position: absolute;     left: 10px;     top: 50%;     transform: translateY(-50%);     color: #6c757d; }  /* #voice-tts-select-input {    padding-left: 35px;}#voice-tts-select-input-setall {    padding-left: 35px;} */ /*All Rows*/ .voice-tts-select-container-rows {     position: relative; }  .voice-tts-select-options-rows {     position: absolute;     z-index: 1000;     top: 100%;     left: 0;     right: 0;     max-height: 300px;     overflow-y: auto;     background-color: white;     border: 1px solid #ced4da;     border-radius: 0.25rem;     display: none;     color: #000;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }  .voice-tts-select-option-rows {     padding: 0.5rem;     cursor: pointer;     display: flex;     justify-content: space-between;     align-items: center; }  .voice-tts-select-option-rows:hover {     background-color: #f0e8c5; }  .voice-tts-select-option-rows.selected {     background-color: #f0e8c5;     font-weight: bold; }  .voice-tts-play-button-rows {     background: none;     border: none;     color: #007bff;     cursor: pointer; }  .voice-tts-play-button-rows:hover {     color: #0056b3; }  .voice-tts-selected-icon-rows {     position: absolute;     left: 10px;     top: 50%;     transform: translateY(-50%);     color: #6c757d; }  .voice-tts-select-input-rows {     cursor: pointer; }  .voice-tts-select-input-rows::placeholder, #voice-tts-select-input-setall::placeholder, #voice-tts-select-input::placeholder {     text-align: center; }  .voice-tts-select-input-rows, .voice-tts-select-input-rows:focus, #voice-tts-select-input-setall, #voice-tts-select-input-setall:focus, #voice-tts-select-input:focus, #voice-tts-select-input {     cursor: pointer;     text-align: center; }  .import-text-btn {     background: linear-gradient(90deg, #1e508a 0%, #3b7ca7 100%);     width: 100%; }  .import-text-btn-download {     background: linear-gradient(90deg, #be2150 0%, #ce546e 100%);     width: 100%;     margin-top: 10px;     margin-bottom: 10px; }  .import-text-btn-export {     background: linear-gradient(90deg, #15afaf 0%, #0c887e 100%);     width: 100%;     margin-top: 10px; }  .import-text-btn:hover, .import-text-btn-download:hover, .import-text-btn-export:hover {     transform: translateY(-10px);     opacity: 0.8; }  .import-text-btn:active, .import-text-btn-download:active, .import-text-btn-export:active {     transform: translateY(1px); }  /* .import-text-popup {   display: none;  position: fixed;  z-index: 1000;  left: 0;  top: 0;  width: 100%;  height: 100%;  background-color: rgba(77, 77, 77, 0.5);  opacity: 0;  transition: opacity 0.3s ease; }*/ .import-text-popup {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.5);     z-index: 1000;     justify-content: center;     opacity: 0;     align-items: center;     transition: opacity 0.3s ease; }  .import-text-popup.show {     opacity: 1;     -webkit-backdrop-filter: blur(30px);     backdrop-filter: blur(30px); }  .import-text-popup-content {     background-color: #fff;     /*     margin: 5% auto; */     padding: 30px;     border-radius: 15px;     width: 90%;     max-width: 900px;     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);     transform: translateY(0px);     opacity: 0;     transition: all 0.3s ease; }  .import-text-popup.show .import-text-popup-content {     transform: translateY(-20px);     opacity: 1; }  .import-text-close-btn {     color: #aaa;     float: right;     font-size: 28px;     font-weight: bold;     cursor: pointer;     transition: color 0.5s ease; }  .import-text-close-btn:hover {     color: #333; }  #import-text-textarea::placeholder {     color: #bdbdbd;     font-weight: normal; }  #import-text-textarea {     flex-grow: 1;     background-color: #ffffff;     border: none;     color: #000000;     padding: 10px;     font-size: 16px;     resize: none;     outline: none;     line-height: 28px;     overflow-y: scroll;     white-space: pre-wrap;     word-wrap: break-word;     font-family: Arial, Helvetica, sans-serif;     /*     border-top-right-radius: 15px;  border-bottom-right-radius:15px; */ }  .import-text-textarea-container {     margin-top: 20px;     display: flex;     border-radius: 0.5rem;     height: 400px;     border: 1px solid #aaa;     border-radius: 15px;     border-right: none !important; }  #import-text-line-numbers {     padding: 10px 10px;     text-align: right;     background-color: #f5f5f5;     user-select: none;     overflow-y: hidden;     line-height: 28px;     font-family: Arial, Helvetica, sans-serif;     width: 45px;     border-top-left-radius: 15px;     border-bottom-left-radius: 15px; }  .import-text-popup-buttons {     display: flex;     justify-content: space-between;     align-items: center;     margin-top: 20px; }  .left-buttons, .right-buttons {     display: flex;     align-items: center; }  .left-buttons>* {     margin-right: 15px; }  .right-buttons>* {     margin-left: 10px; }  /* .action-btn {  padding: 10px 20px;  color: white;  border: none;  border-radius: 25px;  cursor: pointer;  transition: all 0.3s ease;  font-size: 14px;}*/ #import-text-confirm {     background: linear-gradient(90deg, #19b467 0%, #92c012 100%); }  #import-text-confirm:hover {     transform: translateY(-10px); }  #import-text-confirm:disabled {     opacity: 0.3 !important;     cursor: wait !important; }  #import-text-clear {     background: linear-gradient(90deg, #b4195a 0%, #b95f6b 100%); }  #import-text-clear:hover {     transform: translateY(-10px); }  .file-upload-btn {     background: linear-gradient(90deg, #1942b4 0%, #438cb6 100%); }  .file-upload-btn:hover {     transform: translateY(-10px); }  .file-upload-btn {     transition: all 0.3s ease;     background-color: #81c784; }  .file-upload-wrapper {     position: relative;     overflow: hidden;     display: inline-block; }  .file-upload-wrapper input[type=file] {     font-size: 100px;     position: absolute;     left: 0;     top: 0;     opacity: 0; }  .form-check {     margin-bottom: 0; }  .tts-tone-control {     background: linear-gradient(90deg, #19b467 0%, #92c012 100%);     padding: 2px 5px 2px 5px;     color: #fff;     border-radius: 5px;     margin-left: 7px;     margin-right: 7px;     font-size: 14px;     transition: background-color 0.5s ease;     border: 1px solid #92c012; }  @keyframes popupAnimate {     0% {         transform: translateY(0px);     }      100% {         transform: translateY(20px);     } }  .popup-overlay-project-list {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.5);     z-index: 1000;     justify-content: center;     align-items: center;     -webkit-backdrop-filter: blur(30px);     backdrop-filter: blur(30px); }  /* .popup-content {  background-color: white;  padding: 20px;  border-radius: 8px;  max-width: 1000px;  width: 90%;  max-height: 80vh;  overflow-y: auto;} */ /*  .popup-content { background-color: #fff; padding: 30px; border-radius: 15px; width: 90%; max-width: 1000px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transition: all 0.3s ease;  animation: popupAnimate 0.5s ease-in-out ; transform: translateY(20px);} */ .newprojectpopup {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.5);     z-index: 1000;     justify-content: center;     align-items: center;     -webkit-backdrop-filter: blur(30px);     backdrop-filter: blur(30px); }  .newprojectpopup-content {     background-color: #fff;     padding: 30px;     border-radius: 15px;     width: 90%;     max-width: 500px;     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);     transition: all 0.3s ease;     opacity: 0;     transform: translateY(20px); }  .newprojectpopup-content.show {     opacity: 1;     transform: translateY(0); }  .project-list-popup-content {     background-color: #fff;     padding: 30px;     border-radius: 15px;     width: 90%;     max-width: 1000px;     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);     transition: all 0.3s ease;     opacity: 0;     transform: translateY(20px); }  .project-list-popup-content.show {     opacity: 1;     transform: translateY(0); }  .close-popup {     float: right;     font-size: 28px;     font-weight: bold;     cursor: pointer; }  .grid-container {     display: grid;     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));     gap: 20px;     margin-top: 20px; }  @keyframes fadeIn {     from {         opacity: 0;     }      to {         opacity: 1;     } }  @keyframes fadeOut {     from {         opacity: 1;     }      to {         opacity: 0;     } }  .fadeIn {     animation: fadeIn 0.3s ease-in-out forwards; }  .fadeOut {     animation: fadeOut 0.3s ease-in-out forwards; }  .project-block-new {     background: linear-gradient(90deg, #1988b4 0%, #125dc0 100%);     border-radius: 8px;     padding: 20px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);     position: relative;     min-height: 120px;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     cursor: pointer;     overflow: hidden;     color: #fff; }  .project-block-new:hover {     background: #1988b4; }  .project-block {     background-color: #ffffff;     border-radius: 8px;     padding: 20px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);     position: relative;     transition: all 0.3s ease;     min-height: 120px;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     cursor: pointer;     overflow: hidden; }  .project-block:hover {     background-color: #e9e1e1;     transform: translateY(-5px); }  .project-block-complete {     background-color: #000000;     color: #fff;     border-radius: 8px;     padding: 20px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);     position: relative;     transition: all 0.3s ease;     min-height: 120px;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     cursor: pointer;     overflow: hidden;     filter: blur(5px);     opacity: 0.2; }  .project-block-complete:hover {     background-color: #e9e1e1;     transform: translateY(-5px);     color: #000;     opacity: 1;     filter: blur(0px); }  .project-block-complete.inactive {     background-color: #ececec; }  .project-block.inactive {     background-color: #ececec; }  .project-name-list {     font-weight: bold;     text-align: center;     margin-top: 30px;     max-width: 100%;     word-wrap: break-word; }  .project-buttons {     position: absolute;     left: 0;     right: 0;     top: 0;     display: flex;     justify-content: center;     background-color: rgba(255, 255, 255, 0.8);     padding: 0px;     opacity: 0;     transform: translateY(-100%);     transition: all 0.3s ease; }  .project-block:hover .project-buttons, .project-block-complete:hover .project-buttons {     opacity: 1;     transform: translateY(0); }  .project-btn {     background: none;     border: none;     cursor: pointer;     font-size: 1.2em;     margin: 0 5px;     padding: 5px 5px;     border-radius: 10px;     transition: background-color 0.3s;     position: relative; }  .project-btn:hover {     background-color: rgba(0, 0, 0, 0.1); }  .project-btn-edit {     color: #2196F3; }  .project-btn-complete {     color: #4CAF50; }  .project-btn-delete {     color: #F44336; }  .tooltip-project-list {     position: fixed;     background-color: #333;     color: white;     padding: 5px 10px;     border-radius: 4px;     font-size: 12px;     z-index: 1001;     pointer-events: none;     transition: opacity 0.3s; }  #loadButton {     display: block;     margin: 20px auto;     padding: 10px 20px;     font-size: 16px;     background-color: #4CAF50;     color: white;     border: none;     border-radius: 5px;     cursor: pointer; }  #loadButton:hover {     background-color: #45a049; }  /* .close-popup {  position: absolute;  top: 10px;  right: 10px;  font-size: 24px;  cursor: pointer;} */ .close-popup {     position: absolute;     color: #aaa;     right: 25px;     font-size: 28px;     font-weight: bold;     cursor: pointer;     transition: color 0.5s ease;     top: 15px }  .project-reload-btn {     position: absolute;     color: #aaa;     right: 65px;     font-size: 22px;     font-weight: bold;     cursor: pointer;     transition: color 0.5s ease;     top: 15px }  .close-popup:hover {     color: #333; }  #nextPageBtn {     right: 10px; }  #prevPageBtn {     left: 10px; }  .nextPrevPageBtn {     color: #2196F3;     position: absolute;     font-size: 45px;     top: 50%;     transform: translateY(-50% + 30px);     cursor: pointer; }  .nextPrevPageBtn:hover {     color: #145081; }  #reloadProjects {     font-size: 0.7em;     cursor: pointer;     color: #000; }  #reloadProjects:hover {     color: #aaa; }  .project-block.edit-mode, .project-block-complete.edit-mode {     justify-content: flex-start;     padding-top: 10px; }  .project-block.edit-mode input, .project-block-complete.edit-mode input {     width: 100%;     padding: 5px;     margin-bottom: 10px;     border-radius: 4px;     margin-top: 30px;     outline: none;     border: none;     text-align: center;     background-color: #f0f0f0; }  .project-block.edit-mode .edit-buttons, .project-block-complete.edit-mode .edit-buttons {     display: flex;     justify-content: center;     margin-top: 10px; }  .project-block.edit-mode .edit-btn, .project-block-complete.edit-mode .edit-btn {     background: none;     border: none;     cursor: pointer;     font-size: 0.9em;     margin: 0 5px;     padding: 5px 10px;     border-radius: 4px;     transition: background-color 0.3s, color 0.3s; }  .project-block.edit-mode .edit-btn-save, .project-block-complete.edit-mode .edit-btn-save {     background-color: #4CAF50;     color: white; }  .project-block.edit-mode .edit-btn-save:hover, .project-block-complete.edit-mode .edit-btn-save:hover {     background-color: #45a049; }  .project-block.edit-mode .edit-btn-cancel, .project-block-complete.edit-mode .edit-btn-cancel {     background-color: #f44336;     color: white; }  .project-block.edit-mode .edit-btn-cancel:hover, .project-block-complete.edit-mode .edit-btn-cancel:hover {     background-color: #d32f2f; }  .project-block.edit-mode .project-buttons, .project-block-complete.edit-mode .project-buttons {     display: none; }  .project-block-complete.edit-mode {     filter: none;     opacity: 1; }  #notfoundProject, #notfoundSearchResult {     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     z-index: 9;     display: none;     flex-direction: column;     justify-content: center;     align-items: center;     color: white;     font-size: 20px;     background-color: rgb(255, 255, 255, 0.6); }  #notfoundProject i {     font-size: 2em;     color: red; }  #notfoundSearchResult i {     font-size: 2em;     color: rgb(0, 110, 255); }  #notfoundProject p, #notfoundSearchResult p {     font-size: 1.2em;     color: rgb(0, 0, 0); }  #tooltip-command {     position: absolute;     background: rgb(238, 174, 202);     background: linear-gradient(90deg, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);     color: #fff;     padding: 2px;     border-radius: 8px;     display: none;     z-index: 9999;     font-size: 15px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }  #tooltip-command:i {     font-size: 22px; }  #tooltip-command:after {     content: '';     position: absolute;     bottom: -18px;     left: 50%;     margin-left: -5px;     border-width: 10px;     border-style: solid;     border-color: rgb(220, 174, 238) transparent transparent transparent;     z-index: 9999;     transition: border-color 0.3s ease; }  #tooltip-command button:first-child {     margin: 0;     padding: 8px 10px;     background-color: #ffffff;     border-radius: 8px 0 0 8px;     cursor: pointer;     z-index: 9999;     outline: none;     transition: background-color 0.3s ease;     border: none; }  #tooltip-command button:last-child {     margin: 0;     padding: 8px 10px;     background-color: #ffffff;     border-radius: 0 8px 8px 0;     cursor: pointer;     z-index: 9999;     outline: none;     transition: background-color 0.3s ease;     border-left: 2px solid rgb(220, 174, 238, 0.6); }  #tooltip-command button {     margin: 0;     padding: 8px 10px;     background-color: #ffffff;     border: none;     cursor: pointer;     z-index: 9999;     outline: none;     transition: background-color 0.3s ease;     border-left: 2px solid rgb(220, 174, 238, 0.6); }  #tooltip-command button:hover {     background-color: rgba(255, 255, 255, 0.6);     z-index: 9999;     color: #000000; }  /* Modal Class */ .modal-content {     background: rgba(255, 255, 255, 0.8);     backdrop-filter: blur(10px);     -webkit-backdrop-filter: blur(10px);     border: none;     border-radius: 15px; }  .modal-title {     font-weight: bold; }  .modal-header {     border-bottom: none;     padding: 1.5rem 1.5rem 0; }  .modal-body {     padding: 1.5rem; }  .card {     background: linear-gradient(145deg, #ffffff, #f0f0f0);     border: none;     border-radius: 15px;     box-shadow: 5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff;     transition: all 0.3s ease;     overflow: hidden;     border: 1px solid #e0aeac; }  .card:hover {     transform: translateY(-5px) scale(1.02);     box-shadow: 8px 8px 15px #d1d9e6, -8px -8px 15px #ffffff; }  .card-header {     color: white;     font-weight: bold;     text-align: center;     padding: 1rem;     font-size: 1.2rem;     border-bottom: none; }  .commercial {     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }  .non-commercial {     background: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%); }  .card-body {     padding: 1rem;     text-align: center; }  .card-title {     font-size: 1.5rem;     font-weight: bold;     margin-bottom: 0.5rem;     color: #4a4a4a; }  .card-text {     color: #6c757d;     font-size: 0.9rem;     margin-bottom: 0.3rem; }  .commercial-use {     color: #28a745;     font-weight: bold; }  .non-commercial-use {     color: #dc3545;     font-weight: bold; }  .btn-choose, .btn-selected {     border: none;     border-radius: 25px;     padding: 0.5rem 1rem;     font-weight: bold;     text-transform: uppercase;     letter-spacing: 1px;     transition: all 0.3s ease;     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);     font-size: 0.8rem; }  .btn-choose {     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);     color: white; }  .btn-choose:hover {     background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);     transform: translateY(-2px);     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }  .btn-selected {     background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);     color: #4a4a4a;     cursor: default; }  .btn-selected:hover {     background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);     transform: none;     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }  @keyframes float {     0% {         transform: translateY(0px);     }      50% {         transform: translateY(-5px);     }      100% {         transform: translateY(0px);     } }  .priceModal {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.5);     z-index: 1000;     justify-content: center;     align-items: center;     -webkit-backdrop-filter: blur(30px);     backdrop-filter: blur(30px);     overflow-y: auto; }  .priceModal-content {     background-color: #fff;     padding: 10px;     border-radius: 15px;     width: 90%;     max-width: 1000px;     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);     transition: all 0.3s ease;     opacity: 0;     transform: translateY(20px);     position: relative; }  .priceModal-content.show {     opacity: 1;     transform: translateY(0); }  .service-soon {     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     z-index: 10;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     color: white; }  .service-soon i {     font-size: 3em;     color: dodgerblue; }  .service-soon span {     font-size: 1.2em;     color: rgb(0, 0, 0); }  .circular-button i {     pointer-events: none; }  #searchBox .btn-close-search {     color: #000000 !important;     font-size: 160%;     cursor: pointer;     margin-left: 10px;     transition: all 0.2s ease-in-out; }  #searchBox .btn-close-search:hover {     color: #4b4b4b !important; }  .payment-method-button img {     width: auto;     max-width: 95%;     height: 60px; }  #go-back-to-package-choose {     position: absolute;     left: 30px;     top: 30px;     font-size: 33px;     color: darkgray;     transition: all 0.3s ease-in-out;     cursor: pointer; }  #go-back-to-package-choose:hover {     color: #000 }  #paypal-button-container {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; }  #paypal-button-container i {     font-size: 50px;     color: rgb(255, 72, 0); }  .payment-method-popup {     padding-top: 15px; }  .payment-method-popup div {     padding: 10px 20px;     border: 1px solid rgb(0, 0, 0, 0);     display: inline-flexbox;     width: fit-content;     border-radius: 10px;     cursor: pointer;     transition: all 0.3 ease-in-out; }  .payment-method-popup div:hover {     border: 1px solid rgba(0, 0, 0, 0.7); }  .theme-switch {     background: #fff;     border: none;     cursor: pointer;     font-size: 24px;     padding: 5px 10px;     border-radius: 10px;     transition: background-color 0.3s;     border: 1px solid #000; }  .theme-switch:hover {     background: #000;     color: #fff; }  .voice-gender-avatar {     width: 25px;     height: 25px;     object-fit: cover;     border-radius: 50%; }  .text-row-overlay {     position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;     background-color: rgba(0, 0, 0, 0.4);     display: flex;     justify-content: center;     align-items: center;     z-index: 1000;     border-radius: 10px;     transform: scale(1.01); }  .text-row-disabled {     pointer-events: none; }  .splitText, .addBreak, .insertEmotionUpBtn {     padding: 5px 7px;     background: #ecd9de;     color: #000;     border-radius: 6px;     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);     outline: none;     border: #eeafc2 1px solid; }  .splitText:hover, .addBreak:hover, .insertEmotionUpBtn:hover {     background: #eeafc2; }  .splitText i, .addBreak i, .insertEmotionUpBtn i {     pointer-events: none; }  .checkout-container {     padding: 2rem;     width: 60%;     color: #000000; }  .checkout-title {     text-align: center;     margin-bottom: 1.5rem; }  .checkout-info {     display: flex;     justify-content: space-between;     margin-bottom: 0.5rem;     margin-top: 0.5rem; }  .checkout-info-value {     font-weight: bold;     text-align: right; }  .checkout-input-group {     display: flex;     margin-bottom: 1rem; }  .checkout-input {     flex-grow: 1;     padding: 0.5rem;     border-radius: 4px 0 0 4px;     box-sizing: border-box;     outline: none;     border: none;     background-color: #ffffff;     color: #000000;     border-left: 1px solid #b6b6b6;     border-top: 1px solid #b6b6b6;     border-bottom: 1px solid #b6b6b6; }  .checkout-button {     padding: 0.5rem 1rem;     background-color: #000000;     color: #ffffff;     border: 1px solid #b6b6b6;     border-radius: 0 4px 4px 0;     cursor: pointer;     font-size: 1rem;     transition: background-color 0.3s;     outline: none; }  .checkout-summary {     margin-top: 1rem; }  .checkout-promo-info {     color: #4CAF50;     margin-top: 0.5rem; }  .checkout-promo-code-info {     background-color: #000000;     border: 1px solid #000000;     border-radius: 4px;     padding: 0.5rem;     color: #fff !important; }  #checkout-now {     padding: 0.5rem 1rem;     color: white;     border: none;     border-radius: 0 4px 4px 0;     cursor: pointer;     font-size: 1.5rem;     width: 100%;     background: linear-gradient(90deg, #690d0d 0%, #af2270 100%);     border: 1px solid #dd4157;     border-radius: 10px; }  .checkout-info-value i {     color: red;     cursor: pointer; }  .checkout-info-value i:hover {     color: rgba(204, 80, 80, 0.8);     cursor: pointer; }  #checkout-price {     color: #2977aa; }  .screen-resize-slide {     padding: 0 0 0 20px;     width: 460px; }  /* ipadAir */ @media screen and (min-width: 812px) and (max-width:852px) {     .screen-resize-slide {         width: 240px;     }      .voice-tts-select-options-rows,     .voice-tts-select-input-rows {         font-size: 14px;     }      .control-setting-column:not(#voice-select-for-import) {         width: 150px !important;     }      .main-studio-left,     .main-studio-right {         max-width: 350px;     }      .tool-control {         font-size: 14px;         margin-right: 10px !important;     }      .editable-div {         font-size: 15px !important;         line-height: 30px !important;     }      .slider-label {         font-size: 14px;     } }  /* ipadPro */ @media screen and (min-width: 912px) and (max-width: 920px) {     .screen-resize-slide {         width: 280px;     }      .voice-tts-select-options-rows,     .voice-tts-select-input-rows {         font-size: 15px;     }      .main-studio-left,     .main-studio-right {         max-width: 350px;     } }  /* ipadPro */ @media screen and (min-width: 921px) and (max-width: 1100px) {     .screen-resize-slide {         width: 280px;     }      .voice-tts-select-options-rows,     .voice-tts-select-input-rows {         font-size: 15px;     }      .main-studio-left,     .main-studio-right {         max-width: 350px;     } }  /* azus zenbook fold */ @media screen and (min-width: 853px) and (max-width: 911px) {     .screen-resize-slide {         width: 300px;     }      .control-setting-column:not(#voice-select-for-import) {         width: 140px !important;     }      .voice-tts-select-options-rows,     .voice-tts-select-input-rows {         font-size: 14px;     }      .tool-control {         font-size: 14px;         margin-right: 10px !important;     }      .editable-div {         font-size: 15px !important;         line-height: 30px !important;     }      .slider-label {         font-size: 14px;     }      .main-studio-left,     .main-studio-right {         max-width: 350px;     } }  /* ipad */ @media screen and (min-width: 768px) and (max-width:811px) {     .screen-resize-slide {         width: 230px;     }      .control-setting-column:not(#voice-select-for-import) {         width: 140px !important;     }      .voice-tts-select-options-rows,     .voice-tts-select-input-rows {         font-size: 14px;     }      .tool-control {         font-size: 14px;         margin-right: 10px !important;     }      .editable-div {         font-size: 15px !important;         line-height: 30px !important;     }      .slider-label {         font-size: 14px;     }      .main-studio-left,     .main-studio-right {         max-width: 350px;     } }  @media screen and (max-width: 480px) {     .button-container {         flex-direction: column;     }      .sidebar-logout {         width: 100%;         justify-content: center;     } }  @media screen and (min-width: 100px) and (max-width: 779px) {      /*    .project-info {     margin-left: 40px !important;        margin-bottom: 15px;     }*/     .project-list-popup-content,     .priceModal-content,     .import-text-popup-content,     .downloadfilepopup-content {         overflow: auto;         height: 100%;         width: 100%;         border-radius: 0;         border: 0 !important;         transform: translateY(0px) !important;     }      .checkout-container {         width: 100%;     }      .input-group {         margin-left: 0px !important;     }      .btn-popup-download-container {         display: block;     }      .btn-popup-download-container button.action-btn {         padding: 15px;         font-size: 18px;     }      #add-breaktime-between-row {         display: block !important;     }      #download-all-delay-panel {         display: block !important;         padding: 10px 0 0px 0 !important     }      .import-text-popup-content {         padding: 10px 20px 10px 20px;     }      .import-text-popup-content h3 {         font-size: 1em;         padding-top: 10px;     }      .import-text-popup-buttons {         flex-direction: column;         align-items: stretch;     }      .left-buttons {         flex-wrap: wrap;         justify-content: space-between;         margin-bottom: 0px;     }      #import-split-into-rows-container {         flex-basis: 63%;         margin-right: 0;         margin-bottom: 10px;     }      .file-upload-wrapper {         flex-basis: 35%;         margin-right: 0;         margin-bottom: 10px;     }      #voice-select-for-import,     .right-buttons {         display: flex;         justify-content: space-between;         width: 100%;     }      #voice-select-for-import {         margin-bottom: 10px;         margin-right: 0;     }      .voice-tts-select-container {         width: 100%;     }      .right-buttons>* {         flex-basis: 48%;         /* Adjust as needed */         margin-left: 0;     }      .action-btn-import {         font-size: 16px;         padding: 8px 12px 8px 12px;     } }  @media screen and (min-width: 100px) and (max-width: 767px) {      /*      #editAudioContainer.show{            width: calc(100% - 30px) !important;            left: -15px !important;        }        #audio-editor-popup-control {            padding-left: 20px !important;        } */     #searchBox {         top: -120px     }      .control-setting-column:not(#voice-select-for-import) {         width: 100% !important;     }      .flex-container.voice-control-panel-bt {         display: block !important;     }      .flex-container.screen-resize-slide {         width: 100%;         padding: 10px 0 10px 0;     }      .slider-wrapper,     .slider-wrapper-key {         width: 32.5%;     }      .tool-control {         font-size: 12px;         margin-right: 0 !important;     }      .editable-div {         font-size: 16px !important;         line-height: 30px !important;     }      .slider-label {         font-size: 12px;     }      .voice-tts-select-options-rows,     .voice-tts-select-input-rows {         font-size: 15px;     }      /*   .action-btn:not(.add-new-row) {   */     .action-btn#new-project-button,     .action-btn#saveToDB {         font-size: 14px;         padding: 8px 8px 8px 8px;     }      .title-editable {         font-size: 14px !important;     }      .action-btn.add-new-row {         transform: scale(0.8);     }      #search-button {         display: none;     }      .edit-button {         padding: 4px;     }      .edit-button h4 {         font-size: 18px;     }      .text-rows-container {         padding: 5px 15px 5px 5px !important;     }      /* .main-rows-container{    height: calc(100vh - 65px);} */     .circular-button {         width: 32px;         height: 32px;     }      .new-project-btn {         margin-right: 0;     }      .main-studio-left,     .main-studio-right {         max-width: 350px;     } }  .tool-control {     display: flex;     justify-content: center;     text-align: center;     gap: 10px;     margin-bottom: 10px;     margin-right: 10px; }  .line-no {     color: #343a40;     font-weight: bold;     padding: 0 10px 10px 5px;     border-bottom: 1px solid #e0c17d;     display: inline-block; }  .underline-char-count {     color: #343a40;     font-weight: bold;     padding: 0 0px 10px 5px;     border-bottom: 1px solid #e0c17d;     display: inline-block; }  .circular-button.confirm-remove {     margin-left: 8px !important; }  .mid-profile {     font-size: 13px;     color: dimgrey; }  #copyMID {     cursor: pointer; }  @supports (-webkit-touch-callout: none) {     .main-studio-wrapper {         height: -webkit-fill-available;     } }  .control-bottom {     position: fixed;     bottom: 0px;     width: 100%;     text-align: center;     display: flex;     background: linear-gradient(to bottom, rgba(207, 192, 207, 0) 0%, rgb(221, 205, 210) 60%);     padding: 30px 0px 10px 0px;     z-index: 100;     justify-content: space-between;     align-items: center; }  .arrow-open-side i, .arrow-close-side i {     pointer-events: none; }  .arrow-open-side {     background: none;     font-size: 30px;     cursor: pointer;     color: #000000;     border: none;     outline: none;     display: none; }  .arrow-close-side {     font-size: 30px;     cursor: pointer;     color: #000000;     outline: none;     border: none;     background: none;     display: none; }  #closeLeftPanel, #closeRightPanel {     display: none; }  #closeLeftPanel i, #closeRightPanel i {     color: red; }  #break-default {     display: flex;     align-items: center;     justify-content: center;     width: 100%;     padding-top: 10px;     border-bottom: 1px dashed #b3b3b3;     padding-bottom: 15px }  @media screen and (min-width: 100px) and (max-width: 1100px) {      .arrow-open-side,     .arrow-close-side {         display: flex;     }      .main-studio-left,     .main-studio-right {         padding-top: 0 !important;     }      #closeLeftPanel,     #closeRightPanel {         display: block;         position: sticky;         position: -webkit-sticky;         top: 0;         background: rgba(0, 0, 0, 0.6);         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);         -webkit-backdrop-filter: blur(20px);         backdrop-filter: blur(20px);         width: 100%;         border-radius: 10px;         z-index: 10001 !important;     } }  #advanced-pronun-only-pc {     display: none;     padding-bottom: 15px;     color: #F44336; }  @media screen and (max-width: 767px) {     #advanced-pronun-option {         opacity: 0.2;         pointer-events: none;     }      #advanced-pronun-only-pc {         display: block;     }      .project-info {         margin-bottom: 15px !important;     } }  @media (max-width: 1100px) {      .main-studio-left,     .main-studio-right {         z-index: 102;     }      body:has(.main-studio-right.open) .main-studio-center,     body:has(.main-studio-left.open) .main-studio-center {         filter: blur(10px);         pointer-events: none;     } }  @media screen and (min-width: 768px) and (max-width: 1024px) {     .popupPronun-content {         overflow: auto;         height: 100%;         width: 100%;         border-radius: 0;         border: 0 !important;         transform: translateY(0px) !important;     }      .popupPronun-content,     .popupPronun-check-rows-content {         max-width: 100%;     }      #tab-pronun-add-container,     #tab-pronun-example,     #tab-pronun-document,     #tab-pronun-alphabet {         height: auto;         overflow-y: auto;     } }  @media screen and (min-width: 1101px) {     .control-bottom {         position: fixed;         position: -webkit-sticky;         width: 100%;         bottom: -2px;         left: 0;         padding-bottom: 20px;     }      .main-studio-left,     .main-studio-right {         z-index: 101;     } }  @media screen and (min-width: 1920px) {     .tool-control-button button {         margin: 0 2px;         padding: 5px 10px;     }      .control-setting-column:not(#voice-select-for-import) {         width: 220px;     } }  #download-all-delay-panel {     padding: 10px 0 0 8px; }  .input-group {     margin-left: 10px; }  .leading-zeros {     opacity: 0;     color: transparent; }  .not-allowed-div {     position: fixed;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     text-align: center;     padding: 40px 20px;     background-color: rgba(255, 255, 255, 0.4);     border-radius: 8px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);     width: 90%;     max-width: 400px; }  .not-allowed-div i {     color: #bb184f; }  .pin-form {     position: fixed;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     text-align: center;     padding: 40px 10px;     background-color: rgba(255, 255, 255, 0.4);     border-radius: 8px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);     width: 90%;     max-width: 400px; }  .pin-form input[type="text"] {     margin: 10px 0;     padding: 10px;     width: 200px;     border: 1px solid #ced4da;     border-radius: 4px; }  .pin-form button {     padding: 10px 20px;     background-color: #007bff;     color: white;     border: none;     border-radius: 4px;     cursor: pointer; }  .pin-form button:hover {     background-color: #0056b3; }  .date-info {     cursor: help; }  #playAllButton {     padding: 8px 16px;     background-color: #007bff;     color: white;     border: none;     border-radius: 4px;     cursor: pointer;     width: 200px;     text-align: left; }  .text-row.highlight {     opacity: 1; }  .project-info {     display: flex;     flex-wrap: wrap;     align-items: center;     padding: 0px 15px;     border-radius: 8px;     margin-top: 40px;     margin-left: 60px; }  .project-image {     margin-right: 20px; }  .project-image img {     width: 100px;     height: 100px;     object-fit: cover;     border: 3px solid #fff;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }  .project-details {     flex-grow: 1; }  .project-details i {     margin-right: 5px; }  .project-details div {     margin-bottom: 5px; }  @media (max-width: 374px) {     .project-action {         flex-direction: column !important;         align-items: center;         justify-content: space-between;         width: 100%;     }      #playAllButton,     .language-switcher-container {         flex: 1;         width: 100% !important;     }      .project-info {         flex-direction: column;         align-items: center;         margin-left: 0 !important;         margin-bottom: 15px !important;     } }  @media (min-width: 375px) and (max-width: 706px) {     .project-action {         flex-direction: row !important;         align-items: center;         justify-content: space-between;         width: 100%;     }      #playAllButton,     .language-switcher-container {         flex: 1;         width: 100%;     }      .language-switcher-container {         margin-top: 0 !important;     }      .project-info {         flex-direction: column;         align-items: center;         margin-left: 0 !important;         margin-bottom: 15px !important;     }      .project-image {         margin-right: 0;         margin-bottom: 15px;     }      /*     .project-action {        margin-left: 0;        margin-top: 15px;        align-self: flex-start;    } */ }  .project-action {     display: flex;     flex-direction: column;     gap: 10px; }