@import url(light.css) (prefers-color-scheme: light);
@import url(dark.css) (prefers-color-scheme: dark);
@import url(resetDefaultCSS.css);
@import url(dynamicFlexBox.css);

@font-face {
  font-family: "Tapeworm";
  src: url("../fonts/woff/Tapeworm-Oblique.woff") format("woff"),
       url("../fonts/woff2/Tapeworm-Oblique.woff2") format("woff2"),
       url("../fonts/ttf/Tapeworm-Oblique.ttf") format("truetype");
}

:root {
  --debugging-color: #ca3b25ab;
  --absolute-back-layer: -1000;
  --background-layer: 10;
  --mask-layer: 20;
  --content-layer: 30;
  --foreground-layer: 40;

  /*-----------------*/
  /* local constants */
  /*-----------------*/
  --form-text-input-height: 2rem;
  --form-text-input-border-radius: .5rem;

  --fast-transition: 150ms;
}

body {
  font-family: sans-serif;
  overflow-x: hidden;
  background-color: var(--md-sys-color-background);
}

a,
input,
.actionButton {
  display: block;
}

input[type="file"]{
  font-size: 0;
}

input[type="submit"]{
  cursor: pointer;
  margin-top: auto;
  border: none;
  font-size: 1rem;
}

::-webkit-scrollbar{
  scrollbar-width: thin;
  width: 4px;
  padding: 0 4px;
  background: var(--md-sys-color-surface);
}

::-webkit-scrollbar:hover{
  width: 12px;
}

::-webkit-scrollbar-thumb{
  border-radius: 128px;
  background: var(--md-sys-color-on-surface);
}

::-webkit-scrollbar-thumb:hover{
  background: var(--md-sys-color-on-surface);
}

::-webkit-file-upload-button {
  display: none;
}

::file-selector-button {
  display: none;
}

/* header{
  color: var(--md-sys-color-on-surface);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1rem;
  background-color: var(--md-sys-color-surface);
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
} */

img {
  -webkit-user-drag: none;
}

#contentWrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

#passwordSpeciments > p {
  font-size: 0.8rem;
  line-height: 1.2rem;
}

#capchaInfo{
  font-size: 2rem;
  background-color: black;
  color: white;
  padding: 32px 0;
  font-weight: bold;
}

#capchaInstructions{
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 2rem;
}

#capchaContainer{
  --capcha-container-border-radius: 1.5rem;
  background-color: #222;
  border-radius: var(--capcha-container-border-radius);
}

#capchaImage{
  height: 384px;
  border: 1px solid black;
  border-radius: var(--capcha-container-border-radius) 0 0 var(--capcha-container-border-radius);
}

#capchaStepIndexContainer{
  margin: auto;
  gap: 32px;
}

#sidebar{
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  z-index: var(--foreground-layer);
  gap: 8px;
}

#sidebarTitle{
  padding: 16px;
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
}

#sidebar #separationLine{
  width: 80%;
  height: 1px;
  background-color: var(--md-sys-color-on-surface);
  margin-right: auto;
}

#newProjectButtonsContainer{
  margin-top: auto;
  padding: 16px;
  gap: 16px;
}

#computerVisionProjectInfoContainer{
  background-color: var(--md-sys-color-surface);
  width: 100%;
}

#chartInfoContainer{
  height: 75%;
}

#chartContainer{
  width: 30%;
  margin: 0 32px;
}

#mainInfo{
  color: var(--md-sys-color-on-surface);
  padding: 16px;
  gap: 16px;
  height: 100%;
}

#mainInfo p:first-child{
  font-size: 2.5rem;
  font-weight: bold;
  font-style: italic;
  margin-bottom: auto;
}

#mainInfo p:nth-child(even){
  font-weight: bold;
  font-size: 1.5rem;
}

#mainInfo p:last-child{
  margin-bottom: auto;
}

#timeline{
  position: relative;
  height: 25%;
  width: 100%;
  background-color: var(--md-sys-color-surface);
}

#timelineChartContainer{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--md-sys-color-on-surface);
}

#timelineChart{
  height: 100%;
  width: 100%;
}

#timeline hr{
  margin: 0;
  border: 1px solid var(--md-sys-color-on-secondary-container);
  width: 128px;
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

#timelineInfoContainer{
  position: absolute;
  right: 8%;
  top: 10%;
}

#timelineInfoContainer>p:nth-child(odd){
  font-weight: bold;
}

#capchaButtons{
  margin-right: auto;
  padding: 0 16px;
  background-color: #222;
  border-radius: 0 var(--capcha-container-border-radius) var(--capcha-container-border-radius) 0;
  border-left: 1px solid #777;
}

#togglePasswordVisibilityButton,
#generatePasswordButton{
  padding: 1rem;
  height: var(--form-text-input-height);
  width: var(--form-text-input-height);
  position: relative;
  color: var(--md-sys-color-on-surface);
  margin-left: 1rem;
  cursor: pointer;
}

#togglePasswordVisibilityButton i,
#generatePasswordButton i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#feedbackForm textarea {
  padding: .5rem;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  max-height: 120px;
  /* overflow: hidden; */
  resize: vertical;
}

/* general styles */

.absoluteCenter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absoluteCenterX{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.absoluteCenterY{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.marginCenter{
  margin: auto;
}

.absoluteTop{
  position: absolute;
  top: 0;
}

.uppercase {
  text-transform: uppercase;
}

.enhancementShadow {
  box-shadow: var(--md-sys-color-shadow) 5px 5px 0 0;
}

.largeIcon {
  font-size: 16px;
}

.hidden{
  display: none;
}

.hideOverflow{
  overflow: hidden;
}

.fullWidth{
  width: 100%;
}

.fullHeight{
  height: 100%;
}

.clickable{
  cursor: pointer;
}

.show{
  opacity: 1;
}

.absolute{
  position: absolute;
}

.mobileOnly{
  display: none;
}

.flip-h{
  transform: scaleX(-1);
}

.flip-v{
  transform: scaleY(-1);
}

/* custom components */

#mobileMenu{
  position: fixed;
  bottom: 0;
  width: 100vw;
  padding: 1rem;
  display: none;
  flex-direction: row;
  gap: 1rem;
  background-color: var(--md-sys-color-surface);
  box-shadow: 0px -2px 4px var(--md-sys-color-shadow);
  font-size: 1.5rem;
  color: var(--md-sys-color-on-surface);
}

#mobileMenu a{
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  /* background-color: var(--debugging-color); */
  display: flex;
}

#mobileMenu a.active::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 75%;
  background-color: var(--md-sys-color-primary);
  opacity: .2;
  border-radius: var(--md-sys-rounded-full);
  z-index: -1;
}

#mobileMenu a.active::after{
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  width: 16px;
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-rounded-full);
}

#mobileMenu a>*{
  margin: auto;
}

.closeButton>span{
  height: 1rem;
}

#profilePictureLink{
  height: 48px;
  width: 48px;
  background-color: var(--md-sys-color-primary-container);
  border-radius: 100%;
  box-shadow: var(--md-sys-shadow-2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.actionsContainer{
  /* background-color: var(--md-sys-color-primary-container); */
  background-color: var(--md-sys-color-background);
  border-right: 2px solid var(--md-sys-color-on-background);
  height: 100%;
  position: absolute;
  top: 0;
  width: min-content;
  padding: 8px;
  gap: 32px;
  z-index: var(--content-layer);
}

.actionsContainer>span.fi-sr-trash{
  color: red;
}

.actionsContainer>span.fi-br-star,
.actionsContainer>span.fi-sr-star{
  color: gold;
}

@media (max-width: 768px) {
  .desktopOnly{
    display: none;
  }

  .mobileOnly{
    display: block;
  }

  #mobileMenu{
    display: flex;
  }
}