/* General HTML Formatting */
:root {
  --bg-color: #3e5c42;
  --bg-image: none;
  --neutral: #4c5a50;
  
  /* Light Acrylic (previewdiv, vpreviewdiv, corners, corners3) */
  /* Old (Light) --boxcolor1: rgba(170, 170, 170, .5); */
  --boxcolor1: rgba(100, 100, 100, .2);
  
  /* Dark Acrylic (corners2, corners4, dropdown-content*/
  /* Old (Light) --boxcolor2: rgba(100, 100, 100, .5); */
  --boxcolor2: rgba(50, 50, 50, .2);
  
  /* Green Acrylic (corners5, button, bigbutton, w2gbutton, ytbutton */
  --accent: rgba(66, 227, 90, .5);
  
  /* Set Blend Mode to 'exclusion' for Acrylic*/
  --blend: none;

  /* Set Blend Mode to '1px solid rgba(255, 255, 255, 0.3);' for Glass*/
  --border: none;
}
html{
    line-height:1.15;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
	overscroll-behavior: none;
	  text-shadow: 0 0 3px #000;
	  max-width: 100%;
    overflow-x: hidden;
}

body{
  vertical-align:middle;
  overscroll-behavior: none;
	color: #fff;
	background: var(--bg-image);
	background-attachment: fixed;
	background-size: cover;
	background-position: center center; 
  background-color: var(--bg-color);
  /*font-size:16px;*/
  font-size:18px;
	font-family: "Segoe UI", Helvetica, sans-serif;
  /* font-family:Lato,Helvetica Neue,Helvetica,sans-serif; */
  font-variant-ligatures:common-ligatures;
  line-height:1.67;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#aether{
    vertical-align:middle;
	color: #fff;
	background: url("./backgrounds/aether.png");
	background-attachment: fixed;
	background-size: cover;
	background-position: center center; 
    background-color: var(--bg-color);
    font-size:16px;
	font-family: "Segoe UI", Helvetica, sans-serif;
    /* font-family:Lato,Helvetica Neue,Helvetica,sans-serif; */
    font-variant-ligatures:common-ligatures;
    line-height:1.67;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.app--dark .layout__panel--editor,.app--dark .layout__panel--preview{
    color:hsla(0,0%,100%,.75)
}
blockquote,dl,ol,p,pre,ul{
    margin:1.2em 0
}

.mobileNavDiv {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 75px;
  background-image: linear-gradient(to top, #000,#3e3e3e);
}

/* OTHUB GENERAL BODY STYLING */
small {
	font-size:10px;
	font-family: "Segoe UI", Helvetica, sans-serif;
}
.othub{
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
    padding-left:10px;
    padding-right:10px;
    max-width:1200px;
}

/* Image Preview Style & Animation */
#imgPreviewDiv, #vPreviewDiv {
  max-height: 100dvh;
}
#imgPreview {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  overflow: hidden;
  position: fixed;
  touch-action: pan-y;
  -o-object-fit: contain;
  object-fit: contain;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition: transform .18s ease, opacity .18s ease;
}
#imgPreview.previewSwipeOutLeft {
  opacity: 0;
  transform: translateX(-12%);
}
#imgPreview.previewSwipeOutRight {
  opacity: 0;
  transform: translateX(12%);
}
#imgPreview.previewSwipeInLeft {
  opacity: 0;
  transform: translateX(-12%);
}
#imgPreview.previewSwipeInRight {
  opacity: 0;
  transform: translateX(12%);
}
#vPreview {
  max-width: 95%;
  max-height: 95%;
  border-radius: 20px;
  margin: auto;
  overflow: hidden;
  position: fixed;
  -o-object-fit: contain;
  object-fit: contain;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
#editFileDiv {
  max-height: 100dvh;
}
#editFileForm {
  max-width: 95%;
  margin: auto;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.hidePreview {
  overflow: hidden;
  position: fixed;
  width: 100vw;
  height: 0;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, .7);
  opacity: 0%;
  transition: opacity .3s ease, height 0s linear .3s;
}
.showPreview {
  height: 100vh;
  opacity: 100%;
  transition: opacity .3s ease;
}
#previewTitleBar, #vPreviewTitleBar {
  position: absolute;
  left: 0px;
  top: 0px;
  max-width: 95%;
  z-index: 20;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor1);
  border-radius: 0 0 25px 0;
}
#editFileTitleBar {
  position: absolute;
  left: 0px;
  top: 0px;
  max-width: 95%;
  z-index: 20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor1);
  border-radius: 0 0 25px 0;
}
#previewButtonBar, #previewNavigation, #vPreviewButtonBar {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 20;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor1);
  border-radius: 25px 0 0 0;
  height: 55px;
}
#previewNavigation {
  left: 0px;
  right: auto;
  border-radius: 0 25px 0 0;
}
#titleImgPreview, #titleVPreview {
  height:50px;
  font-size:20pt;
  line-height:48px;
  margin-left:10px;
  margin-right:10px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#titleEditFile {
  height: 50px;
  font-size: 20pt;
  line-height: 48px;
  margin-left: 10px;
  margin-right: 10px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#closeImgPreview, #closeVPreview {
  float:left;
  height:50px;
  cursor:pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#closeEditFile {
  float: left;
  height: 50px;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#closeImgPreview:hover, #closeVPreview:hover {
  transition: transform .2s;
  transform: scale(1.1);
  filter: drop-shadow(2px 2px 3px black);
}
#closeEditFile:hover {
  transition: transform .2s;
  transform: scale(1.1);
  filter: drop-shadow(2px 2px 3px black);
}
#copyImgPreviewButton, #copyVPreviewButton {
  height:30px;
  cursor:pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#downloadImgPreviewButton, #downloadVPreviewButton {
  height:30px;
  cursor:pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#editImgPreviewButton img, #editVPreviewButton img {
  height:30px;
  cursor:pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
#previousImgPreview, #nextImgPreview, .previewButton {
  border: 0;
  padding: 0 10px;
  background: transparent;
  color: inherit;
  font-size: 40px;
  line-height: 50px;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
  height: 55px;
  width: 55px;
}
.previewButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.previewButton:hover {
  background:transparent;
  border:0;
  transform: scale(1.1);
}
#previousImgPreview:hover, #nextImgPreview:hover {
  transform: scale(1.1);
  filter: drop-shadow(2px 2px 3px black);
}

/* Titles */
h1,h2,h3,h4,h5,h6{
    text-align: center;
	  margin:0.8em 0;
    line-height:1.33
}

/* Centered, White Acrylic */
#corners {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor1);
  border-radius: 25px;
  text-align: center;
  padding: 20px;
  line-height: 2;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
/* Left-Aligned, Dark Acrylic*/
#corners2 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor2);
  border-radius: 25px;
  padding: 20px;
  line-height: 2;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
/* Centered, White Acrylic (for parity with old stylesheet) */
.corners3 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor1);
  border-radius: 25px;
  text-align: center;
  padding: 20px;
  line-height: 2;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
/* Centered, Dark Acrylic, General */
#corners4 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--boxcolor2);
  border-radius: 25px;
  padding: 20px;
  line-height: 2;
  text-align: center;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
/* Centered, Green Acrylic, News */
#corners5 {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	background-blend-mode: var(--blend);
	background: var(--accent);
	border-radius: 15px;
	color: white;
	padding: 10px;
	text-align: center;
    animation-name: grow-in;
	animation-duration: 0.3s;
	animation-timing-function: linear;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
/* News Animation */
@keyframes grow-in {
    0% { opacity: 0; transform: scale(.75); }
    100% { opacity: 1; transform: scale(1); }	
}
/* Centered, Dark Gray Box, Help */
#help {
	transform-origin: bottom right;
	position: fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	border-radius: 15px;
	background: #23272a;
	padding: 10px;
	padding-left: 0px;
	padding-right: 20px;
  text-align: center;
	filter: drop-shadow(5px 5px 5px black);
	animation-name: shrink-in;
	animation-delay: 2s;
	animation-duration: 0.1s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
/* Centered, Red Box, Warnings */
.warning {
  backdrop-filter: blur(5px);
  background: rgba(255, 0, 0, .5);
  border-radius: 25px;
  text-align: center;
  padding: 5px;
  line-height: 2;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}

/* GRID BOX, Dark Gray, Photos*/
@media (min-width:300px) {
	.grid-container {
        display: grid;
		line-height: 0;
        grid-template-columns: minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%);
    }
}
@media (min-width:500px) {
	.grid-container {
        display: grid;
		line-height: 0;
        grid-template-columns: minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%);
    }
}
@media (min-width:700px) {
	.grid-container {
        display: grid;
		line-height: 0;
        grid-template-columns: minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%);
    }
}
@media (min-width:900px) {
	.grid-container {
        display: grid;
		line-height: 0;
        grid-template-columns: minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%);
    }
}
@media (min-width:1200px) {
	.grid-container {
        display: grid;
		line-height: 0;
        grid-template-columns: minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%) minmax(auto, 50%);
    }
}
/* Gallery Image Format */
.galleryimg {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.gallerybuttons {
    height: 0;
    opacity: 0%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(47, 49, 54, .75);
    border-radius: 10px 0 0 0;
    padding: 5px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}
.gallerytitle {
    height: 0;
    opacity: 0%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(47, 49, 54, .75);
    border-radius: 0 0 10px 0;
    padding: 5px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    display: flex;
    align-items: center; /* Vertically center the text */
}
.gallerydiv:hover {
  filter: drop-shadow(2px 2px 3px black);
}

@media (min-width:800px) {
  .gallerydiv:hover {
    filter: drop-shadow(2px 2px 3px black);
  }
  .gallerydiv:hover > .gallerybuttons {
    height: 30px; /* Set a fixed height */
    opacity: 100%;
    transition: opacity .2s, filter .2s;
  }
  .gallerydiv:hover > .gallerytitle {
    height: 30px; /* Set a fixed height */
    opacity: 100%;
    transition: opacity .2s, filter .2s;
  }
}

@keyframes shrink-in {
    0% { transform: scale(1); }
    100% { transform: scale(.33); }	
}
@keyframes grow-out {
    0% { transform: scale(.33); }
    100% { transform: scale(1); }	
}
#help:hover {
	transform-origin: bottom right;
	position: fixed;
	bottom:10px;
	right:10px;
	max-height: 50%;
	overflow:auto;
	border-radius: 15px;
	background: #23272a;	
	padding: 10px;
	padding-left: 0px;
	padding-right: 20px;
    text-align: center;
	filter: drop-shadow(5px 5px 5px black);
	animation-name: grow-out;
	animation-delay: 0.01s;
	animation-duration: 0.1s;
	animation-timing-function: linear;
}

/* Small Green Button */
button, #button {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.1s;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
button:hover, #button:hover {
  transition: transform .2s;
  transform: scale(1.05);
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}

/* Medium Green Button */
.medbutton {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.1s;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
.medbutton:hover {
  transition: transform .2s;
  transform: scale(1.05);
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}

/* Icon Button - Doesn't Fade to White */
.iconbutton {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.1s;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
}
.iconbutton:hover {
  transition: transform .2s;
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}

/* No Padding, Image Button */
.gamebutton {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: white;
  padding: 0px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.1s;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  max-width:90%;
}
.gamebutton:hover {
  transition: transform .2s;
  transform: scale(1.05);
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
}

/* Large Green Button */
#bigbutton, #w2gbutton, #ytbutton {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
  border: var(--border);
  border-radius: 5px;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 28px;
  transition-duration: 0.1s;
  cursor: pointer;
  margin: 10px;
}
#bigbutton:hover {
  transition: transform .2s;
  transform: scale(1.1);
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}
/* Large Green to Yellow Button */
#w2gbutton:hover {
  transition: transform .2s;
  transform: scale(1.1);
  background-color: #facd3b;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}
/* Large Green to Red Button */
#ytbutton:hover {
  transition: transform .2s;
  transform: scale(1.1);
  background-color: #ff0000;
  color: white;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}

.videoThumbnail {
  width: 160px;
  height: 90px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 3px;
  background: #202225;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

/* Progress Bar */
progress {
  border-radius: 7px; 
  width: 80%;
  height: 10px;
}
progress::-webkit-progress-bar {
  background-color: white;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: #3da560;
  border-radius: 7px;
}

/* Row in File Listing */
#filerow {
  border: none;
  border-radius: 5px;
  color: white;
  transition-duration: 0.1s;
  padding: 5px 10px;
}
#filerow ~ #filerow {
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.videoRow {
  min-height: 90px;
}
#filerow:hover {
  transition: transform .2s;
  transform: scale(1.01);
  z-index: 50;
  background-color: rgba(35, 39, 42, .3);
  color: white;
  filter: drop-shadow(2px 2px 3px black);
  border: var(--border);
}
.fileButton {
  cursor:pointer;
  position:relative;
  top:5px;
  height:30px;
  float:right;
  padding-left:10px;
}
.fileName {
  display:inline-block;
  margin-bottom:-12px;
  max-width:60%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:900px) {
	.fileName {
    width:40%;
  }
}
.fileUploader {
  color:#afafaf;
  margin-top:5px;
  font-size:15px;
  font-style: italic;
  position:relative;
  float:right;
  max-width:60%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:900px) {
	.fileUploader {
    display:none;
  }
}
.fileIcon {
  float:left;
  position:relative;
  top:5px;
  height:30px;
  width:30px;
  padding-right:10px;
}
.videoInfo {
  display: inline-block;
  vertical-align: middle;
  max-width: 60%;
}
.videoInfo .fileName {
  display: block;
  max-width: 100%;
  margin-bottom: 0;
}
.videoInfo .fileUploader {
  display: block;
  float: none;
  max-width: 100%;
  margin-top: 0;
}
.videoRow .fileButton {
  top: 30px;
}
@media (max-width: 900px) {
  .gallerybuttons {
    display: none;
  }
  .videoRow {
    display: flex;
    align-items: center;
  }
  .videoThumbnail {
    flex: 0 0 160px;
  }
  .videoInfo {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .videoInfo .fileName {
    width: 100%;
  }
  .videoRow .fileButton,
  .videoRow > span[data-link] {
    display: none;
  }
}

/* Logo & Splash Text */
.container {
    /*margin: auto;*/
	position: relative;	
  text-align: center;
  max-width: 800px;
  margin: auto;
}
#splash {
  position: relative;
  top: -20px;
  left: 90px;
	width: 500px;
  max-width: 95%;
	text-align: center;
  margin: auto 0 auto auto;
	color: yellow;
	text-shadow: 1px 1px black;
	animation-name: grow;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
/* Splash Animation */
@keyframes grow {
    0% { transform: scale(1) rotate(350deg); }
    50% { transform: scale(1.05) rotate(350deg); }
    100% { transform: scale(1) rotate(350deg); }	
}
@keyframes grow-small {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }	
}
@media (max-width: 800px) {
  #splash {
    top: -10px;
  }
}
@media (max-width: 600px) {
  #splash {
    position: relative;
    top: 0px;
    left: 0px;
    margin: auto;
    animation-name: grow-small;
  }
}

#splashimage {
  margin: 20px auto;
  display: block;
  max-height: 300px;
  max-width: 80%;
}

/* Dropdown Menu & Navbar Stuff */
#navbar, #navbar-mobile {
  display: block;
  position: sticky;
  top: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background-image: linear-gradient(to right,#20e357,#20e357,var(--boxcolor1),var(--boxcolor1),var(--boxcolor1),var(--boxcolor1));
  text-align: center;
  padding: 10px;
  line-height: 2;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
  z-index: 10;
  margin: -10px;
  font-size: 20px;
}
#navbar-mobile {
  display: none;
  background: var(--neutral);
}
.account-area {
  position: absolute;
  top: 0;
  right: 20px;
  height: 60px;
  display: flex;
  align-items: center;
}
.account-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
}
.account-dropdown {
  position: relative;
  display: inline-block;
}
.account-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: white;
  padding: 4px 7px;
  font: inherit;
  cursor: pointer;
}
.account-toggle:hover {
  background: var(--accent);
}
.account-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 133px;
  padding: 6px;
  border-radius: 0 0 8px 8px;
  background: var(--boxcolor2);
  backdrop-filter: blur(5px);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 20;
}
.account-dropdown-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.account-menu-form {
  display: inline-block;
  width: fit-content;
  margin: 0;
}
.account-menu-form input,
.account-menu-form button {
  width: auto;
  margin: 0;
}
.account-dropdown-menu > a,
.account-dropdown-menu > form {
  width: auto;
  flex: 0 0 auto;
}
.account-menu-link, .account-menu-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: white;
  padding: 5px 9px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu-link:hover, .account-menu-button:hover {
  background: var(--accent);
}
.mobile-logo {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.mobile-logo img {
  height: 40px;
  border-radius: 3px;
}
.mobile-menu-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  line-height: 0;
}
.mobile-menu-toggle .dropbtn {
  width: 40px;
  height: 40px;
}
.mobile-account-area {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.mobile-account-area .account-toggle {
  padding: 2px;
}
.mobile-account-area .account-toggle img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}
.mobile-account-name {
  display: none;
}
@media (max-width: 360px) {
  .account-dropdown-menu {
    max-width: calc(100vw - 20px);
    flex-wrap: wrap;
  }
}
.recents-limit {
  margin: 15px auto 0;
  text-align: center;
}
.recents-limit select {
  margin-left: 5px;
}
.settings-avatar-preview {
  width: 112px;
  height: 112px;
  margin: 0 auto 15px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--boxcolor2);
}
.user-profile-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  text-align: center;
}
.user-profile-heading img {
  width: 96px;
  height: 96px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  object-fit: cover;
}
.user-profile-heading h1 {
  margin-bottom: 0;
}
.user-profile-heading small {
  opacity: .8;
}
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  gap: 30px;
  align-items: start;
  text-align: left;
}
.settings-options,
.settings-avatar-column {
  min-width: 0;
  text-align: center;
}
.settings-options {
  order: 2;
}
.settings-avatar-column {
  order: 1;
}
.settings-options input,
.settings-options select,
.settings-avatar-column input {
  max-width: 100%;
}
.settings-avatar-column {
  text-align: center;
}
@media (max-width: 700px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-avatar-column .settings-avatar-preview {
    margin-left: auto;
    margin-right: auto;
  }
}
.settings-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-avatar-preview.is-empty {
  color: white;
  font-size: 14px;
}
.settings-saved {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  animation: settings-saved-fade 3s ease forwards;
}
@keyframes settings-saved-fade {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }
  10% { opacity: 1; transform: translate(-50%, -50%); }
  66% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }
}
@media (max-width:900px) {
	#navbar {
    display: none;
  }
  #navbar-mobile {
    display: block;
  }
}
.vl {
  display: inline;
  border-left: 3px solid white;
  margin-left: 5px;
  padding-right: 10px;
  height: 40px;
}

.dropdown {
  display: inline;
  text-align: center;
}
.dropdown-content {
  transform-origin:  top;
  position: relative;
  float: inherit;
  background: var(--boxcolor2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px) opacity(0%);
  background-blend-mode: var(--blend);
  text-align: center;
  line-height: 2;
  filter: drop-shadow(inset 2px 2px 3px rgba(0, 0, 0, .5));
  opacity: 0%;
  max-height: 0;
  transition: max-height .1s ease, margin-top .3s ease, padding .3s ease, opacity .3s ease;
  margin-left: -20px;
  margin-right: -20px;
  overflow: hidden;
  padding: 0 10px;
}
.show {
	margin-top: 10px;
	padding: 10px;
	max-height: 500px;
  opacity: 100%;
}
.navshow {
	margin-top: 10px;
	padding: 10px;
	max-height: 500px;
  opacity: 100%;
}
#dropcheck {
  display: none;
}
#uploaddropcheck {
  display: none;
}
#searchdropcheck {
  display: none;
}
#mdropcheck {
  display: none;
}
.dropbtn {
  transition: transform 0.3s ease;
  transform: rotate(0);
}
#dropcheck:checked + .dropbtn {
  transform: rotate(180deg);
}
/*#uploaddropcheck:checked + .dropbtn {
  transform: rotate(180deg);
}
#searchdropcheck:checked + .dropbtn {
  transform: rotate(180deg);
}*/
#mdropcheck:checked + .dropbtn {
  transform: rotate(180deg);
}
@keyframes dropdown-in {
    0% { opacity: 0; transform: translate(-50%, 0) scaleX(1) scaleY(0); }
	50% { opacity: .75; transform: translate(-50%, 0) scaleX(1) scaleY(.5); }
    100% { opacity: 1; transform: translate(-50%, 0) scaleX(1) scaleY(1); }	
}

input {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px) opacity(0%);
  background-blend-mode: var(--blend);
  background: rgba(255, 255, 255, .8);
  border-radius: 5px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5), none, none, none);
  margin: 5px;
  font-size: 18px;
}
/* file upload button */
input[type="file"]::file-selector-button {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.1s;
  cursor: pointer;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
.settings-avatar-column input[type="file"] {
  background: var(--neutral);
  color: white;
  padding: 3px;
}
/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  transition: transform .2s;
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
}
/* file upload button active state */
input[type="file"]::file-selector-button:active {
  transition: transform .2s;
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
}
select {
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: rgba(255, 255, 255, .8);
  border-radius: 5px;
  text-align: center;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
  font-size: 16px;
}
select:hover {
  transition: transform .2s;
  transform: scale(1.05);
  background-color: #FFFFFF;
  filter: drop-shadow(2px 2px 3px black);
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  opacity: 0;
  max-height: 0;
  width: 0;
  bottom: 110%;
  left: 50%;
  margin-left: -100px;
  background-color: rgba(0, 0, 0, .75);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  transition: opacity .3s ease, max-height 0s linear .3s, width 0s linear .3s;
  overflow: hidden;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  opacity: 100%;
  max-height: 500px;
  width: 200px;
  transition: opacity .3s ease;
}

.tooltip-show {
  opacity: 100%;
  max-height: 500px;
  width: 200px;
  transition: opacity .3s ease;
}

#loader {
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .8);
	z-index: 999;
	pointer-events: none;
	position: fixed;
    width: 100%;
    height: 100%;
    left:0;
	top:0;
	margin:0;
	padding:10px;
	transition: opacity .5s ease .5s;
}

/* --------------- */
/* NEW DESIGN TEST */
/* --------------- */

#appbutton {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-blend-mode: var(--blend);
  background: var(--accent);
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
  border: none;
  border-radius: 50px;
  color: white;
  padding: 5px 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition-duration: 0.1s;
  cursor: pointer;
  height: 200px;
  width: 200px;
}
#appbutton:hover {
  transition: transform .2s;
  transform: scale(1.1);
  background-color: #FFFFFF;
  color: black;
  filter: drop-shadow(2px 2px 3px black);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay-content {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-blend-mode: var(--blend);
    background: var(--boxcolor1);
    border-radius: 25px;
    text-align: center;
    padding: 20px;
    line-height: 2;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}

.overlay.showOverlay {
    opacity: 1;
    visibility: visible;
}

.overlay.hideOverlay {
    opacity: 0;
    visibility: hidden;
}

.closeOverlay {
    margin-top: 10px;
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* END OF CUSTOMS */
/* END OF CUSTOMS */
/* END OF CUSTOMS */

ol ol,ol ul,ul ol,ul ul{
    margin:0
}
h1, h2, h3{
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}
dt{
    font-weight:700
}
a{
	cursor: pointer;
    color:#fff;
    text-decoration:underline;
    text-decoration-skip:ink
}
a:focus,a:hover{
    text-decoration:none
}
code,pre,samp{
    font-family:Roboto Mono,Lucida Sans Typewriter,Lucida Console,monaco,Courrier,monospace;
    font-size:.85em
}
code *,pre *,samp *{
    font-size:inherit
}
blockquote{
    color:rgba(0,0,0,.5);
    padding-left:1.5em;
    border-left:5px solid rgba(0,0,0,.1)
}
.app--dark .layout__panel--editor blockquote,.app--dark .layout__panel--preview blockquote{
    color:hsla(0,0%,100%,.4);
    border-left-color:hsla(0,0%,100%,.1)
}
code{
    background-color:rgba(0,0,0,.05);
    border-radius:3px;
    padding:2px 4px
}
hr{
    border:0;
    border-top:1px solid #fff;
    margin:2em 0
}
pre>code{
    background-color:rgba(0,0,0,.05);
    display:block;
    padding:.5em;
    -webkit-text-size-adjust:none;
    overflow-x:auto;
    white-space:pre
}
.toc ul{
    list-style-type:none;
    padding-left:20px
}
table{
    background-color:transparent;
    border-collapse:collapse;
    border-spacing:0
}
td,th{
    border-right:1px solid #dcdcdc;
    padding:8px 12px
}
td:last-child,th:last-child{
    border-right:0
}
td{
    border-top:1px solid #dcdcdc
}
mark{
    background-color:#f8f840
}