@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,200..800;1,200..800&display=swap');

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* 2024 */

section {
  background-attachment: fixed;
}

.backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.transition-fade {
  transition: opacity 0.3s, transform 0.4s;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}


@media (max-width: 991px) {
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}






up-drawer-backdrop, up-modal-backdrop {
  z-index: 0;
  background: #eeed !important;
}
.dark up-drawer-backdrop, .dark up-modal-backdrop {
  background: #000d !important;
}
up-drawer-backdrop{
  z-index: 0;
}




.form-input {
  border-radius: 20px;
}
up-popup-dismiss, up-cover-dismiss, up-drawer-dismiss, up-modal-dismiss {
  background: none !important;
  background-color: transparent !important;
  color: #000;
  position: fixed;
  top: 0;
  right: 0;
  font-size: 2.4rem;
  line-height: .5;
  font-weight: bold;
  padding: 30px 15px;
}
.dark up-popup-dismiss, .dark up-cover-dismiss, .dark up-drawer-dismiss, .dark up-modal-dismiss {
  color: #fff;
}
up-popup, up-cover-box, up-drawer-box, up-modal-box {
  padding: 0;
  box-shadow: none;
  background: none;
}
up-drawer-box {
  background: #fff;
  height: 100vh;
  right: -10px;
}
.dark up-drawer-box {
  background: #000;
  border-left: 2px solid #fff;
}
up-modal-box {
  max-height: 80vh;
  overflow-y: auto;
  margin: auto;
  padding: 0;
  border: 2px solid #000;
  width: auto;
  border-radius: 4px;
  background: #fff;
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}
.dark up-modal-box {
  background: #000;
  border: 2px solid #fff;
}

.has-menu { margin:0 !important; }
.rotapost-40 { transform: rotate(4.0deg); }
.rotapost-21 { transform: rotate(-3.0deg); }
.rotapost-27 { transform: rotate(3.0deg); }
.rotapost-21 { transform: rotate(-3.0deg); }
.rotapost-12 { transform: rotate(-2.85deg); }
.rotapost-3 { transform: rotate(-2.7deg); }
.rotapost-14 { transform: rotate(-2.55deg); }
.rotapost-5 { transform: rotate(-2.4deg); }
.rotapost-26 { transform: rotate(-2.25deg); }
.rotapost-0 { transform: rotate(-2.1deg); }
.rotapost-38 { transform: rotate(-1.95deg); }
.rotapost-9 { transform: rotate(-1.8deg); }
.rotapost-10 { transform: rotate(-1.65deg); }
.rotapost-11 { transform: rotate(-1.5deg); }
.rotapost-2 { transform: rotate(-1.35deg); }
.rotapost-13 { transform: rotate(-1.2deg); }
.rotapost-4 { transform: rotate(-1.05deg); }
.rotapost-15 { transform: rotate(-0.9deg); }
.rotapost-6 { transform: rotate(-0.75deg); }
.rotapost-17 { transform: rotate(-0.6deg); }
.rotapost-18 { transform: rotate(-0.45deg); }
.rotapost-19 { transform: rotate(-0.3deg); }
.rotapost-20 { transform: rotate(-0.15deg); }
.rotapost-1 { transform: rotate(0.0deg); }
.rotapost-22 { transform: rotate(0.15deg); }
.rotapost-23 { transform: rotate(0.3deg); }
.rotapost-34 { transform: rotate(0.45deg); }
.rotapost-35 { transform: rotate(0.6deg); }
.rotapost-16 { transform: rotate(0.75deg); }
.rotapost-7 { transform: rotate(0.9deg); }
.rotapost-28 { transform: rotate(1.05deg); }
.rotapost-29 { transform: rotate(1.2deg); }
.rotapost-30 { transform: rotate(1.35deg); }
.rotapost-31 { transform: rotate(1.5deg); }
.rotapost-32 { transform: rotate(1.65deg); }
.rotapost-33 { transform: rotate(1.8deg); }
.rotapost-24 { transform: rotate(1.95deg); }
.rotapost-25 { transform: rotate(2.1deg); }
.rotapost-36 { transform: rotate(2.25deg); }
.rotapost-37 { transform: rotate(2.4deg); }
.rotapost-8 { transform: rotate(2.55deg); }
.rotapost-39 { transform: rotate(2.7deg); }


@keyframes rotate {
  0% {
    background: #ffff004f;
  }
  50% {
    background: #99cd3292;
  }
  100% {
    background: #ffff004f;
  }
}

.element {
  transition-duration: .4s;
  background: #ffff004f;
}

.element:hover {
  animation: rotate 7s linear infinite alternate;
  scale: 1.2;
}

.create-btn {
  padding: 6px 10px 7px;
  margin: -4px 0 0 0;
}


/* POPUP */


#overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.55);
	z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

#browser {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: calc(50vw + 14px);
	height: 100vh;
	background-color: white;
	z-index: 1;
	z-index: 3001;
	box-shadow: #000 0 0 18px;
}
@media (max-width:1023px) {
  #browser {
    top: 72px !important;
    width: 100%;
	  height: calc(100vh - 60px);
  }
}


#preview {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 440px;
	height: 100vh;
	background-color: white;
	z-index: 1;
	z-index: 301;
}

.full-iframe {
	width: 100%;
	height: 100%;
}


#browser { top: 0; height: 100vh; z-index: 1029; box-shadow:#0007 0 0 7px; }
#preview { top: 0; height: 100vh; z-index: 1030; box-shadow:#0007 0 0 7px; }

.underline {
  text-decoration: underline;
}

.underline:hover {
  text-decoration: none;
}

.dark #searchbar {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  --tw-backdrop-blur: 7px;
  background: #000000dd !important;
}


[dir="ltr"] .float-right{
  float: right !important;
}
[dir="rtl"] .float-right{
  float: left !important;
}
.min-h-screen-100 {
  min-height: calc(100vh - 5rem) !important;
}

.bg-squared{
  background-color: #d0d0d0;
  background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  padding: 8px 8px;
}


.menu-btns {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
[dir="ltr"] .menu-btns{
  float: right !important;
}
[dir="rtl"] .menu-btns{
  float: left !important;
}
@media (min-width: 768px){
  .menu-btns {
    padding-top: 0;
    padding-left: 7px;
    padding-right: 7px;
  }
}

.menu-btns.connected {
  padding-top: 0 !important;
}



@media (max-width: 1023px){
  #browse-closer {
    position: fixed !important; 
    top: 25px !important;
    right: 13px !important;
  }
  body.half #topnav .navigation,
  body.most #topnav .navigation{
    display: none;
  }
  #preview iframe, g#browse iframe {
    height: calc(100vh - 72px);
  }
}
  
.float-dir .theme-selector {
  margin-top: 18px;
}

@media (min-width: 1024px){
  .lg\:inline-block {
    display: inline-block !important;
  }
  
  .lg\:w-80{
    width: 20rem !important;
  }

  body.half,
  body.most{
    overflow-x: hidden !important;
  }
  body.half #topnav,
  body.half .fixed.right-0.left-0 {
    right: 50vw !important;
  }
  body.most #topnav,
  body.most .fixed.right-0.left-0 {
    right: 426px !important;
  }
  body.half #topnav,
  body.half .fixed.right-0.left-0,
  body.half main section.min-h-screen {
    width:50vw !important;
  }
  body.most #topnav,
  body.most .fixed.right-0.left-0,
  body.most main section.min-h-screen {
    width:calc(100vw - 426px) !important;
  }
  
  body.half .md\:col-span-4 {
    width: 100% !important;
  }
  body.half .md\:col-span-6 {
    width: 100% !important;
    grid-column: span 6 / span 6 !important;
  }
  
  #browse-closer {
    position: fixed !important; 
    right: 17px !important;
  }
}

@media (min-width: 1280px){
  #browse-closer {
    position: fixed !important; 
    right: calc(50vw + 69px) !important;
  }
}



@media (max-width: 1023px){
  #preview-closer {
    position: fixed !important; 
    right: 14px !important;
  }
}
  
@media (min-width: 1024px){
  #preview-closer {
    position: fixed !important; 
    right: 460px !important;
  }
}

@media (min-width: 1280px){
  #preview-closer {
    position: fixed !important; 
    right: 495px !important;
  }
}


.to-black{
  --tw-gradient-to: #e4e7e8 !important;
}
html.dark .to-black{
  --tw-gradient-to: #161c2d !important;
}

#EditView {
  max-width:890px;
}


.dark .dark\:hover\:border-indigo-600:hover{
  --tw-border-opacity: 1 !important;
  border-color: var(--theme-color) !important;
}

.dark .dark\:hover\:border-gray-700:hover{
  --tw-border-opacity: 1 !important;
  border-color: rgb(55 65 81 / var(--tw-border-opacity)) !important;
}

.dark .dark\:hover\:border-b-indigo-600:hover{
  --tw-border-opacity: 1 !important;
  border-bottom-color: var(--theme-color) !important;
}

.dark .dark\:hover\:bg-indigo-600:hover{
  --tw-bg-opacity: 1 !important;
  background-color: var(--theme-color) !important;
}

.dark .dark\:hover\:bg-slate-900:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
}

.dark .dark\:hover\:bg-indigo-600\/5:hover{
  background-color: rgb(79 70 229 / 0.05) !important;
}

.dark .dark\:hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity)) !important;
}

.dark .dark\:hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}

.dark .dark\:hover\:bg-slate-800:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity)) !important;
}

.dark .dark\:hover\:text-white:hover{
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.dark .dark\:hover\:text-slate-400:hover{
  --tw-text-opacity: 1 !important;
  color: rgb(148 163 184 / var(--tw-text-opacity)) !important;
}

.dark .dark\:hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1) !important;
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.dark .dark\:hover\:shadow-gray-700:hover{
  --tw-shadow-color: #374151 !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.dark .dark\:hover\:shadow-gray-800:hover{
  --tw-shadow-color: #1f2937 !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.dark .group:hover .dark\:group-hover\:bg-slate-900\/90{
  background-color: rgb(0 0 0 / 0.9) !important;
}

.dark .group:hover .dark\:group-hover\:shadow-gray-700{
  --tw-shadow-color: #374151 !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}


.flex.absolute.right-0.bottom-0.z-10.justify-between.items-center.p-0.bg-white.rounded-md.transition-all.ease-in-out.scale-0.duration-600.group-hover\:scale-100 {
  margin-right: -130px;
  z-index: 152;
  position: relative;
}

.CodeMirror-code {
  outline: 0;
  font-family: monospace;
  font-weight: 300 !important;
  font-size: 72%;
  line-height: 158% !important;
  letter-spacing: 0.025em;
}

.editor-preview, .editor-preview-side {
  padding: 10vh 10vw;
}
.editor-preview p {
  margin: 12px 0 2px !important;
} 
.editor-preview h1, .editor-preview-side h1 {
  font-weight: 700;
  margin: 42px 0 12px !important;
  font-size: 170%;
}

.editor-preview h2, .editor-preview-side h2 {
  font-weight: 700;
  margin: 36px 0 10px !important;
  font-size: 160%;
}

.editor-preview h3, .editor-preview-side h3 {
  font-weight: 700;
  margin: 30px 0 8px !important;
  font-size: 150%;
}

.editor-preview h4, .editor-preview-side h4 {
  font-weight: 700;
  margin: 24px 0 6px !important;
  font-size: 140%;
}

.editor-preview h5, .editor-preview-side h5 {
  font-weight: 700;
  margin: 18px 0 4px !important;
  font-size: 130%;
}

.editor-preview h6, .editor-preview-side h6 {
  font-weight: 700;
  margin: 12px 0 2px !important;
  font-size: 120%;
}

.menu-btns .pmapps {
  margin: 0 5px 0 0 !important;
}

#grid.shuffle code {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80%;
  overflow: hidden;
}



#myVideo { background:transparent; position:fixed; z-index:0; margin:0; padding:0; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; border:0; }
@media (max-width:991px) { #myVideo { height:calc(100vh - 60px); }}
#Box { z-index:1; position:fixed; background:#0000; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; border:0; }
#Box #Paused { opacity:0 !important; transition-duration: 0.72s !important;   }
body.paused { background:transparent !important; }
body.paused #Box #Paused { opacity:1 !important; }
body.paused #Box #Paused #Blur { position:fixed; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; border:0; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:.53 !important; }
#Box #Paused img { filter:invert(1); }
html.dark #Box #Paused img { filter:unset; }

.justify-content {
  justify-content: center;
}

.vnotify-container {
  position: fixed; z-index: 9999; }
  .vnotify-container.vn-top-right {
    right: 10px;
    top: 10px; }
  .vnotify-container.vn-top-left {
    top: 10px;
    left: 10px; }
  .vnotify-container.vn-bottom-right {
    bottom: 10px;
    right: 10px; }
  .vnotify-container.vn-bottom-left {
    bottom: 10px;
    left: 10px; }
  .vnotify-container.vn-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .vnotify-container .vn-close {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 15px;
    height: 15px;
    padding: 2px;
    cursor: pointer; }
    .vnotify-container .vn-close:before, .vnotify-container .vn-close:after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      height: 2px;
      background: #fff; }
    .vnotify-container .vn-close:before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg); }
    .vnotify-container .vn-close:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg); }

.vnotify-item {
  width: 20em;
  padding: 15px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 15px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  border:3px solid #0002; }
.vnotify-item:hover {
  background: #000; border:3px solid #000; }
.dark .vnotify-item {
border:3px solid #fff2; }
.dark .vnotify-item:hover {
      background: #000; border:3px solid #fff; }

.vnotify-title {
  font-weight: bold; }

.vnotify-info {
  background: #3498db;
  color: #fff; }

.vnotify-success {
  background: #2ecc71;
  color: #fff; }

.vnotify-error {
  background: #e74c3c;
  color: #fff; }

.vnotify-warning {
  background: #f39c12;
  color: #fff; }

.vnotify-notify {
  background: #333;
  color: #fff; }

nav.shadow-md {
    box-shadow: 0 0 17px rgb(0 0 0 / 0.20), 0 5px 13px rgb(60 72 88 / 0.20) !important;
}
.black nav.shadow-md {
    box-shadow: 0 0 7px rgb(0 0 0), 0 0 17px rgb(0 0 0 / 0.20), 0 5px 13px rgb(60 72 88 / 0.20) !important;
}
  
#ListView {
  padding: 0px 36px;
}

.dark .dark\:border-black {
  border-color: #000 !important;
}

.dark .dark\:hover\:border-white {
  border-color: #fff !important;
}



.gradient-text {
  background: linear-gradient(45deg, #3B82F6, #10B981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#apps {
  padding-top: 120px;
  padding-bottom: 120px;
}

.illustration-placeholder {
  background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.max-h-40 {
  height:40px !important;
}

#PMapp-grid {
  margin: 0 auto;
}
#PMapp-grid .PMapp-card {
  border: 3px solid #0002;
  transition-duration: .4s;
  border-radius: 12px;
  padding: 17px 4px 21px;
}
.dark #PMapp-grid .PMapp-card {
  border: 3px solid #fff2;
}
#PMapp-grid .PMapp-card.beta,
#PMapp-grid .PMapp-card.stopped,
#PMapp-grid .PMapp-card.lang,
#PMapp-grid .PMapp-card.plural {
  opacity: .3;
}
#PMapp-grid .PMapp-card.beta {
  opacity: .5;
}
#PMapp-grid .PMapp-card.stopped {
  color: #f00;
}
#PMapp-grid .PMapp-card.lang {
  color: orange;
}
#PMapp-grid .PMapp-card.plural {
  color: green;
}
#PMapp-grid .PMapp-card:hover {
  border: 3px solid #000;
  opacity: 1;
}
.dark #PMapp-grid .PMapp-card:hover {
  border: 3px solid #fff;
}

.dark .dark\:bg-transparent {
    background: #0005 !important;
    backdrop-filter: blur(8px);
}
.dark body.dark\:bg-black {
    background: #000; /* url(/cdn/design/bgs/discord.png) !important; */
    background-position: 0 0 !important;
    background-size: cover !important;
}
#qrcode img {
    max-width: 100%;
}


/* 2025 */ 


html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Roboto", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal; /* 5 */
          letter-spacing: 0.025em;
}


@media (min-width: 992px) {
  #topnav .navigation-menu {
    justify-content: left;
  }
}

.navigation.hack {
  float: right;
  padding: 17px 0 0;
}
.navigation-btns {
  float: right;
  height: 72px;
  display: flex !important;
  align-items: center;
}

html, body {
  overflow-x: hidden;
}

.dark .dark\:text-black {
  color: #000000 !important;
}
.dark .dark\:bg-black {
  background: #000000 !important;
}

/* Autofill input text color (Light & Dark modes) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #000000;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #ffffff;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #000000;
}

/* Custom z-index for custom elements */
up-cover, up-drawer, up-modal {
  z-index: 101 !important;
}

/* Custom scrollbars & user-select */
* {
  scrollbar-width: thin;
  scrollbar-color: #8f54a0 #00000000;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10/11 */
  user-select: none;         /* Standard syntax */
}
/* Scrollbar styling for WebKit browsers */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #00000000;
}
*::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 10px;
}

/* Body element adjustments */
body {
  font-weight: 300;
  scrollbar-gutter: unset !important;
  overflow-y: scroll !important;
  padding-right: 0 !important;
}

/* Prevent background scroll when modals are open (Unpoly viewports) */
up-cover-viewport, up-drawer-viewport, up-modal-viewport {
  overflow: hidden !important;
}

/* Override html font and spacing */
html {
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Roboto", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  letter-spacing: 0.025em;
}

/* Contact form input override */
.form-input {
  border-radius: 20px;
}

/* Registration form & Choices.js select styles */
.registration-form {
  position: relative;
}
.registration-form .submit-btn {
  border-radius: 0.5rem;
}
.registration-form .form-input,
.registration-form .choices[data-type*=select-one] .choices__inner {
  border-radius: 0.5rem;
}
@media (min-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }
  .registration-form .submit-btn {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0.125rem;
    border-bottom-left-radius: 0.125rem;
  }
  [dir="ltr"] .registration-form .submit-btn {
    border-top-right-radius: 0.125rem;
    border-bottom-right-radius: 0.125rem;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  [dir="rtl"] .registration-form .submit-btn {
    border-top-left-radius: 0.125rem;
    border-bottom-left-radius: 0.125rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .registration-form .form-input {
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    outline-width: 0px;
  }
  [dir="ltr"] .registration-form .form-input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0.125rem;
    border-bottom-left-radius: 0.125rem;
  }
  [dir="rtl"] .registration-form .form-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0.125rem;
    border-bottom-right-radius: 0.125rem;
  }
  .registration-form .choices[data-type*=select-one] .choices__inner {
    border-radius: 0px;
  }
}
.filter-input-box,
.filter-input-box.form-select,
.filter-search-form .choices__inner {
  height: 60px;
  border-radius: 0px;
  border-width: 0px;
  padding-top: 13px;
  padding-bottom: 15px;
  font-size: 15px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
[dir="ltr"] .filter-input-box,
[dir="ltr"] .filter-input-box.form-select,
[dir="ltr"] .filter-search-form .choices__inner {
  padding-right: 6px;
  padding-left: 45px;
}
[dir="rtl"] .filter-input-box,
[dir="rtl"] .filter-input-box.form-select,
[dir="rtl"] .filter-search-form .choices__inner {
  padding-left: 6px;
  padding-right: 45px;
}
.choices__inner {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .choices__inner {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
.choices__list--dropdown,
.choices[data-type*=select-one] .choices__input {
  z-index: 999;
  border-radius: 5px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-shadow: 0 5px 13px rgb(60 72 88 / 0.15);
  --tw-shadow-colored: 0 5px 13px var(--tw-shadow-color);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark .choices__list--dropdown,
.dark .choices[data-type*=select-one] .choices__input {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-shadow-color: #1f2937;
  --tw-shadow: var(--tw-shadow-colored);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(22 28 45 / var(--tw-text-opacity));
}
.dark .choices__list--dropdown .choices__item--selectable.is-highlighted {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.choices__list,
.choices__list--dropdown .choices__item--selectable {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  z-index: 2;
  border-width: 0px;
}
.choices[data-type*=select-one]::after {
  top: 1.25rem;
  border-width: 0px;
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
[dir="ltr"] .choices[data-type*=select-one]::after {
  right: 1.75rem;
  content: var(--tw-content);
  left: auto;
}
[dir="rtl"] .choices[data-type*=select-one]::after {
  left: 1.75rem;
  content: var(--tw-content);
  right: auto;
}
.dark .choices[data-type*=select-one]::after {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.choices[data-type*=select-one]::after {
  content: "󰅀" !important;
  font-family: "Material Design Icons";
}

/* Datepicker styles */
.qs-datepicker-container {
  border-color: inherit;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .qs-datepicker-container {
  --tw-border-opacity: 1;
  border-color: rgb(22 22 23 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.qs-datepicker-container .qs-controls {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .qs-datepicker-container .qs-controls {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
.qs-datepicker-container .qs-controls .qs-month-year {
  font-size: 15px;
  font-weight: 600;
}
.dark .qs-datepicker-container .qs-controls .qs-month-year {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.qs-datepicker-container .qs-controls .qs-month-year:hover {
  border-radius: 0.375rem;
  border-bottom-width: 1px;
  border-color: inherit;
  outline-color: inherit;
}
.qs-squares .qs-square {
  height: 34px;
  width: 34px;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}
.qs-squares .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover,
.qs-squares .qs-square.qs-current {
  text-decoration: none;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: var(--theme-color) !important;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.qs-squares .qs-day {
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
.dark .qs-squares .qs-day {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Combined utility class override */
.flex.absolute.right-0.bottom-0.z-10.justify-between.items-center.p-0.bg-white.rounded-md.transition-all.ease-in-out.scale-0.duration-600.group-hover\:scale-100 {
  margin-right: -130px;
  z-index: 152;
  position: relative;
}

/* Code editor and preview styles */
.CodeMirror-code {
  outline: 0;
  font-family: monospace;
  font-weight: 300 !important;
  font-size: 72%;
  line-height: 158% !important;
  letter-spacing: 0.025em;
}
.editor-preview, .editor-preview-side {
  padding: 10vh 10vw;
}
.editor-preview p {
  margin: 12px 0 2px !important;
}
.editor-preview h1, .editor-preview-side h1 {
  font-weight: 700;
  margin: 42px 0 12px !important;
  font-size: 170%;
}
.editor-preview h2, .editor-preview-side h2 {
  font-weight: 700;
  margin: 36px 0 10px !important;
  font-size: 160%;
}
.editor-preview h3, .editor-preview-side h3 {
  font-weight: 700;
  margin: 30px 0 8px !important;
  font-size: 150%;
}
.editor-preview h4, .editor-preview-side h4 {
  font-weight: 700;
  margin: 24px 0 6px !important;
  font-size: 140%;
}
.editor-preview h5, .editor-preview-side h5 {
  font-weight: 700;
  margin: 18px 0 4px !important;
  font-size: 130%;
}
.editor-preview h6, .editor-preview-side h6 {
  font-weight: 700;
  margin: 12px 0 2px !important;
  font-size: 120%;
}

/* Misc. small adjustments */
.menu-btns .pmapps {
  margin: 0 5px 0 0 !important;
}
#grid.shuffle code {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80%;
  overflow: hidden;
}

/* Video background overlay and paused state */
#myVideo {
  background: transparent;
  position: fixed;
  z-index: 0;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
}
@media (max-width: 991px) {
  #myVideo {
    height: calc(100vh - 60px);
  }
}
#Box {
  z-index: 1;
  position: fixed;
  background: #0000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
}
#Box #Paused {
  opacity: 0 !important;
  transition-duration: 0.72s !important;
}
body.paused {
  background: transparent !important;
}
body.paused #Box #Paused {
  opacity: 1 !important;
}
body.paused #Box #Paused #Blur {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.53 !important;
}
#Box #Paused img {
  filter: invert(1);
}
html.dark #Box #Paused img {
  filter: unset;
}

/* Utility class alias */
.justify-content {
  justify-content: center;
}

/* Notification (vNotify) styles */
.vnotify-container {
  position: fixed;
  z-index: 9999;
}
.vnotify-container.vn-top-right {
  right: 10px;
  top: 10px;
}
.vnotify-container.vn-top-left {
  top: 10px;
  left: 10px;
}
.vnotify-container.vn-bottom-right {
  bottom: 10px;
  right: 10px;
}
.vnotify-container.vn-bottom-left {
  bottom: 10px;
  left: 10px;
}
.vnotify-container.vn-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vnotify-container .vn-close {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 15px;
  height: 15px;
  padding: 2px;
  cursor: pointer;
}
.vnotify-container .vn-close:before,
.vnotify-container .vn-close:after {
  content: '';
  position: absolute;
  width: 100%;
  top: 50%;
  height: 2px;
  background: #fff;
}
.vnotify-container .vn-close:before {
  -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
}
.vnotify-container .vn-close:after {
  -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
.vnotify-item {
  width: 20em;
  padding: 15px;
  position: relative;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      -ms-border-radius: 5px;
          border-radius: 5px;
  margin-bottom: 15px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  border: 3px solid #0002;
}
.vnotify-item:hover {
  background: #000;
  border: 3px solid #000;
}
.dark .vnotify-item {
  border: 3px solid #fff2;
}
.dark .vnotify-item:hover {
  background: #000;
  border: 3px solid #fff;
}
.vnotify-title {
  font-weight: bold;
}
.vnotify-info {
  background: #3498db;
  color: #fff;
}
.vnotify-success {
  background: #2ecc71;
  color: #fff;
}
.vnotify-error {
  background: #e74c3c;
  color: #fff;
}
.vnotify-warning {
  background: #f39c12;
  color: #fff;
}
.vnotify-notify {
  background: #333;
  color: #fff;
}

/* Navigation shadow overrides */
nav.shadow-md {
  box-shadow: 0 0 17px rgb(0 0 0 / 0.20), 0 5px 13px rgb(60 72 88 / 0.20) !important;
}
.black nav.shadow-md {
  box-shadow: 0 0 7px rgb(0 0 0), 0 0 17px rgb(0 0 0 / 0.20), 0 5px 13px rgb(60 72 88 / 0.20) !important;
}

/* ListView padding */
#ListView {
  padding: 0px 36px;
}

/* Dark mode border color overrides */
.dark .dark\:border-black {
  border-color: #000 !important;
}
.dark .dark\:hover\:border-white:hover {
  border-color: #fff !important;
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(45deg, var(--theme-color), #10B981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Apps section spacing */
#apps {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Illustration placeholder glass effect */
.illustration-placeholder {
  background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Added missing utility classes */
.overflow-y-auto {
  overflow-y: auto !important;
}
.max-h-40 {
  height: 40px !important;
}

/* App grid card styles */
#PMapp-grid {
  margin: 0 auto;
}
#PMapp-grid .PMapp-card {
  border: 3px solid #0002;
  transition-duration: 0.4s;
  border-radius: 12px;
  padding: 17px 4px 21px;
}
.dark #PMapp-grid .PMapp-card {
  border: 3px solid #fff2;
}
#PMapp-grid .PMapp-card.beta,
#PMapp-grid .PMapp-card.stopped,
#PMapp-grid .PMapp-card.lang,
#PMapp-grid .PMapp-card.plural {
  opacity: 0.3;
}
#PMapp-grid .PMapp-card.beta {
  opacity: 0.5;
}
#PMapp-grid .PMapp-card.stopped {
  color: #f00;
}
#PMapp-grid .PMapp-card.lang {
  color: orange;
}
#PMapp-grid .PMapp-card.plural {
  color: green;
}
#PMapp-grid .PMapp-card:hover {
  border: 3px solid #000;
  opacity: 1;
}
.dark #PMapp-grid .PMapp-card:hover {
  border: 3px solid #fff;
}

/* Dark mode background adjustments */
.dark .dark\:bg-transparent {
  background: #0005 !important;
  backdrop-filter: blur(8px);
}
.dark body.dark\:bg-black {
  background: #000 !important;
  background-position: 0 0 !important;
  background-size: cover !important;
}

/* QR code responsiveness */
#qrcode img {
  max-width: 100% !important;
}
#qrcode canvas {
  max-width: 100% !important;
}

/* Unpoly modal backdrops */
up-drawer-backdrop, up-modal-backdrop {
  z-index: 0;
  background: #eeed !important;
}
.dark up-drawer-backdrop, .dark up-modal-backdrop {
  background: #000d !important;
}

/* Unpoly dismiss (close) buttons */
up-popup-dismiss, up-cover-dismiss, up-drawer-dismiss, up-modal-dismiss {
  background: none !important;
  background-color: transparent !important;
  color: #000;
  position: fixed;
  top: 0;
  right: 0;
  font-size: 2.4rem;
  line-height: 0.5;
  font-weight: bold;
  padding: 30px 15px;
}
.dark up-popup-dismiss, .dark up-cover-dismiss, .dark up-drawer-dismiss, .dark up-modal-dismiss {
  color: #fff;
}

/* Unpoly modal containers */
up-popup, up-cover-box, up-drawer-box, up-modal-box {
  padding: 0;
  box-shadow: none;
  background: none;
}
up-drawer-box {
  background: #fff;
  height: 100vh;
  right: -10px;
}
.dark up-drawer-box {
  background: #000;
  border-left: 2px solid #fff;
}
up-modal-box {
  max-height: 80vh;
  overflow-y: auto;
  margin: auto;
  padding: 0;
  border: 2px solid #000;
  width: auto;
  border-radius: 4px;
  background: #fff;
  -webkit-backdrop-filter: blur(11px);
          backdrop-filter: blur(11px);
}
.dark up-modal-box {
  background: #000;
  border: 2px solid #fff;
}

/* Miscellaneous custom utility classes */
.has-menu {
  margin: 0 !important;
}
.rotapost-40 {
  transform: rotate(4deg);
}
.rotapost-21 {
  transform: rotate(-3deg);
}
.rotapost-27 {
  transform: rotate(3deg);
}
.rotapost-12 {
  transform: rotate(-2.85deg);
}
.rotapost-3 {
  transform: rotate(-2.7deg);
}
.rotapost-14 {
  transform: rotate(-2.55deg);
}
.rotapost-5 {
  transform: rotate(-2.4deg);
}
.rotapost-26 {
  transform: rotate(-2.25deg);
}
.rotapost-0 {
  transform: rotate(-2.1deg);
}
.rotapost-38 {
  transform: rotate(-1.95deg);
}
.rotapost-9 {
  transform: rotate(-1.8deg);
}
.rotapost-10 {
  transform: rotate(-1.65deg);
}
.rotapost-11 {
  transform: rotate(-1.5deg);
}
.rotapost-2 {
  transform: rotate(-1.35deg);
}
.rotapost-13 {
  transform: rotate(-1.2deg);
}
.rotapost-4 {
  transform: rotate(-1.05deg);
}
.rotapost-15 {
  transform: rotate(-0.9deg);
}

.float-dir {
  float: right;
}

html[dir="rtl"] .float-dir {
  float: left;
}

.holder {
  display: inline-block;
}
.holder {
  /* Ta couleur de teinte */
  background-color: var(--theme-color) !important;  

  /* Dimensions à adapter */
  width: 100%;
  height: 100%;

  /* Le masque : on utilise l’image PNG comme masque alpha */
  mask-image: url('/cdn/apps/studio/illus1.webp');         /* MDN: définit l’image de masque */ 
  mask-mode: alpha;                         /* MDN: on se sert de l’alpha channel */ 
  mask-size: cover;
  mask-repeat: no-repeat;

  /* Préfixe WebKit pour Safari/anciennes versions Chrome */
  -webkit-mask-image: url('/cdn/apps/studio/illus1.webp');
  -webkit-mask-mode: alpha;
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  
}
.holder img {
  margin: -16px;
  display: block;
  mix-blend-mode: overlay; /* pour teinter les blancs vers la couleur parente */
}


#topnav .navigation-menu > li.active > a, #topnav .navigation-menu > li:hover > a, .dark #topnav .navigation-menu > li.active > a, .dark #topnav .navigation-menu > li:hover > a, 
.text-indigo-600 {
  color: var(--theme-color) !important;
}
.text-indigo-600 {
  color: var(--theme-color) !important;
}
.bg-indigo-600 {
  background-color: var(--theme-color) !important;
}
.hover\:bg-indigo-700:hover {
  background-color: #000 !important;
}
.border-indigo-600,
.border-indigo-700,
.hover\:border-indigo-600:hover {
  border-color: var(--theme-color) !important;
}
* {
  scrollbar-color: var(--theme-color) #00000000;
}
.dark .dark\:bg-slate-900 {
  background-color: #2c0d0abb !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
 #topnav.nav-sticky {
  background: linear-gradient(#fff, #ffffff93) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.dark #topnav.nav-sticky {
  background: linear-gradient(#000, #00000079) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.logo {
  line-height: 68px;
}
#topnav {
  min-height: 68px;
}

@media (max-width: 991px) {
  #topnav {
    min-height: 68px;
  }
  .dark #topnav {
    background: linear-gradient(#000, #00000079) !important;
    -webkit-backdrop-filter: blur(7px);
   backdrop-filter: blur(7px);
  }
}

@media (min-width: 992px) {
  .lg\:w-80 {
    max-width: 330px;
  }
}
#topnav .buy-button {
  line-height: 63px;
}


.hover\:bg-indigo-600 {
  transition-duration: .2s;
}
.hover\:bg-indigo-600:hover {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  color: var(--theme-text) !important;
}

.hover\:text-indigo-600 {
  transition-duration: .3s;
}
.hover\:text-indigo-600:hover {
  color: var(--theme-color) !important;
}


div#browser {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 33;
  height: 100vh !important;
  overflow: auto;
  width: 100%;
  max-width: 760px;
  box-shadow: #0008 0 0 88px;
  background: #fffa;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dark div#browser {
  box-shadow: #fff8 0 0 88px;
  background: #000a;
}
div#browser iframe {
  width: 100%;
  height: 100vh !important;
}


div#preview {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 33;
  height: 100vh !important;
  overflow: auto;
  width: 100%;
  max-width: 470px;
  box-shadow: #0008 0 0 88px;
  background: #fffa;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dark div#preview {
  box-shadow: #fff8 0 0 88px;
  background: #000a;
}
div#preview iframe {
  width: 100%;
  height: 100vh !important;
}

[dir="ltr"] .ltr\:right-10{
  right: 17px !important;
}
[dir="rtl"] .rtl\:left-10{
  left: 17px !important;
}

#topnav {
  z-index: 3;
}

#searchbar {
  backdrop-filter: blur(8px) !important;
  background: #fffc !important;
}
.dark #searchbar {
  background: #000c !important;
}


.custom-input {
  background-color: #1F2937;
  border: 1px solid #374151;
  padding: 5px 10px;
}
.custom-input:focus {
  border-color: var(--theme-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
.tab-active {
  border-bottom: 2px solid var(--theme-color);
  color: var(--theme-color);
}
.swiper-pagination-bullet {
  background: #000;
  opacity: 0.23;
}
.dark .swiper-pagination-bullet {
  background: #fff;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
.modal {
  transition: opacity 0.25s ease;
}

.hover\:opacity-100:hover {
  opacity: 1;
}


/* THEME CHOOSER */ 


#mobileMenu.show {
  transform: translateX(0);
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

.feature-card {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-2px);
  background-color: #f9fafc;
}

.dark .feature-card:hover {
  background-color: #1f2937;
}

.feature-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: var(--theme-color) !important;
  transition: width 0.3s ease;
}

.feature-card:hover::after {
  width: 100%;
}

.feature-section {
  transition: all 0.3s ease;
}

.feature-section:hover {
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.1), 0 2px 6px -1px rgba(0, 0, 0, 0.06);
}

.feature-block {
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.feature-block:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.popularity-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--theme-color);
  border-radius: 4px 0 0 0;
}

.dark .popularity-indicator {
  background: var(--theme-color);
}

.feature-block[data-clicks="124"] .popularity-indicator { width: 100%; }
.feature-block[data-clicks="98"] .popularity-indicator { width: 79%; }
.feature-block[data-clicks="87"] .popularity-indicator { width: 70%; }
.feature-block[data-clicks="72"] .popularity-indicator { width: 58%; }

.sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.sidebar-submenu.active {
  max-height: 500px;
  opacity: 1;
}

.sidebar-menu-toggle {
  cursor: pointer;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.sidebar-menu-toggle.active .toggle-icon {
  transform: rotate(90deg);
}

.theme-selector {
  position: relative;
}

#colorPickerBtn {
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
  color: var(--theme-text) !important;
}

#colorPickerBtn:hover {
  transform: scale(1.2);
}

#colorPickerBtn i {
  opacity: 0.7;
  color: inherit;
}

#colorPickerBtn:hover i {
  opacity: 1;
}

#colorPicker {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.color-panel {
  position: fixed;
  top: 72px;
  right: 12px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 100;
  width: 240px;
  display: none;
  border: 1px solid #e5e7eb;
}

.dark .color-panel {
  background-color: #1f2937;
  border-color: #374151;
}

.color-panel.active {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

.color-panel h4 {
  margin-bottom: 12px;
  font-weight: 600;
}

.color-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.color-preset {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-preset:hover {
  transform: scale(1.1);
}

.color-preset.active {
  border-color: #e5e7eb;
}

.dark .color-preset.active {
  border-color: #374151;
}

#sidebar {
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}

header.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  width: 100%;
}

@media (min-width: 768px) {
  header.top-navbar {
      left: 16rem; 
      width: calc(100% - 16rem);
  }
  
  .flex-1.flex.flex-col {
      margin-left: 16rem; 
  }
  
  main.with-fixed-header {
      padding-top: 60px; 
  }
}

@media (max-width: 767px) {
  main.with-fixed-header {
      padding-top: 56px; 
  }
}

#mobileMenu .bg-indigo-900,
#mobileMenu .bg-white,
#mobileMenu .dark\:bg-gray-800,
#mobileMenu .dark\:bg-black {
  width: 100%;
}

.w-10.h-10.rounded-full.bg-blue-100,
.w-10.h-10.rounded-full.bg-purple-100,
.w-10.h-10.rounded-full.bg-green-100,
.w-10.h-10.rounded-full.bg-yellow-100,
.w-10.h-10.rounded-full.bg-red-100,
.w-10.h-10.rounded-full.bg-gray-100 {
  background-color: var(--theme-light);
}

.text-blue-600,
.text-green-600,
.text-purple-600,
.text-yellow-600,
.text-red-600,
.text-gray-600 {
  color: var(--theme-color);
}
.bg-theme {
  background-color: var(--theme-color) !important;
  color: var(--theme-text) !important;
}
.bg-theme-light {
  background-color: var(--theme-light);
  color: var(--theme-text) !important;
}

.w-10.h-10.rounded-full i {
  color: var(--theme-color);
}

.dark .w-10.h-10.rounded-full i {
  color: var(--theme-color);
}

.w-10.h-10.rounded-full.bg-blue-100 i,
.w-10.h-10.rounded-full.bg-purple-100 i,
.w-10.h-10.rounded-full.bg-green-100 i,
.w-10.h-10.rounded-full.bg-yellow-100 i,
.w-10.h-10.rounded-full.bg-red-100 i,
.w-10.h-10.rounded-full.bg-gray-100 i {
  color: var(--theme-text) !important;
}

.from-indigo-600, .to-blue-500, .from-indigo-500, .to-blue-600,
.from-purple-500, .to-pink-600,
.from-blue-500, .to-indigo-500 {
  --tw-gradient-from: var(--theme-color);
  --tw-gradient-to: var(--theme-hover);
}

.bg-indigo-600, .hover\:bg-indigo-700:hover, 
.bg-indigo-700, .hover\:bg-indigo-800:hover {
  background-color: var(--theme-color) !important;
  color: var(--theme-text) !important;
}

.bg-white.text-indigo-600, .bg-indigo-50.text-indigo-600,
.hover\:bg-indigo-50:hover.text-indigo-600 {
  color: var(--theme-color);
}

.feature-card .w-8.h-8.rounded-full,
.feature-block .w-8.h-8.rounded-full {
  background-color: transparent !important;
}

.feature-card .w-8.h-8.rounded-full i,
.feature-block .w-8.h-8.rounded-full i {
  color: inherit !important;
}

/* Theme colors */
:root {
    --theme-color: #4f46e5;
    --theme-hover: #3f36d5;
  --theme-light: #eef2ff;
  --theme-dark: #000000;
  --theme-text: #ffffff; 
}

[data-theme="purple"] {
  --theme-color: #9333ea;
  --theme-hover: #7e22ce;
  --theme-light: #f3e8ff;
  --theme-dark: #581c87;
}

[data-theme="blue"] {
  --theme-color: #2563eb;
  --theme-hover: #1d4ed8;
  --theme-light: #eff6ff;
  --theme-dark: #1e3a8a;
}

[data-theme="green"] {
  --theme-color: #16a34a;
  --theme-hover: #15803d;
  --theme-light: #f0fdf4;
  --theme-dark: #14532d;
}

/* Apply theme colors to selected elements */
.bg-indigo-800, .bg-indigo-800:hover, .hover\:bg-indigo-800:hover {
  background-color: var(--theme-color) !important;
  color: var(--theme-text) !important;
}

/* Customized scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-color) !important;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-hover);
}

#topnav .navigation-menu>li .submenu li a:hover, .dark #topnav .navigation-menu>li .submenu li a:hover,
#topnav .has-submenu.active .submenu li.active>a, .dark #topnav .has-submenu.active .submenu li.active>a {
  color: var(--theme-hover) !important;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-color) transparent;
}

.dark .theme-btn.active {
  box-shadow: 0 0 0 2px black, 0 0 0 4px var(--theme-color);
}

/* Dark mode transitions */
html.dark .bg-white {
  background-color: #000;
  color: #fff;
}

html.dark .text-gray-600 {
  color: #d1d5db;
}

html.dark .bg-gray-100 {
  background-color: #000;
}

.dark-mode-transition {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Active sidebar link styles */
#sidebar .bg-indigo-800, #sidebar .hover\:bg-indigo-800:hover, 
#mobileMenu .bg-indigo-800, #mobileMenu .hover\:bg-indigo-800:hover {
  background-color: var(--theme-color) !important;
  color: var(--theme-text) !important;
}

@media (min-width: 768px) {
  .md\:text-2xl {
      font-size: 1.55rem !important;
      line-height: 1.93rem !important;
  }
}



.ml-2 {
  margin-left: .5rem !important;
}
.mr-2 {
  margin-right: .5rem !important;
}