/*
    @see https://developers.google.com/web/updates/2018/01/devtools#overrides
*/

@import "~@patternfly/patternfly/patternfly.css";
@import url('https://fonts.googleapis.com/css?family=Lato:700,900|Open+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* Sobreescribe los colores globales de patternfly */
:root {
    /* modificados */
    --pf-global--Color--light-100: var(--pf-global--Color--light-200);
    --pf-global--palette--black-1000: #003447;
    --pf-global--Color--light-100: #f5f5f5;
    --pf-global--Color--light-300: #eeeeee;
    --pf-global--active-color--100: #598CBB;
    --pf-global--link--Color: #3388C8;
    --pf-global--FontSize--4xl: 2.0rem;
    --pf-global--FontSize--3xl: 1.6rem;
    --pf-global--FontSize--2xl: 1.4rem;
    --pf-global--FontSize--xl: 1.125rem;
    --pf-global--FontSize--lg: 1rem;
    --pf-global--FontSize--md: 0.9rem;
    --pf-global--FontSize--sm: .8rem;
    --pf-global--FontSize--xs: .7rem;
    /* no modificados */
    --pf-global--BackgroundColor--100: #fff;
    --pf-global--BackgroundColor--150: #fafafa;
    --pf-global--BackgroundColor--200: #f0f0f0;
    --pf-global--BackgroundColor--light-100: #fff;
    --pf-global--BackgroundColor--light-200: #fafafa;
    --pf-global--BackgroundColor--light-300: #f0f0f0;
    --pf-global--BackgroundColor--dark-100: #151515;
    --pf-global--BackgroundColor--dark-200: #3c3f42;
    --pf-global--BackgroundColor--dark-300: #212427;
    --pf-global--BackgroundColor--dark-400: #4f5255;
    --pf-global--BackgroundColor--dark-transparent-100: #0303039e;
    --pf-global--BackgroundColor--dark-transparent-200: #03030352;
    --pf-global--Color--100: #151515;
    --pf-global--Color--200: #6a6e73;
    --pf-global--Color--300: #3c3f42;
    --pf-global--Color--400: #8a8d90;
    --pf-global--Color--light-200: #f0f0f0;
    --pf-global--Color--dark-100: #151515;
    --pf-global--Color--dark-200: #6a6e73;
    --pf-global--active-color--200: #bee1f4;
    --pf-global--active-color--300: #2b9af3;
    --pf-global--active-color--400: #73bcf7;
    --pf-global--disabled-color--100: #6a6e73;
    --pf-global--disabled-color--200: #d2d2d2;
    --pf-global--disabled-color--300: #f0f0f0;
    --pf-global--primary-color--100: #06c;
    --pf-global--primary-color--200: #004080;
    --pf-global--primary-color--light-100: #73bcf7;
    --pf-global--primary-color--dark-100: #06c;
    --pf-global--secondary-color--100: #6a6e73;
    --pf-global--default-color--100: #73c5c5;
    --pf-global--default-color--200: #009596;
    --pf-global--default-color--300: #003737;
    --pf-global--success-color--100: #3e8635;
    --pf-global--success-color--200: #1e4f18;
    --pf-global--info-color--100: #2b9af3;
    --pf-global--info-color--200: #002952;
    --pf-global--warning-color--100: #f0ab00;
    --pf-global--warning-color--200: #795600;
    --pf-global--danger-color--100: #c9190b;
    --pf-global--danger-color--200: #a30000;
    --pf-global--danger-color--300: #470000;
    --pf-global--BoxShadow--sm: 0 .0625rem .125rem 0 #0303031f,0 0 .125rem 0 #0303030f;
    --pf-global--BoxShadow--sm-top: 0 -.125rem .25rem -.0625rem #03030329;
    --pf-global--BoxShadow--sm-right: .125rem 0 .25rem -.0625rem #03030329;
    --pf-global--BoxShadow--sm-bottom: 0 .125rem .25rem -.0625rem #03030329;
    --pf-global--BoxShadow--sm-left: -.125rem 0 .25rem -.0625rem #03030329;
    --pf-global--BoxShadow--md: 0 .25rem .5rem 0rem #0303031f,0 0 .25rem 0 #0303030f;
    --pf-global--BoxShadow--md-top: 0 -.5rem .5rem -.375rem #0303032e;
    --pf-global--BoxShadow--md-right: .5rem 0 .5rem -.375rem #0303032e;
    --pf-global--BoxShadow--md-bottom: 0 .5rem .5rem -.375rem #0303032e;
    --pf-global--BoxShadow--md-left: -.5rem 0 .5rem -.375rem #0303032e;
    --pf-global--BoxShadow--lg: 0 .5rem 1rem 0 #03030329,0 0 .375rem 0 #03030314;
    --pf-global--BoxShadow--lg-top: 0 -.75rem .75rem -.5rem #0303032e;
    --pf-global--BoxShadow--lg-right: .75rem 0 .75rem -.5rem #0303032e;
    --pf-global--BoxShadow--lg-bottom: 0 .75rem .75rem -.5rem #0303032e;
    --pf-global--BoxShadow--lg-left: -.75rem 0 .75rem -.5rem #0303032e;
    --pf-global--BoxShadow--xl: 0 1rem 2rem 0 #03030329,0 0 .5rem 0 #0303031a;
    --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -.5rem #03030333;
    --pf-global--BoxShadow--xl-right: 1rem 0 1rem -.5rem #03030333;
    --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -.5rem #03030333;
    --pf-global--BoxShadow--xl-left: -1rem 0 1rem -.5rem #03030333;
    --pf-global--BoxShadow--inset: inset 0 0 .625rem 0 #03030340;
    --pf-global--font-path: "./assets/fonts";
    --pf-global--fonticon-path: "./assets/pficon";
    --pf-global--spacer--xs: .25rem;
    --pf-global--spacer--sm: .5rem;
    --pf-global--spacer--md: 1rem;
    --pf-global--spacer--lg: 1.5rem;
    --pf-global--spacer--xl: 2rem;
    --pf-global--spacer--2xl: 3rem;
    --pf-global--spacer--3xl: 4rem;
    --pf-global--spacer--4xl: 5rem;
    --pf-global--spacer--form-element: .375rem;
    --pf-global--gutter: 1rem;
    --pf-global--gutter--md: 1.5rem;
    --pf-global--ZIndex--xs: 100;
    --pf-global--ZIndex--sm: 200;
    --pf-global--ZIndex--md: 300;
    --pf-global--ZIndex--lg: 400;
    --pf-global--ZIndex--xl: 500;
    --pf-global--ZIndex--2xl: 600;
    --pf-global--breakpoint--xs: 0;
    --pf-global--breakpoint--sm: 576px;
    --pf-global--breakpoint--md: 768px;
    --pf-global--breakpoint--lg: 992px;
    --pf-global--breakpoint--xl: 1200px;
    --pf-global--breakpoint--2xl: 1450px;
    --pf-global--height-breakpoint--sm: 0;
    --pf-global--height-breakpoint--md: 40rem;
    --pf-global--height-breakpoint--lg: 48rem;
    --pf-global--height-breakpoint--xl: 60rem;
    --pf-global--height-breakpoint--2xl: 80rem;
    --pf-global--link--Color--hover: #004080;
    --pf-global--link--Color--light: #2b9af3;
    --pf-global--link--Color--light--hover: #73bcf7;
    --pf-global--link--Color--dark: #06c;
    --pf-global--link--Color--dark--hover: #004080;
    --pf-global--link--Color--visited: #40199a;
    --pf-global--link--TextDecoration: none;
    --pf-global--link--TextDecoration--hover: underline;
    --pf-global--BorderWidth--sm: 1px;
    --pf-global--BorderWidth--md: 2px;
    --pf-global--BorderWidth--lg: 3px;
    --pf-global--BorderWidth--xl: 4px;
    --pf-global--BorderColor--100: #d2d2d2;
    --pf-global--BorderColor--200: #8a8d90;
    --pf-global--BorderColor--300: #f0f0f0;
    --pf-global--BorderColor--dark-100: #d2d2d2;
    --pf-global--BorderColor--light-100: #b8bbbe;
    --pf-global--BorderRadius--sm: 3px;
    --pf-global--BorderRadius--lg: 30em;
    --pf-global--icon--Color--light: #6a6e73;
    --pf-global--icon--Color--dark: #151515;
    --pf-global--icon--FontSize--sm: .625rem;
    --pf-global--icon--FontSize--md: 1.125rem;
    --pf-global--icon--FontSize--lg: 1.5rem;
    --pf-global--icon--FontSize--xl: 3.375rem;
    --pf-global--FontWeight--light: 300;
    --pf-global--FontWeight--normal: 400;
    --pf-global--FontWeight--semi-bold: 700;
    --pf-global--FontWeight--overpass--semi-bold: 500;
    --pf-global--FontWeight--bold: 700;
    --pf-global--FontWeight--overpass--bold: 600;
    --pf-global--LineHeight--sm: 1.3;
    --pf-global--LineHeight--md: 1.5;
    --pf-global--ListStyle: disc outside;
    --pf-global--Transition: all .25s cubic-bezier(.42,0,.58,1);
    --pf-global--TimingFunction: cubic-bezier(.645,.045,.355,1);
    --pf-global--TransitionDuration: .25s;
    --pf-global--arrow--width: .9375rem;
    --pf-global--arrow--width-lg: 1.5625rem;
    --pf-global--target-size--MinWidth: 44px;
    --pf-global--target-size--MinHeight: 44px;
}

/* Sobreescribe los colores */
body * {
    --pf-c-nav__link--m-current--BackgroundColor: #4a6b77;
    --pf-c-nav__link--hover--BackgroundColor: #194657;
    --pf-c-dropdown__toggle--FontSize: 16px;
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #414141 !important;
}

body .pf-c-nav__link {
    font-size: 14px;
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-weight: 700;
}

.login-pf body {
    background: white;
}

.form-control {
    border-radius: 1px;
    box-shadow: none;
    border-color: #cdcdcd;
}

.form-control:hover {
    border-color: #76a8d6;
}

.btn-primary {
    background-image: none;
    background-color: #004996;
    box-shadow: none;
}

/* Sobreescribe los componentes del panel de navegación */
.pf-c-dropdown__toggle.keycloak__realm_selector_dropdown__toggle {
    background-color: #002636 !important;
  }
  .pf-c-nav .pf-c-divider {
    --pf-c-divider--after--BackgroundColor: hsla(0,0%,100%,.12);
    border-color: hsla(0,0%,100%,.12);
  }
  .pf-c-page__sidebar,
  .pf-c-dropdown__toggle.keycloak__realm_selector_dropdown__toggle {
    background-color: var(--pf-global--palette--black-1000);
  }

/* Sobreescribe los botones */
.pf-c-button.pf-m-primary {
    color: #fff;
    background: transparent linear-gradient(81deg, #5A8DBB 0%, #5FC9AD 100%) 0% 0% no-repeat padding-box;
    box-shadow: -9px 6px 9px #3A3A3A30;
    border-radius: 50px;
}
.pf-c-button.pf-m-primary:hover {
    color: #fff;
    background: transparent linear-gradient(81deg, #5A8DBB 90%, #5FC9AD 100%) 0% 0% no-repeat padding-box;
}

/* Sobreescribe los input checked */
.pf-c-switch__input:checked~.pf-c-switch__toggle {
    background-color: #5FC9AD;
  }
  
  .pf-c-nav__section-title {
    background-color: #002636;
    color: #F3F3F3;
  }

.pf-c-form__label-text {
    letter-spacing: 1.2px;
    color: #414141;
    opacity: 1; 
}

.pf-c-form__label-text[for="username"]:before {
    content:url('../img/correo.svg');
    margin-right: 5px;
    position: relative;
    vertical-align: middle;
}

.pf-c-form__label-text[for="password"]:before {
    content:url('../img/clave.svg');
    margin-right: 5px;
    position: relative;
    vertical-align: middle;
}

.pf-c-form-control {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #00344766;
    border-radius: 8px;
    opacity: 1;
    margin-top: 7px;
}