/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/Header/DashboardButton/DashboardButton.module.css ***!
  \********************************************************************************************************************/
/* Open User Dashboard Button */

.MI9YuuDMLrrY7RC1z4G1 {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  height: 44px;
  width: 44px;
}

/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/Header/LoginButton/LoginButton.module.css ***!
  \************************************************************************************************************/
/* Header Login Button to Open Auth Flow */

.f0DR3GXaCwh0Tt2bx2NG {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  height: 44px;
  width: 44px;
}

/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/Header/Header.module.css ***!
  \*******************************************************************************************/
/* Primary Header */

.Qp5xkmMJGKUSGJdCNCHD {
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 60px;
  left: 0;
  opacity: 1;
  position: fixed;
  right: 0;
  top: 0;
  /* Smooth, buttery transitions */
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  z-index: 100;
}

.Qp5xkmMJGKUSGJdCNCHD.hKTxAAkjtN_fM8U_Tz8H {
  opacity: 0;
  transform: translateY(-100%);
}

.Qp5xkmMJGKUSGJdCNCHD div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 500px;
  padding: 0 16px;
  width: 100%;
}

.Qp5xkmMJGKUSGJdCNCHD div > button {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 44px;
  width: 44px;
}

.Qp5xkmMJGKUSGJdCNCHD nav {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
}


/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/Avatar/Avatar.module.css ***!
  \*******************************************************************************************/

.cNFgJeNuNF741mqy3HjF {
  align-items: center; 
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  padding: 10px;
  height: 32px;
  width: 32px;
}

/*!******************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/features/Feed/LikeButton/LikeButton.module.css ***!
  \******************************************************************************************************/
/* Video Overlay Buttons Like Button */

.tPgn6_d8EcB9qbtXe5Ke {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  height: 44px;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  width: 44px;
}

/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/features/Feed/CommentsButton/CommentsButton.module.css ***!
  \**************************************************************************************************************/
/* Video Overlay Buttons Comments Button */

.u93giZHNw1r8XONVVjuT {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  height: 44px;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  width: 44px;
}

/*!********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/features/Feed/ShareButton/ShareButton.module.css ***!
  \********************************************************************************************************/
/* Video Overlay Buttons Share Button */

.QyOWKukTcDhXHdC6M19r {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  height: 44px;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  width: 44px;
}

/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/features/Feed/FullscreenButton/FullscreenButton.module.css ***!
  \******************************************************************************************************************/
/* Feed Node Overlay Buttons Fullscreen Button */

.gwFM11KfM2Zh3vK3llzI {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  height: 44px;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  width: 44px;
}

/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/features/Feed/SideNav/SideNav.module.css ***!
  \************************************************************************************************/
/* Feed Node Side Nav */

.e2IegedGqgKHDJ9K5GKq {
  bottom: 64px;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  width: 48px;
  z-index: 100;

  border: 1px dashed red;
}

/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/features/Feed/Feed.module.css ***!
  \*************************************************************************************/
/* Feed */


.FXju5x6KeXy0fnVXd9I2 {
/*
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;

  scroll-behavior: smooth;  
  
  overscroll-behavior-y: contain;

  transform: translateZ(0);
  will-change: scroll-position;
  */
   z-index: 0;
}


.FXju5x6KeXy0fnVXd9I2 article {
  contain: layout paint size;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100%;

  background: #888;
  border-radius: 10px;
  max-width: 500px;
  margin: 0 auto 4px auto;
}


/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/Main/Main.module.css ***!
  \***************************************************************************************/
/* Main */

.ZYvmIXad4zI5lNYgAWld {

}

@media (max-width: 500px) {
  .ZYvmIXad4zI5lNYgAWld {
    margin: 0;
  }
}

/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/MobileNav/HomeButton/HomeButton.module.css ***!
  \*************************************************************************************************************/
/* Navigation Home Button */

.y95ixwKpz9zik3aNbQQn {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 44px;
  width: 44px;
}



/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/MobileNav/SearchButton/SearchButton.module.css ***!
  \*****************************************************************************************************************/
/* Navigation Search Button */

.iouS73xSycZpVOshef37 {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 44px;
  width: 44px;
}

/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/MobileNav/CameraButton/CameraButton.module.css ***!
  \*****************************************************************************************************************/
/* Navigation Camera Button */

.QxIKV6eTzw1tBn0VK2ZN {
  align-items: center; 
  background: var(--surface);
  border: var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 44px;
  width: 44px;
}

/* Override defaults: */
.QxIKV6eTzw1tBn0VK2ZN:focus {
  background: var(--surface);
}

.QxIKV6eTzw1tBn0VK2ZN:hover {
  background: var(--gray);
}

.QxIKV6eTzw1tBn0VK2ZN:active {
  background: var(--light-gray);
}

/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/MobileNav/NotificationsButton/NotificationsButton.module.css ***!
  \*******************************************************************************************************************************/
/* Navigation Notifications Button */

.jyDxw9Gc_5ANGYSwwcqw {
  align-items: center; 
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  position: relative;
  height: 44px;
  width: 44px;
}

.jyDxw9Gc_5ANGYSwwcqw div {
  background-color: darkorange;
  border: 2px solid var(--black);
  border-radius: 50%;
  height: 10px;
  /* left: 14px; */
  right: 8px;
  position: absolute;
  top: 8px;
  width: 10px;
}

/*!*******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/MobileNav/ProfileButton/ProfileButton.module.css ***!
  \*******************************************************************************************************************/
/* Navigation Profile Button */

.vYH84xE9dFALX47vYg5q {
  align-items: center; 
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 44px;
  width: 44px;
}

/*!*************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/MobileNav/MobileNav.module.css ***!
  \*************************************************************************************************/
/* Mobile UI Navigation */

.UAUS7uG3u3pzkuV10IMH {
  align-items: center;
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  bottom: 0;
  display: flex;
  height: 64px;
  justify-content: space-evenly;
  left: 0;
  opacity: 1;
  position: fixed;
  right: 0;
  scroll-snap-type: y mandatory;
  /* Smooth, buttery transitions */
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  z-index: 100;
}

.UAUS7uG3u3pzkuV10IMH.v1tq2Cmlw7JsA0T_1Kfr {
  transform: translateY(100%);
  opacity: 0;
}

.UAUS7uG3u3pzkuV10IMH > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 500px;
  padding: 0 16px;
  width: 100%;
}


/*!***************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/LoadingSpinner/styles.module.css ***!
  \***************************************************************************************************/
@keyframes hM4c7jIc3EU9mwjKA04L {
  from {
   transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.JSakJNmRTraPgvlafis2 {
  animation: hM4c7jIc3EU9mwjKA04L .7s linear infinite;
  display: block;
  margin: 0 auto;
  fill: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/index.css ***!
  \*****************************************************************/
/* css global classes */

/*
:root {
  --brand: oklch(65% 0.18 260);
  --neutral-0: oklch(from var(--brand) 99% 0.01 h);
  --neutral-50: oklch(from var(--brand) 96% 0.01 h);
  --neutral-100: oklch(from var(--brand) 92% 0.01 h);
  --neutral-200: oklch(from var(--brand) 85% 0.01 h);
  --neutral-300: oklch(from var(--brand) 75% 0.01 h);
  --neutral-400: oklch(from var(--brand) 60% 0.01 h);
  --neutral-500: oklch(from var(--brand) 45% 0.01 h);
  --neutral-600: oklch(from var(--brand) 32% 0.01 h);
  --neutral-700: oklch(from var(--brand) 24% 0.01 h);
  --neutral-800: oklch(from var(--brand) 18% 0.01 h);
  --neutral-900: oklch(from var(--brand) 12% 0.01 h);
}
*/

:root {

  color-scheme: light dark;

  --lighter-black: #303030;
  --light-black: #202020;/* #2b2b2b; */
  --dark-black: #121212; /* #181818; */
  --white: white; /* #f9fafb; */
  --lighter-gray: #e8e8e8;
  --light-gray: #606060;
  --gray: #484848;
  --purple: #663399; 
  --purple-alt: #8a2be2;

  --complementary: orange;

  /* Typography */

  --text: light-dark(black, white);
  
  --text-muted: oklch(from var(--text) 60% 0.01 h);

  /* Surfaces */

  --surface: light-dark(var(--lighter-gray), var(--dark-black));

  --surface-raised: light-dark(var(--white), var(--light-black));

  --surface-elevated: light-dark(var(--white), var(--lighter-black));

  /* Accent */

  --accent: var(--complementary);

  --accent-text: var(--white);

  --accent-surface: color-mix(
    in oklch,
    var(--accent) 10%,
    var(--surface)
  );

  /* Borders */

  --border: light-dark(#ffffff0d, #ffffff26);

  --border-raised: light-dark(#0000000d, #00000026);

  /* Inputs */

  --input-bg: var(--surface);
  
  --input-text: var(--text);
  
  --input-border: var(--border);
  
  /* Buttons */

  --button-bar-bg: light-dark(var(--dark-black), var(--lighter-black));

  --button-bar-text: var(--white);

  --button-bg: var(--surface-raised);
  
  --button-text: var(--text);
  
  --button-border: var(--border);

  --button-active: var(--surface);

  --button-alt: light-dark(
    oklch(from var(--black) 10% 0.01 h),
    oklch(from var(--white) 90% 0.01 h)
  );

  /* Dropdown */
  
  --dropdown-bg: var(--surface-elevated);

  --dropdown-text: var(--text);

  --dropdown-border: var(--border-raised);

  /* Typography Sizing */

  --font-size: 16px;
  
  --line-height: 1.5;

  /* Alerts */
  
  --success: oklch(65% 0.18 calc(260 - 120));
  
  --warning: oklch(70% 0.18 calc(260 - 200));
  
  --danger: oklch(65% 0.18 calc(260 - 260));
}

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;  
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; 
  width: 100%;
  z-index: 0;
}

body {
  background-color: transparent;
  
  padding: 
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

#root {
  background-color: var(--surface);
}

button {
  touch-action: manipulation;
  transition: background 0.2s ease-in-out;
  user-select: none;
}

button:focus {
  background: initial;
}

button:hover {
  background: var(--gray);
}

button:active {
  background: var(--light-gray);
}

svg {
  fill: var(--text);
  flex-shrink: 0;
  pointer-events: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
progress,
select {
  accent-color: var(--accent)
}

:focus-visible {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}






/*

.tooltip {
  background-color: #575a62;
  border-radius: 5px;
  bottom: -30px;
  font-size: 12px;
  left: 0px;
  opacity: 0;
  padding: 4px 8px;
  position: absolute;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
}



.sidebar-user {
  padding-top: 4px;
}



.badge {
  background-color: darkorange;
  border-radius: 50%;
  font-size: 12px;
  height: 15px;
  left: 25px;
  position: absolute;
  top: 10px;
  width: 15px;
}

.notifications-badge {
  background-color: darkorange;
  border-radius: 50%;
  height: 8px;
  left: 30px;
  position: absolute;
  top: 15px;
  width: 8px;
}

.modal {
  border: 1px solid black;
  border-radius: 5px;
  padding: 15px !important;
  width: 500px;
}

.preview-modal,
.camera-modal {
  background: none;
  border: 0;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
}

.icon-btn {
  background-color: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 22px; 
  height: 45px;
  position: relative;
  width: 45px; 
}

.icon-btn svg {
  fill: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-btn:active {
  background-color: rgba(0, 0, 0, 0.9);
}

.icon-btn:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.icon-btn-alt {
  background-color: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 22px; 
  height: 45px;
  position: relative;
  width: 45px; 
}

*/

/* consider only getting rid of -alt and only using .icon-btn for all icon buttons */

/*
.icon-btn-alt svg { 
  fill: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-btn-alt:hover .tooltip {
  visibility: visible;
  opacity: 1;
}




.auth-form {
  border: 0 !important;
}




.list {
  margin: 0 auto;
  max-width: 500px;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;

  border: 1px dashed red;
}

*/

.list-header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  height: 60px;
  /*left: 50%;*/
  max-width: 500px;
  position: fixed;
  top: 0;
 /* transform: translateX(-50%);*/
  width: 100%;
  z-index: 999;
}


/*
.list-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.list-actions {
  bottom: 0; 
  left: 0; 
  padding: 0; 
  position: absolute; 
  width: 100%;
}



.card {
  margin: 0 auto;
  max-width: 500px;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media (orientation: landscape) {
  .card {
    max-width: none;
  }
}

.flash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 50ms linear;
}

.flash {
  opacity: 1;
}

*/

.card-header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  height: 60px;
  /*left: 50%;*/
  max-width: 500px;
  position: fixed;
  top: 0;
 /* transform: translateX(-50%);*/
  width: 100%;
  z-index: 999;
}

/*

.camera-light-btn {
  background: none;
  border: 0;
  color: white;
  fill: white;
  cursor: pointer;
  font-size: 18px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 50px;
  z-index: 9999;
}

.camera-back-btn {
  background: none;
  border: 0;
  left: 0px;
  color: white;
  fill: white;
  cursor: pointer;
  font-size: 18px;
  height: 100%;
  position: absolute;
  top: 0px;
  width: 50px;
  z-index: 9999;
}

.camera-light-btn:hover .tooltip,
.camera-back-btn:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.card-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.card-actions {
  bottom: 0; 
  left: 0; 
  padding: 0; 
  position: absolute; 
  width: 100%;
}

.camera { 
  object-fit: cover;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  max-width: 100%;
  width: 100%;

  will-change: transform, opacity;
  transform: translateZ(0);
}

.camera-button-container { 
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  margin: 0 auto 25px auto;
  padding: 10px;
  width: 78px;
}

.camera-button {
  background-color: #e5e4e2;
  border: 3px solid white;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  height: 56px;
  padding: 0 26px; 
}

.camera-button:hover {
  background-color: #f2f3f4;
}

.camera-button:active {
  background-color: #cb4154;
}

.camera-navigation {
  background: none; 
  border-radius: 10px; 
  bottom: 10px; 
  display: flex; 
  flex-direction: column; 
  height: 250px; 
  justify-content: space-between; 
  padding: 20px 0; 
  position: absolute; 
  right: 10px; 
  width: 50px; 
  z-index: 9999;
}

.video-mute {
  bottom: 20px;
  left: 10px;
  padding: 5px 10px; 
  position: absolute;
  z-index: 9999;
}

.video-timer {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  color: white; 
  font-size: 24px;
  font-weight: bold;
  left: 50%;
  top: 10px;
  padding: 5px 10px;
  position: absolute;
  transform: translateX(-50%);
}

.post-form {
  background-color: #202124; 
  height: 100%; 
  max-height: 100%;  
  max-width: 500px; 
  width: 100%;
}

.post-form-submit {
  position: absolute; 
  bottom: 0;
}

.user-header {
  align-items: center;
  color: white;
  display: flex;
  padding: 10px 0 0 10px;
}

.user-header svg {
  fill: white;
}

.header-text button {
  background: none;
  border: 0;
  color: white;
  font-size: 15px; 
  font-weight: bold;
  margin-left: 1px;
}

.header-text > div:last-child {
  color: gray;
  font-size: 12px;
  font-weight: normal;
  margin-left: 5px;
}

.media-component {
  height: 100%;
  overflow-x: scroll; 
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  width: 100%;
}

.video-controls {
  display: flex; 
  position: absolute; 
  top: 5px; 
  right: 45px; 
  z-index: 9999;
}

.video-controls button {
  font-size: 16px;
}

.media-item {
  object-fit: cover;
  display: inline-block;
  height: 100%;
  pointer-events: none;
  scroll-snap-align: center;
  width: 100%;
}

.cheveron-right {
  position: absolute; 
  right: 0; 
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.cheveron-left {
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translateY(-50%);
  z-index: 9999;
}

.dropdown-menu {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 5px;
  list-style: none;
  position: absolute;
  right: 10px;
  top: 45px;
  width: 200px;
  z-index: 99999;
}

.dropdown-menu button {
  background: none;
  border: 0;
  color: var(--dark-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 15px 0 15px 15px;
  position: relative;
  text-align: left;
  transition: background-color 0.3s ease;
  width: 100%;
}

.dropdown-menu button:hover {
  background-color: var(--dark-background-color-tertiary);
}


.dropdown-menu span {
  margin-left: 15px;
}

.preview-button-container {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 5px;
}

.save-btn:hover {
  color: green;
}

.delete-btn:hover {
  color: red;
}




.caption-btn {
  font-size: 16px;
  position: absolute;
  right: 0;
  top: 5px;
}

.caption-btn > .tooltip {
  z-index: 9999;
}

.caption-wrapper {
  margin-top: 10px;
  position: relative;
  
  transition: opacity 0.3s, visibility 0.3s;
}

.caption-header {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 0 0 5px 5px;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  width: 100%;
}

.caption-header button {
  background: none;
  border: 0;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  height: 40px;
  width: 40px;
}

.caption-header button svg {
  fill: white;
}

.caption-container {
  margin: 0 auto;
  position: relative;
  width: 95%;
}

.caption-input-empty:before {
  color: gray;
  content: 'Add a caption';
}

.caption-input {
  background: rgba(0, 0, 0, .5);
  border: 0;
  border-radius: 5px 5px 0 0;
  color: white;
  padding: 15px 15px 5px 15px;
  width: 100%;
}

.caption-input:focus {
  outline: none;
}

.caption {
  bottom: 0;
  color: white;
  padding: 10px;
  position: absolute;
  width: 100%;
}

*/

/* not sure what the following does */

/*

.font-size-menu {
  align-items: center;
  background-color: white;
  border-radius: 0 0 5px 5px;
  color: black;
  
  font-size: 13px;
  padding: 20px 15px;
  width: 100%;
}

.font-size-menu label {
  margin-right: 10px;
}

.font-size-menu input {
  height: 5px;
}

.font-size-menu span {
  margin-left: 10px;
}

.text-align-menu {
  align-items: center;
  background-color: white;
  border-radius: 0 0 5px 5px;
  display: flex;
  font-size: 13px;
  padding: 15px;
  width: 100%;
}

.text-align-menu span {
  margin-right: 5px; 
}

.text-align-menu button {
  background: none;
  border: 1px solid #888;
  border-radius: 5px;
  margin: 0 10px;
  padding: 5px 10px;
}

.color-menu {
  background-color: white;
  border-radius: 0 0 5px 5px;
  display: flex;
  font-size: 13px;
  padding: 15px;
  width: 100%;
}

.color-menu div {
  align-items: center;
  display: flex;
  margin-bottom: 10px;
}

.color-menu div input {
  background: none;
  border: 0;
}

.color-menu div input[type=checkbox] {
  height: 15px;
  width: 15px;
}

.color-menu div:last-child {
  margin-bottom: 0;
}

.color-menu div:first-child label {
  margin-right: 20px; 
}

.color-menu div label {
  margin-right: 10px;
}

.emoji-container button {
  background: none;
  border: 0;
  padding: 5px;
}

.caption-emoji-menu {
  background: white;
  border-radius: 0 0 5px 5px;
  height: 150px;
  overflow-y: scroll;
  padding: 15px;
}

.caption-suggestions {
  background-color: white;
  border-radius: 5px;
  bottom: -150px;
  left: 0;
  position: absolute;
  width: 100%;
}

.caption-suggestions > div {
  display: flex;
  padding: 15px;
}

.caption-suggestions > div div:nth-of-type(2) {
  margin-left: 15px;
}




.dropdown-menu {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 5px;
  list-style: none;
  position: absolute;
  right: 10px;
  top: 45px;
  width: 200px;
  z-index: 99999;
}


.dropdown-menu button {
  background: none;
  border: 0;
  color: var(--dark-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 15px 0 15px 15px;
  position: relative;
  text-align: left;
  transition: background-color 0.3s ease;
  width: 100%;
}

.dropdown-menu button:hover {
  background-color: var(--dark-background-color-tertiary);
}


.dropdown-menu span {
  margin-left: 15px;
}

.preview-button-container {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 5px;
}

.save-btn:hover {
  color: green;
}

.delete-btn:hover {
  color: red;
}




*/


/**
 * Media Editor
 */

.media-editor {
  background: rgba(0, 0, 0, .5);
  border: 0;
  border-radius: 5px;
  color: white;
  margin: 10px auto;
  padding: 5px 15px;
  position: relative;
  width: 95%;
}

.media-editor div:first-child {
  display: flex;
  justify-content: space-between;
}

.media-editor button {
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  font-size: 20px;
  height: 40px;
  width: 40px;
}

.media-editor svg {
  fill: white;
}

.swap-segment-menu {
  justif-content: space-evenly;
}

.filters-menu {
  padding-left: 20px;
}

.filters-menu button {
  display: block;
  font-size: 16px;
  text-align: left;
  width: 200px;
}

.filters-menu button svg {
  margin-right: 10px;
}

.filters-menu input {
  margin-right: 20px;
}

.filters-menu div {
  font-size: 16px;
  margin-top: 10px;
}


.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}


@media (prefers-color-scheme: dark) {
  
  body {
    background-color: var(--dark-mode-background);
    color: var(--dark-mode-color);
  }

  .sidebar {
    background-color: var(--dark-mode-background-tertiary) !important;
    color: var(--dark-mode-color) !important;
  }

  .sidebar-overlay {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .search {
    background-color: var(--dark-mode-background-quaternary);
    color: var(--dark-mode-color);
  }

  .sidebar-btn-container {
    border-top: 1px solid var(--dark-mode-border-color) !important;
  }
  
  .sidebar-btn svg {
    fill: var(--dark-mode-color) !important;
  }

  .navigation {
    border-bottom: 1px solid var(--dark-mode-border-color);
    color: var(--dark-mode-color);
  }

  .navigation:hover {
    background-color: var(--dark-mode-background-secondary);
  }

  .navigation svg {
    fill: var(--dark-mode-color);
  }
  
}


@media (prefers-color-scheme: light) {
  body {
    background-color: var(--light-mode-background);
    color: var(--light-mode-color);
  }
}


@media (max-width: 500px) {
  
  .modal {
    border: 0;
    border-radius: 0;
    height: 100%;
    width: 100%;
  }
}