body {
  background: #1c1e24;
  /*background: #9b7878;*/
  margin:0px;
  padding:0px;
  font-size: 12px;
  font-family:'Noto Sans','Roboto', sans-serif, Arial, Helvetica, tahoma, verdana; 
}

header {
  height:50px;
  background: #272830; 
  /* old-background: #732626; */
  margin-bottom: 10px;
}

button {
  cursor: pointer;
}


.player {
  margin: auto;
  max-width: 640px;
  max-height: 95vh;
  min-height: 320px;
  background: black;
  position: relative;
}

video {
  width: 100%; /* Or a specific max-width if needed */
  height: auto; /* Ensures aspect ratio is maintained based on width */
  aspect-ratio: 16 / 9; /* Or your desired aspect ratio, e.g., 4 / 3 */
  max-width: 100vw; /* Ensures it doesn't exceed viewport width */
  max-height: 95vh; /* Ensures it doesn't exceed viewport height */
  display: block; /* Removes extra space below the video */
  object-fit: contain; /* Ensures the entire video is visible within its bounds */
  margin: auto;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin:auto;
  max-width:1080px;
  row-gap: 10px;
  column-gap: 10px;
justify-content: center;
  color: black;
  margin-top: 10px;
}

.container div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 10px;
  font-size: 30px;
  max-width: 250px;
  
}
.container p {
  font-size: 14px;
}
.container h2 {
  font-size: 16px;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid darkgrey;
}
footer {
  min-height:50px;
  text-align: center;
  background: #272830;
}


.start-camera-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Adjusts for the button's own size */
}


.nav-bar {
    position: absolute;
    height: 60px;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;


    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right:5px;
}

.nav-bar-bot {
    bottom: 0px;
}
.nav-bar-top {
    top: 0px;
}

.flex-menu-mid {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex1 {
  display: flex;
  flex:1;
  align-items: center;
}

.flex-menu-left {
  justify-content: flex-start;
}
.flex-menu-right {
  justify-content: flex-end;
}

.vid-time {
  background: white;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
}

.vid-size {
  color: white;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
    background: none;
    outline: none;
    background-color: rgba(0,0,0,0.2);
    border-radius: 100vw;
}

.text-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    outline: none;
    background: rgba(0,0,0, 0.5);
    font-size: 14px;
    padding: 10px;
    border: none;
    border-radius: 100vw;
    color: white;
}

.absolute {
    position: absolute;
}

.text-button:hover {
  background-color: #732626; /* Light ripple effect */
}

.text-button:focus {
  outline: none;
}

.text-button:active {
  background-color: #ffffff; /* Stronger active state */
}

.text-button:disabled {
  background-color: #cccccc; /* Stronger active state */
}

.ar-div {
  border:1px dashed #364153;
  height: 30px;
  width: 40px;
  color: #364153;
  background:none;
  outline: none;
  font-size: 1rem;
}

.ar-div-selected {
  background-color: slategray;
  border: 1px solid white;
  color: white;
}

.ar-div-169 {
  width: 55px;
}

.gap-ar {
  gap: 5px;
}
.dialog-box {
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(12px); */
    position: absolute;
    bottom: 40px;
    right: 5px;
    border-radius: 20px;
}
.dialog-box2 {
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(12px); */
    position: absolute;
    top: 40px;
    right: 5px;
    border-radius: 20px;
}
.p-4 {
    padding: 1rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
  .rounded-4xl {
    border-radius: 2rem;
  }
.flex-col {
    flex-direction: column;
}
.w-72 {
    width: 18rem;
}
.flex {
    display: flex;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.z-10 {
    z-index: 10;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
}
.dialog-enter {
    animation: slideUp 0.2s ease-out forwards;
}


.pb-3 {
    padding-bottom: 0.75rem;
}

.border-slate-100 {
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-b {
    border-bottom-width: 1px;
    border-bottom: 1px solid #f8fafc;
}
.justify-between {
    justify-content: space-between;
}
 .justify-center {
    justify-content: center;
  }
.items-center {
    align-items: center;
}

.mb-4 {
    margin-bottom: 1rem;
}

.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    color: rgb(54 65 83);
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.uppercase {
    text-transform: uppercase;
}
.font-bold {
    font-weight: 700;
}
.text-\[10px\] {
    font-size: 10px;
}
.block {
    display: block;
}
.ml-1 {
    margin-left: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    color: oklch(37.3% 0.034 259.733);
}
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.bg-slate-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.border {
    border-width: 1px;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.w-full {
    width: 100%;
}
button, select {
    text-transform: none;
    border:none;
}

.hidden {
  display: none !important;
}

.img-preview {
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#yesNoDialog {
    display: block;
    background: rgb(241, 241, 241, 0.8);
    position: absolute;
    min-width: 150px;
    min-height: 120px;
    border-radius: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 10px;
}

#popup {
    display: block;
    background: rgb(241, 241, 241, 0.8);
    position: absolute;
    min-width: 150px;
    min-height: 40px;
    border-radius: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 0.8rem;
}
.popup-error {

    background: rgba(255, 0, 0, 0.8) !important;
    color: white;

}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.p-2\.5 {
    padding: 0.625rem;
}

.tracking-widest {
    letter-spacing: 0.1em;
}
.text-\[10px\] {
    font-size: 10px;
}
.ml-1 {
    margin-left: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.items-end {
    align-items: flex-end;
}


.flex-col {
    flex-direction: column;
}

.right-4 {
    right: 1rem;
}

.gap-0\.5 {
gap: calc(var(--spacing) * 0.5);
}

.hd-options {
    color: red;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.gap-2 {
    gap: 0.5rem;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rounded-xl {
    border-radius: 0.75rem;
}

.bg-transparent {
  background: rgba(255,255,255,0.0);
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

  .hover\:button-hover {
    &:hover {
      @media (hover: hover) {
        background-color: #732626;
      }
    }
  }

  .bg-gray-100 {

    --color-gray-100: oklch(96.7% 0.003 264.542);
    background-color: var(--color-gray-100);
  }
  .bg-gray-700 {
    --color-gray-700: oklch(37.3% 0.034 259.733);
    background-color: var(--color-gray-700);
  }

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
/* noise code */
.noise {
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#555 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#555 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: noise-ani .2s infinite alternate;
}
@keyframes noise-ani{
  100% {background-position: 50% 0, 60% 50%}
}