trix-editor { background: var(--background); color: var(--light-text); font-size: 0.9rem; line-height: 1.4; border: 1px solid var(); padding: 5px; border-radius:var(--radius-sm); } trix-toolbar .trix-button--icon { background-color: #E0FFFF !important; -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } h1, h2, h3, h4, h5, h6, button, label { font-family: "Bricolage Grotesque", "Inter", sans-serif; } .button { font-weight:700; margin:8px; text-align:center; gap:space-between; white-space:nowrap; display:inline-block; font-size:13px; max-width:300px; border:none; padding:6px 9px; border-radius:var(--radius-sm); box-shadow:var(--brand-shadow); gap:7px; align-items: center; background: transparent; color: var(--light-text); border: 1px solid var(--light-text); text-decoration: none; transition: all 0.2s ease; } .button:hover { background: rgba(150, 201, 61, 0.15); transform: translateY(-1px); } @keyframes gentyBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes gentyShake { 0% { transform: translateX(0); } 20% { transform: translateX(-1px); } 40% { transform: translateX(1px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } 100% { transform: translateX(0); } } @keyframes gentyPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--branding-rgb), 0.35); } 70% { box-shadow: 0 0 0 20px rgba(var(--branding-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--branding-rgb), 0); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .table-wrapper { overflow-x: auto; overflow-y: auto; max-height: 600px; border-radius:var(--radius-sm); margin: 1rem 0; scrollbar-width: thin; scrollbar-color: var(--branding) transparent; } .table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .table-wrapper::-webkit-scrollbar-track { background: transparent; } .table-wrapper::-webkit-scrollbar-thumb { background: var(--branding); border-radius: var(--radius-sm); } table { border-collapse: collapse; padding:1px; overflow-x:auto; background: var(--card-bg); color: var(--light-text); font-size: 0.95rem; } thead { background: var(--branding); position: sticky; top: 0; z-index: 100; } thead tr { border-bottom: 2px solid var(--branding); } thead th { color: white; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; padding: 1rem 1.25rem; text-align: left; white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--simple-color); transition: all 0.2s ease; } tbody tr:hover { background: rgba(150, 201, 61, 0.05); } tbody tr:last-child { border-bottom: none; } td { padding:5px 10px; font-size:11px; vertical-align: middle; } tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.02); } tbody tr:nth-child(even) { background: transparent; } td:first-child { font-weight: 500; } .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; background: var(--g-branding); color: white; } @media (max-width: 768px) { .table-wrapper { margin: 0 -1rem; border-radius: 0; } table { min-width: 600px; font-size: 0.9rem; } th { padding: 0.75rem 1rem; } tb { padding:5px 8px; font-size:15px; } } @media (max-width: 480px) { } .g-button { background: var(--branding); color:black; margin:10px auto; text-align:center; gap:space-between; white-space:nowrap; display:inline-block; max-width:300px; border:none; padding:9px 16px; border-radius:var(--radius-sm); box-shadow:var(--brand-shadow); } .g-button:hover { background:var(--g-branding); } .uppyupload-section { margin-bottom: 5px; padding: 4px; max-height:auto; height:250px; border: 1px solid var(--simple-color); border-radius: var(--radius-sm); background: var(--card-bg); overflow-y:scroll; } .uppygallery-grid { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; } .uppy-Dashboard-inner { background: transparent !important; border: none !important; border-radius: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; } .uppy-Dashboard-innerWrap { background: transparent !important; } .uppy-Dashboard-Bar { display: none !important; } .uppy-Dashboard-poweredBy { display: none !important; } .uppy-Dashboard-upload { display: none !important; } .uppy-StatusBar-actions { display: none !important; } .uppy-Dashboard-AddFiles { background: transparent !important; border: 1.5px dashed var(--simple-color) !important; border-radius: var(--radius-sm); !important; margin: 0 !important; padding: 1rem !important; min-height: 90px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: border-color 0.2s; } .uppy-Dashboard-AddFiles:hover, .uppy-Dashboard--isDraggingOver .uppy-Dashboard-AddFiles { border-color: var(--branding) !important; background: var(--card-bg) !important; } .uppy-Dashboard-AddFiles-title { font-size: 13px !important; color: var(--light-text) !important; font-weight: 400 !important; } .uppy-Dashboard-browse { color: var(--branding) !important; font-weight: 500 !important; text-decoration: none !important; } .uppy-Dashboard-Item { background: #1e211a !important; border: 0.5px solid var(--simple-color) !important; border-radius: var(--radius-sm); !important; margin: 0 0 6px !important; padding: 6px 8px !important; } .uppy-Dashboard-Item-name { color: var(--light-text) !important; font-size: 12px !important; } .uppy-Dashboard-Item-status { color: #5a6a4a !important; font-size: 11px !important; } .uppy-Dashboard-Item-previewImg { border-radius: 5px !important; height:100px; width:110px; object-fit: fit !important; } .uppy-Dashboard-Item-action--remove { color: #4a5a3a !important; transition: color 0.15s; } .uppy-Dashboard-Item-action--remove:hover { color: #c0392b !important; } .uppy-Dashboard-Item-progress .uppy-ProgressBar-inner { background: var(--branding) !important; } .uppy-StatusBar { background: transparent !important; border-top: 0.5px solid var(--simple-color) !important; margin-top: 6px !important; padding-top: 6px !important; } .uppy-StatusBar-status { color: #5a6a4a !important; font-size: 11px !important; } .fade-pro-down, .fade-pro-up, .fade-pro-left, .fade-pro-right { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; will-change: transform, opacity; } .fade-pro-up { transform: translateY(40px); } .fade-pro-down { transform: translateY(-40px); } .fade-pro-left { transform: translateX(-15px); } .fade-pro-right { transform: translateX(15px); } .fade-pro-down.active, .fade-pro-up.active, .fade-pro-left.active, .fade-pro-right.active { opacity: 1; transform: translate(0,0); } .swal2-popup { background: var(--background) !important; color: var(--light-text) !important; border-radius: 5px var(--radius); var(--radius); 5px !important; } .swal2-container { z-index: 99999 !important; } .swal2-top-toast { z-index: 999999 !important; } .swal2-title { color: var(--branding) !important; font-weight: 700 !important; letter-spacing: 0.5px; } .swal2-html-container { color: var(--light-text) !important; font-size: 15px; opacity: 0.9; } .swal2-icon { border-color: var(--branding) !important; color: var(--branding) !important; background:var(--branding) !important; } .swal2-success-ring { border-color: var(--branding) !important; } .swal2-confirm, .swal2-cancel { background: var(--branding) !important; color: black !important; border: none !important; border-radius: var(--radius-sm); !important; padding: 8px 20px !important; font-weight: 600; letter-spacing: 0.3px; transition: 0.3s ease-in-out; } .swal2-confirm:hover, .swal2-cancel:hover { opacity: 0.9; transform: scale(1.05); } .swal2-timer-progress-bar { background: var(--branding) !important; height: 3px !important; border-radius: var(--radius-sm); } .puff-shadow { position: relative; display: inline-block; box-shadow: 0 6px 0 var(--secondary-color); transform: translateY(0); transition: all 0.2s ease-in-out; } .puff-shadow:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); } .pulse-spread { position: relative; overflow: hidden; z-index: 0; } .pulse-spread::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; background: var(--light-text); opacity: 0.45; transform: translate(-50%, -50%); border-radius: inherit; animation: pulseSpread 2.3s ease-out infinite; z-index: -1; } @keyframes pulseSpread { 0% { width: 0; height: 0; opacity: 0.6; } 60% { width: 260%; height: 260%; opacity: 0.12; } 100% { width: 320%; height: 320%; opacity: 0; } } .glow-btn { position: relative; padding: 12px 32px; border: none; border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; overflow: visible; outline: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; z-index: 1; } .glow-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: inherit; border-radius: inherit; transform: translate(-50%, -50%); z-index: -1; opacity: 0.6; filter: blur(12px); transition: all 0.4s ease; } .glow-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 2px solid transparent; border-radius: inherit; transform: translate(-50%, -50%) scale(1); z-index: -2; opacity: 0; transition: all 0.4s ease; } .glow-btn:hover::before { opacity: 0.8; filter: blur(16px); transform: translate(-50%, -50%) scale(1.05); } .glow-btn:hover::after { animation: lightPulse 2s infinite; } .glow-btn:active { transform: scale(0.98); } .glow-btn:active::after { animation: quickPulse 0.3s ease; } @keyframes lightPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; border-color: rgba(255, 255, 255, 0.6); } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.4; border-color: rgba(255, 255, 255, 0.3); } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; border-color: rgba(255, 255, 255, 0); } } @keyframes fadeIx { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes quickPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; border-color: rgba(255, 255, 255, 0.8); } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; border-color: rgba(255, 255, 255, 0); } } .glow-btn.pulse-continuous::after { animation: lightPulse 2s infinite; } .glow-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .glow-btn.success { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .glow-btn.danger { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } .glow-btn.warning { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); } .glow-btn.dark { background: linear-gradient(135deg, #434343 0%, #000000 100%); } .glow-btn.small { padding: 8px 20px; font-size: 14px; } .glow-btn.large { padding: 16px 40px; font-size: 18px; } .glow-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } .glow-btn:disabled::before, .glow-btn:disabled::after { animation: none; opacity: 0; } .c-wrap { margin:5px auto; display:flex; justify-content:center; align-items:center; } .yz-video-frame { width: 100%; background: var(--background); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--brand-shadow); border: 1px solid var(--simple-color); transition: transform .3s ease, box-shadow .3s ease; } .yz-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .yz-video-frame.yz-short { aspect-ratio: 9 / 16; } .yz-video-frame.yz-wide { aspect-ratio: 16 / 9; } .yz-video-frame.yz-small { max-width: 280px; } .yz-video-frame.yz-medium { max-width: 340px; } .yz-video-frame.yz-large { max-width: 420px; } @media (max-width: 600px) { .yz-video-frame.yz-short { max-width: 90vw; } .yz-video-frame.yz-wide { max-width: 95vw; } } @media (min-width: 601px) and (max-width: 1024px) { .yz-video-frame.yz-short { max-width: 360px; } .yz-video-frame.yz-wide { max-width: 720px; } } @media (min-width: 1025px) { .yz-video-frame.yz-short { max-width: 320px; } .yz-video-frame.yz-wide { max-width: 860px; } } @media (hover: hover) { .yz-video-frame:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); } } h1 { font-size:26px; font-weight:bold; } h2 { font-size:21px; font-weight:bold; } h3 { font-size:19px; font-weight:bold; } h4 { font-size:18px; font-weight:bold; } h5 { font-size:17px; font-weight:bold; } h6 { font-size:15px; font-weight:bold; } trix-editor { max-height: 200px; overflow-y: auto; border: 2px solid #ccc; padding: 10px; box-sizing: border-box; } trix-editor h1, trix-editor h2, trix-editor h3, trix-editor h4, trix-editor h5, trix-editor h6 { color: var(--light-text) !important; font-size:18px !important; font-weight:bold !important; } trix-editor blockquote { color: var(--light-text); padding-left: 1rem; } trix-editor a { color: var(--light-text); text-decoration: underline; } trix-toolbar { background-color:transparent; color:var(--light-text) !important; } trix-toolbar .trix-button-group { border-color: var(--light-text); } trix-toolbar .trix-button { color: var(--light-text); } trix-toolbar .trix-button--icon::before { filter: brightness(1.5); color:var(--light-text) !important; } * { box-sizing: border-box; margin: 0; padding: 0; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--branding); border-radius: var(--radius); } ::-webkit-scrollbar-thumb:hover { background: var(--g-branding); } * { scrollbar-width: thin; scrollbar-color: var(--branding) var(--card-bg); } .scroll-x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .scroll-x { overflow-x: hidden; } } html { font-family: Chakra Petch, "Inter", sans-serif; scroll-behavior:smooth; background: var(--background); color: var(--light-text); } a { color: var(--light-text); text-decoration: none; transition: color 0.3s ease, border-bottom 0.3s ease; } a:hover { color: transparent; background: var(--g-branding); -webkit-background-clip: text; background-clip: text; border:none; } a:visited { color: var(--light-text); opacity:0.6; } a.fff { color: var(--branding); font-weight: 600; text-decoration: none; transition: color 0.3s ease, border-bottom 0.3s ease; } a.fff:hover { color: transparent; background: var(--g-branding); -webkit-background-clip: text; background-clip: text; border: none; } a.fff:visited { color: var(--branding); font-weight: 600; text-decoration: none; opacity: 0.6; } .form-control, .form-select { border-radius: 5px; background-color: rgba(var(--branding-rgb), 0.12); color: var(--light-text); border:none; padding: 20px 14px; font-weight: 500; font-size: 15px; transition: all 0.3s ease; } .pin-field { -webkit-text-security: disc; text-security: disc; letter-spacing: 4px; } .form-control:focus, .form-select:focus { background-color: var(--card-bg); color: var(--light-text); outline: none; border: 1px solid var(--branding); box-shadow:var(--brand-shadow); } .form-group { margin-bottom: 20px; } td { color:var(--light-text); opacity:0.8; } textarea.form-control { min-height: 90px; border-radius:5px; border:2px dashed var(--simple-color); resize: vertical; } .form-label, label { display: block; margin:5px 1px 3px; font-size:0.95rem; font-weight:500; color: var(--light-text); } .form-hint { font-size: 0.7rem; opacity: 0.7; color: var(--light-text); margin-bottom: 5px; display: block; } .form-hint i { color: var(--branding); } select { border-radius: 5px; background-color: var(--card-bg); border: 1px solid #4a4f4f; padding: 15px 12px; font-weight: 500; font-size: 15px; color: var(--light-text); } body { font-family: Chakra Petch, "Inter", sans-serif; color: var(--text-color); background-color: var(--background); overflow-x: hidden; justify-content:center; max-width: 1800px; margin: 0 auto; } ::selection { background: var(--branding); color: var(--background); } ::-moz-selection { background: var(--branding); color: var(--background); } .glowing-cyan-text { color: var(--light-text); text-shadow: 0 0 10px var(--branding), 0 0 20px rgba(0, 255, 224, 0.5); } .driver-popover.classic-theme { font-family: var(--low-font); background: var(--card-bg); color: var(--light-text); border: 1px solid var(--branding); border-radius: var(--radius-sm); padding: 8px; overflow: hidden; } .driver-popover.classic-theme .driver-popover-title { font-family: var(--hg-font); font-size: 17px; font-weight: 600; color: var(--light-text); padding: 5px 5px 7px; background: var(--card-bg); border-bottom: 1px solid var(--simple-color); } .driver-popover.classic-theme .driver-popover-description, .driver-popover.classic-theme .driver-popover-progress-text { color: var(--light-text); } .driver-popover.classic-theme .driver-popover-description { font-size: 13px; color:var(--light-text); line-height: 1.65; } .driver-popover.classic-theme .driver-popover-footer { border-top: none; } .driver-popover.classic-theme button { font-family: var(--low-font); font-size: 12px; padding: 5px 13px; border-radius: var(--radius-sm); border: 1px solid rgba(var(--branding-rgb), 0.4); background: transparent; color: var(--light-text); text-shadow: none; letter-spacing: 0.04em; } .driver-popover.classic-theme .driver-popover-next-btn { background: var(--branding); border-color: var(--branding); color: var(--light-text); font-weight: 600; } .driver-popover.classic-theme button:hover { opacity:0.6; } .driver-popover.classic-theme .driver-popover-prev-btn { background: var(--branding); color: var(--light-text); font-family: var(--hg-font); } .driver-popover.classic-theme .driver-popover-prev-btn:hover { opacity:0.7; } .driver-popover.driverjs-theme .driver-popover-navigation-btns { justify-content: space-between; gap: 3px; } .driver-popover.classic-theme .driver-popover-next-btn:hover { opacity: 0.7; background: var(--branding); } .driver-popover.classic-theme .driver-popover-close-btn { color: var(--light-text); } .driver-popover.classic-theme .driver-popover-close-btn:hover { opacity:0.7; } .driver-popover.classic-theme .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--simple-color); } .driver-popover.classic-theme .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--simple-color); } .driver-popover.classic-theme .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--card-bg); } .driver-popover.classic-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--card-bg); }