:root {
    --font-family: "Stem", "Tahoma", "Arial", sans-serif;
    --title: 700 24px / 40px var(--font-family);
    --title-medium: 700 24px / 32px var(--font-family);
    --title-small: 700 18px / 24px var(--font-family);
    --text-giant: 700 32px / 42px var(--font-family);
    --text-semibold-large: 500 15px / 20px var(--font-family);
    --text-semibold-medium: 500 14px / 24px var(--font-family);
    --text-semibold-small: 500 13px / 16px var(--font-family);
    --text-regular-large: 400 15px / 20px var(--font-family);
    --text-regular-medium: 400 14px / 24px var(--font-family);
    --text-regular-small: 400 13px / 16px var(--font-family);
    --text-caption: 500 12px / 14px var(--font-family);
}

@font-face {
    font-family: 'betterVcs'; 
    src: url('assets/font/betterVcs.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
}

.modal-content {
    transform: scale(.9);
    opacity: 0;
    animation: modalOpen 0.3s forwards ease-out;
}

@keyframes modalOpen {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Stem", "Tahoma", "Arial", sans-serif;
    background-color: var(--background-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

header {
    width: 100%;
    height: 100px;
    background-color: var(--main-header-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.windows {
    width: 100%;
    max-width: 1300px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
}

.locker {
    width: 100%;
    height: 100px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    color: aliceblue;
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
}

.namelogo {
    cursor: pointer;
    display: flex;
    font-size: 20px;
    font-family: 'betterVcs', betterVcs Fallback;
}

.simvolesa {
    margin-top: 5px;
}

.selectolecolor, .simvolesa {
    color: var(--main-color);
    display: inline-block;
    transition: transform 0.3s ease;
}

.namelogo:hover .selectolecolor {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: translateX(2px);
}

.namelogo:hover .selectolecolor {
  transform: translateX(3px);
}

.simvolesa {
    font-size: 16px;
    font-weight: 550;
    padding-left: 2px;
    padding-right: 2px;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

.search-container {
    margin-left: 100px;
    position: relative;
    width: 300px;
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
    padding-left: 5px;
}

.search-container:focus-within {
    width: 650px;
}

.search-container:focus-within .search-hint {
    display: none;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

input[type="text"],input[type="password"], input[type="date"] {
    width: 100%;
    padding: 5px 20px 5px 40px;
    font-size: 16px;
    border: 1px solid var(--btn-outlined-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 40px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus {
    border-color: var(--main-color);
}

.search-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: var(--text-tertiary-color);
    transition: color 0.3s;
    background-color: var(--main-header-bg);
    border-radius: 8px;
    padding: 4px 8px;
}

input[type="text"]:focus + .search-hint {
    color: #007BFF;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    color: var(--text-tertiary-color);
}

#clearIcon {
  pointer-events: auto;
  cursor: pointer;
  font-size: 16px;
}

#searchInput {
    color: var(--text-color);
}

#searchInput::placeholder {
    color: var(--text-tertiary-color);
    opacity: 1;
    font-size: 16px;
}

.headering {
    width: 70%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
    color: aliceblue;
    font-size: 22px;
}

.profile-e {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    color: var(--text-color);
    padding: 15px 15px;
    border-radius: 8px;
}

.fa-user-circle {
    font-size: 20px;
}

.gal {
    transform: rotate(0deg);
    font-size: 12px;
}

.dropdown-menu {
    display: none;
    position: absolute; 
    top: 100%; 
    left: 0;
    background-color: var(--background-color);
    border: .5px solid var(--line-color);
    margin-top: 15px;
    min-width: 250px;
    flex-direction: column; 
    z-index: 1000;
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
}

.dropdown-menu a {
    padding: 10px;
    text-decoration: none;
    color: var(--text-color);
    display: block; 
}

.dropdown-menu a:hover {
    background-color: #f0f0f021;
}

.profile-e:hover > .gal {
    color: var(--text-color);
    transition: .3s ease-in-out;
    transform: rotate(180deg);
}

.profile-e.active > .gal {
    color: #007BFF;
    transition: .1s ease-in-out;
    transform: rotate(360deg);
    font-size: 18px;
}

.profile-e > .gal {
    transition: .3s ease-in-out;
    color: var(--text-secondary-color);
}

.border {
    border: solid 1px var(--btn-outlined-border);
}

.faq {
    color: var(--faq);
}

.icon {
    font-size: 20px;
    z-index: 2;
    color: blue;
    height: 20px;
    width: 20px;
    text-align: center;
}

.borderes {
    background-color: blue;
    color: white;
}

.themenes {
    background-color: var(--text-color);
}

.logo-icon {
    width: 100%;
    max-width: 40px;
    height: auto;
    display: block;
}
.modal-content {
    margin: 10% auto;
    padding: 20px;
    width: 550px;
    height: 700px;
}

.step {
    position: absolute;
    width: 100%;
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: 50px;
}

.steper {
    padding: 70px;
}

#nextStepBtn {
    position: absolute;
    right: 0;
    margin-top: -50px;
}

#prevStepBtn {
    position: absolute;
    left: 0;
    margin-top: -50px;
}

button.StepBtn {
   background: none;
   border: none;
   font-size: 24px;
   font-weight: 700;
   color: var(--text-color);
   cursor: pointer;
}

#form-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

.engioar {
    color: var(--text-color);
    font-size: 30px;
}

button.enqluados {
    width: 100%;
    font-size: 16px;
    border: 2px solid var(--background-color);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    color: #adadad;
    background-color: var(--btn-filled-disabled);
    padding: 18px;
    text-align: center;
}

select.enqluados {
    width: 100%;
    font-size: 16px;
    border: 2px solid var(--background-color);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    color: #adadad;
    background-color: var(--btn-filled-disabled);
    padding: 18px;
    text-align: center;
}

input.enqluados {
    background-color: var(--main-header-bg);
    border-radius: 8px;
    width: 100%;
    padding: 28px 12px;
    font-size: 14px;
    font-weight: 500;
    appearance: none;
}

.form {
    margin-top: 30px;
}

.enqluados {
    margin-top: 10px;
}

.ecubator {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  color: var(--text-color);
  padding: 15px 15px;
  border-radius: 8px;
  border: solid 1px var(--btn-outlined-border);
  transition: transform 0.2s; 
}

.ecubator:active, .ecubator.clicked {
  transform: scale(0.95); 
}

.spinner:before {
  transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateBefore infinite linear reverse;
}

.spinner:after {
  transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateAfter infinite linear;
}

.spinner:before, .spinner:after {
  box-sizing: border-box;
  content: '';
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -10em;
  margin-left: -10em;
  width: 20em;
  height: 20em;
  transform-style: preserve-3d;
  transform-origin: 50%;
  transform: rotateY(50%);
  perspective-origin: 50% 50%;
  perspective: 340px;
  background-size: 20em 20em;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
}
@keyframes rotateBefore {
  from {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
  }
}
@keyframes rotateAfter {
  from {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
  }
}

.birthdate {
    color: var(--text-color);
    font-weight: 550;
}

.enqluados:focus {
    box-shadow: 0 0 8px rgba(0,123,255,0.3);
    outline: none;
}