:root {
  --bs-body-font-family: 'Montserrat', sans-serif;
  /* =========================
     BRAND COLORS
     ========================= */
  --app-blue: #2354D1;
  --app-blue-dark: #0F2962;
  --app-blue-light: #F4F7FC;

  --app-pink: #f51c70;
  --app-pink-light: #FDF8FA;

  --app-orange: #ff8a00;
  --app-orange-light: #FDFAF7;

  /* =========================
     TEXT COLORS
     ========================= */
  --app-text-primary: #323232;

  /* =========================
    VIDEO
    ========================= */
  --plyr-color-main: var(--app-pink);
  /* fondo para los controles */
  --plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  /* icono/texto de botones */
  --plyr-video-control-color: #ffffff;
  /* icono/texto de botones (hover) */
  --plyr-video-control-color-hover: #ffffff;
}


/* =========================
   BLUE
   ========================= */
.app-text-blue {
  color: var(--app-blue)!important;
}
.app-bg-blue {
  background-color: var(--app-blue);
}


/* =========================
   BLUE DARK
   ========================= */
.app-text-blue-dark {
  color: var(--app-blue-dark)!important;
}

.app-bg-blue-dark {
  background-color: var(--app-blue-dark);
}


/* =========================
   BLUE LIGHT
   ========================= */
.app-text-blue-light {
  color: var(--app-blue-light);
}

.app-bg-blue-light {
  background-color: var(--app-blue-light);
}


/* =========================
   PINK
   ========================= */
.app-text-pink {
  color: var(--app-pink);
}

.app-bg-pink {
  background-color: var(--app-pink);
}


/* =========================
   PINK LIGHT
   ========================= */
.app-text-pink-light {
  color: var(--app-pink-light);
}

.app-bg-pink-light {
  background-color: var(--app-pink-light);
}


/* =========================
   ORANGE
   ========================= */
.app-text-orange {
  color: var(--app-orange);
}

.app-bg-orange {
  background-color: var(--app-orange);
}


/* =========================
   ORANGE LIGHT
   ========================= */
.app-text-orange-light {
  color: var(--app-orange-light);
}

.app-bg-orange-light {
  background-color: var(--app-orange-light);
}


/* =========================
   TEXT
   ========================= */
.app-text-primary {
  color: var(--app-text-primary);
}

.app-bg-primary {
  background-color: var(--app-text-primary);
}

@font-face {
  font-family: 'Montserrat-Light';
  src: url('https://cdn.fanaderma.com/assets/fonts/Montserrat-Light.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('https://cdn.fanaderma.com/assets/fonts/Montserrat-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url('https://cdn.fanaderma.com/assets/fonts/Montserrat-Medium.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat-Bold';
  src: url('https://cdn.fanaderma.com/assets/fonts/Montserrat-Bold.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat-Black';
  src: url('https://cdn.fanaderma.com/assets/fonts/Montserrat-Black.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

.app-font-light {
  font-family: 'Montserrat-Light', sans-serif;
}

.app-font-regular {
  font-family: 'Montserrat-Regular', sans-serif;
}

.app-font-medium {
  font-family: 'Montserrat-Medium', sans-serif;
}

.app-font-bold {
  font-family: 'Montserrat-Bold', sans-serif;
}

.app-font-black {
  font-family: 'Montserrat-Black', sans-serif;
}

body {
  font-family: 'Montserrat-Regular', sans-serif;
}

.min-vh-100-navbar{
min-height: calc(100vh - 200px);
}

.uppercase{
  text-transform: uppercase;
}

.text-404{
  font-size: 10vw;
  font-family: 'Montserrat-Bold', sans-serif;
}
.text-404-subtitle{
  font-size: 2.5vw;
}

.no-link{
  text-decoration: none;
}


.button-custom-width{
  width: 250px!important;
}

.main{
    padding-top: 20px;
}

/*********** FORM PASSWORD *****/
.main-center {
    min-height: calc(100vh - 274px);
}

.form-control:focus {
    border-color: #0c93c8;
    box-shadow: 0 0 0 0.25rem rgb(0 188 212 / 6%);
}

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.form-min-container {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/***** Password *****/
.error-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
    
}