@font-face {
font-family:'Gotham Medium';
src:url('Gotham Medium.otf')
}

* {
caret-color:transparent;
font-family:"Gotham Medium"!important;
}

html {
height:100%
}

body {
background:#1e2631;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e6e6e6",endColorstr="#ff011d",GradientType=1);
height:100%;
margin:0;
}

.page-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.mantine-Navbar-root {
background: #0d141b8c;
}

#navbar-render-button {
color:#6cb7c4
}

.mantine-Input-input {
  background-color: #383838 !important;
  border: 1px solid #383838;
}
.mantine-rnw0l:focus-within, .mantine-1a0rbpr:focus-within {
  border: none !important;
}

#navbar .mantine-Accordion-chevron {
color:#000;
display:none
}

a {
color:#000;
text-decoration:none
}

.maindiv {
background-position:center;
background-repeat:no-repeat;
background-size:cover
}

.legend .traces .legendtext {
cursor:default
}

.sidebar {
bottom:0;
left:0;
padding:2rem 1rem;
position:fixed;
top:0;
transition:width .1s ease-in-out;
width:16rem;
z-index:1050
}

#navbar .mantine-Accordion-label {
color: #e6e6e6;
font-size:medium;
text-decoration:underline .15em #0000;
transition:text-decoration-color 10ms;
white-space:nowrap
}

#navbar .mantine-Accordion-control:hover .mantine-Accordion-label {
text-decoration-color:#000
}

#navbar .mantine-Accordion-control:hover {
background-color:transparent
}

.sidebar .nav-link {
color:#fff;
overflow:hidden;
white-space:nowrap;
width:100%
}

.nav-item {
    white-space:nowrap;
}

#navbar .mantine-Accordion-item {
border-bottom:none
}

.nav-item > a {
color:#e6e6e6;
font-size:small
}

.sidebar .nav-link i {
width:1rem
}

.sidebar .nav-link span {
opacity:1;
transition:opacity .1s ease-in-out;
visibility:visible
}

.sidebar-header {
align-items:center;
color:#fff;
display:flex;
justify-content:left;
overflow:hidden;
white-space:nowrap
}

.sidebar-header h4 {
margin-bottom:0;
margin-left:1rem;
opacity:0;
transition:opacity .1s ease-in-out
}

.mantine-Paper-root:hover {
transform:scale(1.03)
}

.mantine-Paper-root {
transition:all .2s ease-in-out
}

._dash-loading {
color:transparent;
height:0;
margin:auto;
text-align:center;
width:0
}

#overallContainer {
background:#1e2631;
display:flex;
flex-direction:row;
gap:0;
height:100vh;
left:0;
margin:0;
overflow-x:hidden;
padding:0;
position:absolute;
top:0;
width:100vw
}

#navPin {
display:none;
justify-content:end;
padding-right:3px;
padding-top:3px;
width:100%
}

#themeSwitchHolder label {
cursor:pointer
}

.slicetext text,.mantine-InputWrapper-label {
    padding-left: 2px;
}

@media only screen and (max-width: 600px) {
#overallContainer {
flex-direction:column
}

#mobileNav {
border-bottom:1pt solid #000;
position:sticky;
top:0;
display: none;
}

#mobileMenu > div {
padding-left:5px;
padding-right:10px;
padding-top:5px
}

#mobileMenu {
position:absolute
}
}

@media only screen and (min-width: 601px) and (max-width: 768px) {
#navbar {
width:10rem
}

#themeSwitchHolder > div {
justify-content:end;
padding-right:5px;
padding-top:5px
}
}

@media (any-pointer: coarse) and (min-width: 769px) {
#navbar {
width:12rem
}

#themeSwitchHolder > div {
justify-content:end;
padding-right:5px;
padding-top:5px
}
}

@media only screen and (min-width: 769px) and (any-pointer: fine) {
#navbar {
width:12rem
}

#themeSwitchHolder > div {
justify-content:end;
padding-right:5px;
padding-top:5px
}

#navPin {
display:flex
}

#navPin > div {
background-color:silver;
border:1px solid #000;
border-radius:3px;
color:#000;
cursor:pointer;
display:none;
margin-right:2px;
padding:1px;
position:absolute;
z-index:50
}

#navbar.collapsible #navPin > div {
background-color:#4682B4;
color:silver
}

#navbar.collapsible {
border-right: none !important;
overflow:hidden;
position:relative;
transition:all .5s ease-out;
width:12rem
}

#navbar.collapsible .mantine-Accordion-content {
overflow:hidden
}

#navbar.collapsible:hover .mantine-Accordion-content {
display:block
}
}

.radio-group .form-check {
padding-left:0
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
border-bottom-right-radius:0;
border-top-right-radius:0
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
border-bottom-left-radius:0;
border-top-left-radius:0;
margin-left:-1px
}

#davinci-front-image {
-webkit-animation:.0s ease 0s normal forwards 1s fadein;
animation:.0s ease 0s normal forwards 1s fadein
}

@keyframes fadein {
100% {
opacity:1
}

0%,30% {
opacity:0
}
}

@-webkit-keyframes fadein {
100% {
opacity:1
}

0%,30% {
opacity:0
}
}

#labs-front-image {
-webkit-animation:.25s ease 0s normal forwards 1 fadein;
animation:.25s ease 0s normal forwards 1 fadein;
margin-top: -1vw;
}

@keyframes fadein {
100% {
opacity:1
}

0%,80% {
opacity:0
}
}

@-webkit-keyframes fadein {
100% {
opacity:1
}

0%,66% {
opacity:0
}
}

#loading-form {
-webkit-animation:.5s ease 0s normal forwards 1 fadein;
animation:.5s ease 0s normal forwards 1 fadein
}

@keyframes fadein {
100% {
opacity:1
}

0%,80% {
opacity:0
}
}

@-webkit-keyframes fadein {
100% {
opacity:1
}

0%,66% {
opacity:0
}
}

#navbar-render-button {
-webkit-animation:0.5s ease 0s normal forwards 0.2s fadein;
animation:0.5s ease 0s normal forwards 0.2s fadein;
left:5px;
position:absolute;
top:5px;
z-index:31
}

@keyframes fadein {
100% {
opacity:1
}

0%,80% {
opacity:0
}
}

@-webkit-keyframes fadein {
100% {
opacity:1
}

0%,66% {
opacity:0
}
}

.my-2 {
display:none
}

.display-3 {
color:#000
}

.apptitle {
  color: #999999;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-size: 16px;
  -webkit-text-stroke: 0.45px #1e2631;
  text-align: center;
  max-width: 95%;
}

.main_card_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: 0.8vh;
}

@media (max-width: 1200px) {
  .main_card_grid {
    grid-template-columns: repeat(3, 1fr);
    height: 80vh;
  }
}

@media (max-width: 768px) {
  .main_card_grid {
    grid-template-columns: repeat(1, 1fr);
    height: 80vh;
  }
}

#main_card_grid_outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

.cardwrapperinner {
    height: 38vh;
    width: 38vh;
    background-color: #ffffff00;
    justify-content: center;
    display: flex;
    flex-direction: column;
    /* border-radius: 7px; */
    justify-self: center;
    overflow: hidden;
    transition: transform 0.3s ease;
/* background: #1e2631;
box-shadow: inset 7px 7px 20px #0c0f14,
            inset -7px -7px 20px #303d4e; */
border-radius: 35px;
background: #1e2631;
box-shadow:  5px 5px 10px #192029,
             -5px -5px 10px #232c39;
}

.cardwrapperouter:hover .cardwrapperinner{
  transform: translateY(-8vh);
  z-index:10;
}

.cardcontent {
  align-self: flex-end;
  text-align: center;
  color: #e2e2e2
}

.behindCardContent {
  max-height: 0;
    overflow: hidden;
    padding: 0 1rem;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, transform 0.4s ease;
    opacity: 0;
    position: absolute;
    padding: 0 50px;
    width: 100%;
    transform: translateY(0px);
}

.cardlink {
  justify-items: center;
  height: 100%;
 display: flex;
  justify-content: center;
  align-items: center; align-content: center;
}

.cardwrapperouter:hover .behindCardContent {
  max-height: 100px;
  padding: 0 5px;
  opacity: 1;
  transform: translateY(-7vh);
}

.cardwrapperouter {
  position: relative;
  width: fit-content;
  margin: 0.5vw;
  transition: transform 0.5s ease;
}

.hidden_card_link {
    padding: 2px;
    font-size: 25px;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 5px;
}

.hidden_card {
    width: 100%;
    max-width:7vw;
    height: auto;
    overflow: hidden;
    display: block;
    align-items: center;
    justify-content: center;
    background: #1e2631;
    border: 1px solid #ffffff12;
    border-radius: 14px;
}

.hidden_grid {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.cardwrapperinner_single {
    height: 38vh;
    width: 38vh;
    background-color: #ffffff00;
    justify-content: center;
    display: flex;
    flex-direction: column;
    /* border-radius: 7px; */
    justify-self: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    border-radius: 35px;
    background: #1e2631;
    box-shadow: 5px 5px 10px #192029, -5px -5px 10px #232c39;
}

.cardwrapperouter_single {
  position: relative;
  width: fit-content;
  margin: 0.5vw;
  transition: transform 0.5s ease;
}

#register_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh;
  gap: 1vh;
}

#forgot_pw_container {
  display: flex;
  width: 100%;
  padding: 5vh 5vw;
}

.mantine-Stepper-root {
  flex-grow: 1
}

.mantine-13436rw[data-progress] {
  border-color: #5999a3;
}

.mantine-owhdof:focus, .mantine-owhdof:focus-within, .mantine-wlpjn9:focus, .mantine-wlpjn9:focus-within, .mantine-1e4alpk:focus, .mantine-1e4alpk:focus-within {
  border-color: #5999a3;
}

.card-settings-icon {
  position: absolute;
  top: 11px;
  right: 18px;
  z-index: 2;
  cursor: pointer;
}