@font-face {
  font-family: "InterLight";
  src: url("./fonts/inter/Inter-Light.eot");
  src: url("./fonts/inter/Inter-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/inter/Inter-Light.woff2") format("woff2"), url("./fonts/inter/Inter-Light.woff") format("woff"), url("./fonts/inter/Inter-Light.svg#Inter-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterRegular";
  src: url("./fonts/inter/Inter-Regular.eot");
  src: url("./fonts/inter/Inter-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/inter/Inter-Regular.woff2") format("woff2"), url("./fonts/inter/Inter-Regular.woff") format("woff"), url("./fonts/inter/Inter-Regular.svg#Inter-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterMedium";
  src: url("./fonts/inter/Inter-Medium.eot");
  src: url("./fonts/inter/Inter-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/inter/Inter-Medium.woff2") format("woff2"), url("./fonts/inter/Inter-Medium.woff") format("woff"), url("./fonts/inter/Inter-Medium.svg#Inter-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterBold";
  src: url("./fonts/inter/Inter-Bold.eot");
  src: url("./fonts/inter/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/inter/Inter-Bold.woff2") format("woff2"), url("./fonts/inter/Inter-Bold.woff") format("woff"), url("./fonts/inter/Inter-Bold.svg#Inter-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterBold";
  src: url("./fonts/inter/Inter-Bold.eot");
  src: url("./fonts/inter/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/inter/Inter-Bold.woff2") format("woff2"), url("./fonts/inter/Inter-Bold.woff") format("woff"), url("./fonts/inter/Inter-Bold.svg#Inter-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterBold";
  src: url("./fonts/inter/Inter-Bold.eot");
  src: url("./fonts/inter/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/inter/Inter-Bold.woff2") format("woff2"), url("./fonts/inter/Inter-Bold.woff") format("woff"), url("./fonts/inter/Inter-Bold.svg#Inter-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/* 
input {
  border: solid 2px #FFF !important;
  background: transparent !important;
  font-family: FontspringBold !important;
  color: #FFF !important;
}
 */
:root {
  --input-bg: transparent;
  --input-text-color: hsl(0, 0%, 100%);
  --main-text-color: hsl(185, 45%, 20%);
  --list-text-color: hsl(185, 45%, 20%);
  --list-text-hover-color: hsl(185, 45%, 10%);
  --background-app-color: hsl(180, 23%, 92%);
  --background-bar-color: hsl(180, 23%, 92%);
  --background-hsl-color: hsl(185, 62%, 29%);
  --background-hsl-hover-color: hsl(185, 39%, 49%);
}

.viewer-title-bar-typo {
  color: var(--main-text-color);
  font-family: Inter, Helvetica, sans-serif;
}

.main-app-logo {
  top: 0;
  right: 70px; 
  width: 256px;
  height: 62.5px;
  background-image: url("../assets/images/environment/logos/logo_studio_white_1024x250.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.viewer-bar-logo {
  position: absolute;
  left: 20px;
  top: 0;
  width: 180px;
  height: 44px;
  background-image: url("../assets/images/environment/logos/logo_studio_white_1024x250.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.professional-panel-background {
  background-color: var(--background-app-color);
}
.professional-popup-background {
  background-color: var(--background-app-color);
}
.professional-bar-background {
  background-color: var(--background-bar-color);
}

.professional-register-input {
  font-family: InterRegular !important;
  border: solid 1px var(--input-text-color) !important;
  color: var(--input-text-color);
  caret-color: var(--input-text-color);
  background-color: var(--input-bg);
  transition: background-color 0s ease-in-out;
}

.professional-register-input:-webkit-autofill {
  font-family: InterRegular !important;
  border: solid 1px var(--input-text-color) !important;
  color: var(--input-text-color) !important;
  caret-color: var(--input-text-color) !important;
  background-color: var(--input-bg) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--input-text-color) !important;
  transition: background-color 9999s ease-in-out; /* Retrasa el cambio */
}

.professional-register-input:-moz-autofill {
  font-family: InterRegular !important;
  border: solid 1px var(--input-text-color) !important;
  color: var(--input-text-color) !important;
  caret-color: var(--input-text-color) !important;
  background-color: var(--input-bg) !important;
  box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  -moz-text-fill-color: var(--input-text-color) !important;
  transition: background-color 9999s ease-in-out; /* Retrasa el cambio */
}

.toggle-password-icon-skin {
  color: var(--main-text-color);
  opacity: 0.75;
  font-size: 20px;
  margin-left: -32px;
  margin-top: -2px;
  cursor: pointer;
}

.burger-btn-skin {
  position: absolute;
  width: 32px;
  height: 32px;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1480%) hue-rotate(142deg) brightness(95%) contrast(92%);
}

.reset-margin-padding {
    margin: 0% !important;
    padding: 0% !important;
}
.professional-register-background-image-container {
    position: fixed;
    width: calc(100% - 400px);
    left: 0;
    top: 0;
    bottom: 0;
}
.professional-register-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.professional-register-menu-container {
    position: fixed;
    top: 0%;
    right: 0px;
    width: 400px;
    height: 100%;
    background-color: var(--background-app-color);
}
.professional-initialize-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.professional-initialize-container.show {
    opacity: 1;
    visibility: visible;
}

.professional-register-form-container {
    display: flex;
    align-items: center;
    height: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}
.professional-register-form-row-layout {
    position: relative;
    width: 80%;
    left: 10%;
    margin: 4% 0 4% 0 !important;
}
.professional-register-typo {
    color: var(--main-text-color) !important;
    font-family: FontspringRegular, Arial, Helvetica, sans-serif;
}
.professional-register-button {
    background-color: var(--background-app-color) !important;
    border: solid 2px var(--main-text-color) !important;
}

.professional-list-menu-item {
    font-family: InterRegular, Arial, Helvetica, sans-serif;
    color: var(--list-text-color);
    padding: 6px 0px 6px 12px;
    /* 
    border: 1px solid #909599;
    border-radius: 3px;
     */
    cursor: pointer;
}

.professional-list-menu-item:hover {
   text-decoration: none;
   background-color: #e7f0f0 !important;
   color: var(--list-text-hover-color);
}