@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background: var(--bg-body);
}

html.preload body {
  visibility: hidden;
}

button:disabled {
  opacity: 0.8 !important;
  pointer-events: none;
  cursor: not-allowed;
}

:root {
  --bg-body: #f9fafb;
  --bg-navbar: #f9fafb;
  --bg-nav: #F8FAFC;
  --bg-filter: #ffffff;
  --bg-translator: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f5f5;
  --bg-card-active: #f7f3f3b7;
  --bg-dropdown: #ffffff;
  --bg-options: #ffffff;
  --bg-credit: #f3f2f2;
  --bg-scroll: #f1f1f1;
  --bg-scroll-thumb: #c1c1c1;
  --bg-scroll-thumb-hover: #a8a8a8;
  --bg-skeleton: #f3f3f3;
  --bg-shimmer-1: #e0e0e0;
  --bg-shimmer-2: #f5f5f5;
  --bg-svg: #f5f5f5cf;
  --bg-svg-edit: #f5f5f5cf;
  --bg-svg-hover: #eee8e8;
  --bg-svg-active: #f7f3f3;
  --bg-pending: #f9f0a8ba;
  --bg-play: #2f2e2e;
  --bg-popup: #1a1d46;
  --bg-upgrade: #f9f9f9;
  --bg-upgrade-left: #ffffff;
  --bg-upgrade-right: transparent;
  --bg-plan: rgb(253, 223, 164);
  --bg-plan-header: white;
  --bg-plan-selected: #e9f5ff;
  --bg-discount: rgb(253, 223, 164);
  --bg-input: white;
  --bg-loader: white;
  --bg-alert: #ffffff;
  --bg-progress: #eee;
  --bg-progress-bar: linear-gradient(90deg, #4f46e5, #6366f1);
  --bg-modal-overlay: #ffffffe3;
  --bg-modal: #ffffff;
  --bg-modal-done: #4f46e5;
  --bg-file: white;
  --bg-tab-active: #1dbf9f1a;
  --bg-file-icon: #e9eceb;
  --bg-active: rgba(34, 197, 94, 0.12);
  --bg-inactive: rgba(107, 114, 128, 0.12);
  --bg-cancelled: rgba(245, 158, 11, 0.12);
  --bg-expired: rgba(239, 68, 68, 0.12);
  --bg-past-due: rgba(239, 68, 68, 0.12);
  --bg-billing-card: #ffffff;
  --bg-creadit-tab-active: black;
  --bg-creadit-tab-hover: rgba(0, 0, 0, 0.05);
  --bg-credit-info: rgba(255, 215, 0, 0.08);
  --text-green-dark: #14583b;
  --texty-green-900: #0f5c3b;
  --text-green-700: #2e7d5b;
  --text-green-500: #50973d;
  --text-red-700: #cc2828;
  --text-yellow-900: #ffa216;
  --text-black-900: #000;
  --text-black-850: #111827;
  --text-black-800: #201f1f;
  --text-black-700: #413e3e;
  --text-black-600: #5e5959;
  --text-black-500: rgb(131, 123, 123)9;
  --text-yellow-700: #6e5a3c;
  --text-arrow: #5e5959;
  --text-icon: #40555f;
  --text-placeholder: #000;
  --text-request: #1f2937;
  --text-done: #6b7280;
  --text-trans: #16a34a;
  --text-number: #9ca3af;
  --text-price: #0f172a;
  --text-discount: #1a1717;
  --text-link: #0457a1;
  --text-white-900: white;
  --text-white-700: rgb(224, 219, 219);
  --text-white: #ffffff;
  --text-error: #e32a44;
  --text-pending: #433e3e;
  --text-restore: #0c451b;
  --text-primary: #24233f;
  --text-primary-hover: #4338CA;
  --text-disabled: #8d9197;
  --text-signup: #260800;
  --text-login: #260800;
  --text-logo: #0F172A;
  --text-active: #22c55e;
  --text-inactive: #6b7280;
  --text-cancelled: #f59e0b;
  --text-expired: #ef4444;
  --text-past-due: #ef4444;
  --text-tab: #6b6f6d;
  --text-tab-active: #131313;
  --text-file-icon: #6f63a3;
  --text-file-action: #1f7f6c;
  --text-file-more: #898383;
  --border-yellow-900: #ffa216;
  --border-gray-200: #ebe7e7;
  --border-gray-300: #b6b2b2;
  --border-public: #ebe7e7;
  --border-billing: rgba(0, 0, 0, 0.075);
  --border-card: #ebe7e7;
  --border-plan: rgb(253, 223, 164);
  --border-input: #ccc;
  --border-input-focus: rgb(80, 102, 226);
  --border-loader: #e5e7eb;
  --border-loader-top: #2563eb;
  --border-translator: #ccc;
  --border-modal: #ebe7e7;
  --border-circle: rgb(97 109 151);
  --border-circle-top: #efececc2;
  --border-popular-credit: rgba(255, 215, 0, 0.6);
  --border-credit: rgba(0, 0, 0, 0.075);
  --border-credit-info: rgba(255, 215, 0, 0.2);
  --border-tab-active: rgb(13, 121, 76);
  --border-file: #e9e1e1;
  --btn-gray-500: #b4aaaa;
  --btn-green-900: #14583b;
  --btn-white: #ffffff;
  --btn-blue-700: #0945ef;
  --btn-pink-700: #cc2828;
  --btn-pay: #3700ff;
  --btn-secondary: linear-gradient(135deg, #2563eb, #3b82f6);
  --btn-secondary-hover: linear-gradient(50deg, #1846a8, #3b82f6);
  --btn-primary: #f9fafb;
  --btn-primary-hover: #f3f4f6;
  --btn-disabled: #E5E7EB;
  --btn-signup: rgb(240, 185, 11);
  --btn-login: transparent;
  --btn-credits: rgba(0, 0, 0, 0.05);
  --btn-manage: black;
  --btn-buy-credits: linear-gradient(135deg, #ffd700, #c9a227);
  --btn-buy-credits-primary: linear-gradient(135deg, #ffd700, #c9a227);
  --slider-active: #1a73e8;
  --slider-active-before: #1a73e888;
  --slider-track: #e6e6e6;
  --shadow-card: rgba(0, 0, 0, 0.04);
  --shadow-filter: #e1dbdbe8;
  --shadow-options: 0 20px 40px rgba(0, 0, 0, .10), 0 6px 16px rgba(0, 0, 0, .08);
  --shadow-upgrade: 20px 0px 50px 1px rgba(0, 0, 0, 0.05);
  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-translator: #dee4e7;
  --shadow-secondary: 0 6px 16px rgba(79, 70, 229, 0.25);
}

.dark-mode {
  --bg-body: #121216;
  --bg-navbar: #121212;
  --bg-nav: #191a1f;
  --bg-filter: #191a1f;
  --bg-translator: #1b2027;
  --bg-dropdown: transparent;
  --bg-card: #1b2027;
  --bg-card-hover: #333c4796;
  --bg-card-active: #333c4796;
  --bg-options: #1f2630;
  --bg-credit: #1516167a;
  --bg-pending: #e5d65b42;
  --bg-skeleton: #2a2a2a;
  --bg-shimmer-1: #444;
  --bg-shimmer-2: #666;
  --bg-scroll: #1e1e1e;
  --bg-scroll-thumb: #555;
  --bg-scroll-thumb-hover: #777;
  --bg-svg: #585961;
  --bg-svg-edit: transparent;
  --bg-svg-hover: #272930;
  --bg-svg-active: #272930;
  --bg-play: #f3eded;
  --bg-popup: #1f2630;
  --bg-upgrade: #212226;
  --bg-upgrade-left: #17181c;
  --bg-upgrade-right: transparent;
  --bg-plan: transparent;
  --bg-plan-header: transparent;
  --bg-discount: #c08f2ec5;
  --bg-plan-selected: transparent;
  --bg-input: #14171b;
  --bg-loader: #212226;
  --bg-alert: #29313c;
  --bg-progress: #4f4e4e;
  --bg-progress-bar: linear-gradient(90deg, #4f46e5, #6366f1);
  --bg-modal-overlay: #121216e0;
  --bg-modal: #29313c;
  --bg-modal-done: #4f46e5;
  --bg-file: #29313c;
  --bg-file-icon: #464b49;
  --bg-tab-active: #1dbf9f1a;
  --bg-active: rgba(34, 197, 94, 0.18);
  --bg-inactive: rgba(107, 114, 128, 0.18);
  --bg-cancelled: rgba(245, 158, 11, 0.18);
  --bg-expired: rgba(239, 68, 68, 0.18);
  --bg-past-due: rgba(239, 68, 68, 0.18);
  --bg-billing-card: #262d37db;
  --bg-creadit-tab-active: #292b29;
  --bg-creadit-tab-hover: #1e1d1d;
  --bg-credit-info: #ffd9000e;
  --text-green-dark: #14583b;
  --text-green-900: #65c79d;
  --text-green-700: #35b57e;
  --text-green-500: #50973d;
  --text-red-700: #f76060;
  --text-yellow-900: #ffa216;
  --text-white-900: #fff;
  --text-white-700: rgb(224, 219, 219);
  --text-white: #ffffff;
  --text-black-900: #e8e6e6;
  --text-black-850: #e8e6e6;
  --text-black-800: #c7c0c0;
  --text-black-700: #413e3e;
  --text-black-600: #ada4a4;
  --text-black-500: rgb(131, 123, 123)9;
  --text-yellow-700: #6e5a3c;
  --text-arrow: white;
  --text-price: #ffffff;
  --text-discount: #ece7e7;
  --text-icon: #f4f4f8;
  --text-placeholder: #ffffff;
  --text-request: #e5e7eb;
  --text-done: #9ca3af;
  --text-trans: #34d399;
  --text-number: #6b7280;
  --text-link: #4a7ae9;
  --text-error: #e998a3;
  --text-pending: rgb(228, 218, 218);
  --text-restore: #ffffff;
  --text-primary: #e5e7eb;
  --text-primary-hover: #e5e7eb;
  --text-disabled: #6B7280;
  --text-signup: #260800;
  --text-login: #f5f1f0;
  --text-logo: #fdfdfd;
  --text-active: #4ade80;
  --text-inactive: #9ca3af;
  --text-cancelled: #fbbf24;
  --text-expired: #f87171;
  --text-past-due: #f87171;
  --text-tab: #a8b3ae;
  --text-tab-active: #cbcbcb;
  --text-file-icon: #c7c7c7;
  --text-file-more: #a79f9f;
  --text-file-action: #1f7f6c;
  --border-gray-200: transparent;
  --border-gray-300: transparent;
  --border-public: #e1d5d526;
  --border-billing: #e1d5d526;
  --border-card: #bbafaf26;
  --border-plan: #8b7446b8;
  --border-input: #4e5053;
  --border-input-focus: rgb(74, 162, 221);
  --border-loader: #334155;
  --border-loader-top: #38bdf8;
  --border-translator: #e6dddd65;
  --border-modal: #e1d5d526;
  --border-circle: rgb(77 85 159);
  --border-circle-top: #e9e9e92b;
  --border-popular-credit: rgba(255, 215, 0, 0.6);
  --border-credit: #e1d5d526;
  --border-credit-info: rgba(255, 215, 0, 0.2);
  --border-tab-active: rgb(13, 121, 76);
  --border-file: #514f4f;
  --btn-green-900: #14583b;
  --btn-white: transparent;
  --btn-blue-700: #0945ef;
  --btn-pink-700: #cc2828;
  --btn-pay: #1b76b3;
  --btn-secondary: #1f65d6;
  --btn-secondary-hover: #2d71dd;
  --btn-primary: #1f2937;
  --btn-primary-hover: #374151;
  --btn-disabled: #2A2A3C;
  --btn-signup: rgb(240, 185, 11);
  --btn-login: transparent;
  --btn-credits: #ffffff1a;
  --btn-manage: #ffffff1a;
  --btn-buy-credits: linear-gradient(135deg, #ffd700, #c9a227);
  --btn-buy-credits-primary: linear-gradient(135deg, #ffd700, #c9a227);
  --slider-active: #2b7be4;
  --slider-active-before: #1a73e888;
  --slider-track: #3a3a3a;
  --shadow-card: transparent;
  --shadow-filter: transparent;
  --shadow-options: transparent;
  --shadow-upgrade: 20px 0px 50px 1px rgba(0, 0, 0, 0.05);
  --shadow-translator: transparent;
  --shadow-secondary: 0 6px 16px rgba(78, 70, 229, 0.13);
}

.no-transition * {
  transition: none !important;
}

.arrow {
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  color: var(--text-arrow);
  width: 13px;
  height: 13px;
  vertical-align: middle;
}
.arrow.down {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.popup {
  position: relative;
  display: inline-block;
}
.popup::before, .popup::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  position: absolute;
  z-index: 1000;
  transition-delay: 0.5s;
  -webkit-transition: opacity 0.25s ease, transform 0.25s ease;
  -moz-transition: opacity 0.25s ease, transform 0.25s ease;
  -ms-transition: opacity 0.25s ease, transform 0.25s ease;
  -o-transition: opacity 0.25s ease, transform 0.25s ease;
}
.popup::before {
  content: attr(data-tooltip);
  background: var(--bg-popup);
  font-weight: 500;
  color: white;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.4;
  width: max-content;
  max-width: 270px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.popup::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 7px;
  border-style: solid;
}
.popup:hover::before, .popup:hover::after {
  opacity: 1;
  visibility: visible;
}
.popup {
  /* اتجاه أعلى */
}
.popup.up::before {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  -webkit-transform: translate(-50%, -8px);
  -moz-transform: translate(-50%, -8px);
  -ms-transform: translate(-50%, -8px);
  -o-transform: translate(-50%, -8px);
}
.popup.up::after {
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--bg-popup) transparent transparent transparent;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.popup.up:hover::before {
  transform: translate(-50%, -12px);
  -webkit-transform: translate(-50%, -12px);
  -moz-transform: translate(-50%, -12px);
  -ms-transform: translate(-50%, -12px);
  -o-transform: translate(-50%, -12px);
}
.popup {
  /* اتجاه أسفل */
}
.popup.down::before {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
}
.popup.down::after {
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--bg-popup) transparent;
}
.popup.down:hover::before {
  transform: translate(-50%, 12px);
}
.popup {
  /* اتجاه يسار */
}
.popup.left::before {
  top: 50%;
  right: 100%;
  transform: translate(-8px, -50%);
  -webkit-transform: translate(-8px, -50%);
  -moz-transform: translate(-8px, -50%);
  -ms-transform: translate(-8px, -50%);
  -o-transform: translate(-8px, -50%);
}
.popup.left::after {
  top: 50%;
  right: calc(100% - 2px);
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--bg-popup);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.popup.left:hover::before {
  transform: translate(-12px, -50%);
  -webkit-transform: translate(-12px, -50%);
  -moz-transform: translate(-12px, -50%);
  -ms-transform: translate(-12px, -50%);
  -o-transform: translate(-12px, -50%);
}
.popup {
  /* اتجاه يمين */
}
.popup.right::before {
  top: 50%;
  left: 100%;
  transform: translate(8px, -50%);
  -webkit-transform: translate(8px, -50%);
  -moz-transform: translate(8px, -50%);
  -ms-transform: translate(8px, -50%);
  -o-transform: translate(8px, -50%);
}
.popup.right::after {
  top: 50%;
  left: calc(100% - 2px);
  transform: translateY(-50%);
  border-color: transparent var(--bg-popup) transparent transparent;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.popup.right:hover::before {
  transform: translate(12px, -50%);
  -webkit-transform: translate(12px, -50%);
  -moz-transform: translate(12px, -50%);
  -ms-transform: translate(12px, -50%);
  -o-transform: translate(12px, -50%);
}

@media (max-width: 768px) {
  .popup::before,
  .popup::after {
    display: none;
  }
}
.custom-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background-color: var(--bg-alert);
  border-left: 20px solid #ff4d4f;
  padding: 12px 15px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  width: fit-content;
  min-width: 350px;
  max-width: 400px;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
  display: flex;
  gap: 5px;
  -webkit-transform: translateX(-50%) translateY(-20px);
  -moz-transform: translateX(-50%) translateY(-20px);
  -ms-transform: translateX(-50%) translateY(-20px);
  -o-transform: translateX(-50%) translateY(-20px);
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
}
.custom-alert span {
  width: 90%;
  line-height: 1.5;
  font-size: 14px;
  color: var(--text-black-900);
}
.custom-alert.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  -webkit-transform: translateX(-50%) translateY(0);
  -moz-transform: translateX(-50%) translateY(0);
  -ms-transform: translateX(-50%) translateY(0);
  -o-transform: translateX(-50%) translateY(0);
}
.custom-alert.error {
  border-left: 20px solid #ff4d4f;
}
.custom-alert.error button {
  color: #ff4d4f;
}
.custom-alert.info, .custom-alert.advice {
  border-left: 20px solid #e9a135;
}
.custom-alert.info button, .custom-alert.advice button {
  color: #e9a135;
}
.custom-alert.success {
  border-left: 20px solid #41c170;
}
.custom-alert.success button {
  color: #41c170;
}
.custom-alert button {
  background: transparent;
  outline: none;
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-size: 24px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}
.custom-alert button:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

@media (max-width: 768px) {
  .custom-alert {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 400px;
    padding: 10px 12px;
    font-size: 13px;
    border-left-width: 10px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
  .custom-alert span {
    width: 100%;
    font-size: 13px;
    text-align: left;
    line-height: 1.4;
  }
  .custom-alert button {
    font-size: 20px;
    width: 26px;
    height: 26px;
  }
}

/*# sourceMappingURL=root.css.map */