@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&family=Palanquin:wght@100;200;300;400;500;600;700&display=swap');




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

html,
body {
    font-family: 'Palanquin', sans-serif !important;
    background-color: var(--bg-body);
    color: var(--fg-body);
}

h1 {
    color: var(--H-text-color);
    font-size: 2rem;
    font-weight: 500;
}

h2,
h3,
h4,
h5 {
    font-family: 'Antonio', sans-serif !important;
    color: var(--H-text-color);
}


:root {
    --fg-body: #041433;
    --bg-body: #F0F2F8;
    --H-text-color: #21296B;
    --Y-text-color: #FFBA00;
    --hero-bg-color: #102F82;
    --login-text-color: #21296B;
    --accent-block-background: #FFFFFF;
    --accent-block-home: #F0F0F2;
    --accent-block-report: #F0F0F2;
    --accent-white-white: #FFFFFF;
    --accent-icon-gray-dark: #F5F7FA;
    --accent-white-dark: #FFFFFF;
    --bg-menu: #001391;
    --bg-button-default: #dfdfdf;
    --bg-button-primary: #102F82;
    /* --bg-button-warning: black; */
    --bg-button-success: #156B4C;
    --bg-button-alert: #D12626;
    --appbar-color: red;
    /* --hint-background: #f0eeee;
    --hint-color: #1d1e20;
    --hint-border-radius: 10px; */
    --un-shadow-hover: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;



}

.dark-side {
    --fg-body: #FFFFFF;
    --bg-body: #1E1F22;
    --H-text-color: #ececec;
    --hero-bg-color: #21296B;
    --login-text-color: #000000;
    --accent-block-background: #21296B;
    --accent-block-home: #21296B;
    --accent-block-report: #282C35;
    --accent-white-white: #FFFFFF;
    --accent-icon-gray-dark: #1C1D1F;
    --accent-white-dark: #2C2D30;
    --accent-neutral-gray: #e9e9e9;
    /* --bg-menu: #102F82; */
    --bg-button-primary: #031065;
    --bg-button-success: #0c3e2c;
    --bg-button-alert: #862e2e;
    --appbar-color: yellow;
    /* --hint-background: rgb(211, 208, 208);
    --hint-color: #000000;
    --hint-border-radius: 10px; */
    --un-shadow-hover: rgba(122, 122, 122, 0.16) 0px 10px 36px 0px, rgba(216, 216, 216, 0.06) 0px 0px 0px 1px;

}

.H-text-color {
    color: var(--H-text-color);
}

.Y-text-color {
    color: var(--Y-text-color);
}

.login-text-color {
    color: var(--login-text-color);
}

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

.accent-block {
    background-color: var(--accent-block-background);
}

.accent-block-home {
    background-color: var(--accent-block-home);
}

.accent-block-report {
    background-color: var(--accent-block-report);
}

.accent-bg-footer {
    background-color: var(--bg-menu);
    color: #D7F0FD;
}

.accent-white-white {
    background-color: var(--accent-white-white);
}

.accent-neutral-gray {
    background-color: var(--accent-neutral-gray);
}

.accent-icon-gray-dark {
    background-color: var(--accent-icon-gray-dark);
}

.accent-white-dark {
    background-color: var(--accent-white-dark);
}



.myCustomAppBar {
    --appbar-background: var(--bg-menu);
    --appbar-color: #D7F0FD;
    --appbar-item-color: #ffffff;
    --appbar-item-background-hover: rgba(255, 255, 255, 0.2);
    --appbar-item-color-hover: #ffffff;
    --appbar-border-radius: 10px;
}


/* buttons */
.button-default {
    background-color: var(--bg-button-default);
    border-style: none;
    color: #3b3b3b;
    border-radius: 12px;
    padding: 1px 10px;
}

.button-default:hover {
    background-color: #c0c0c0;
    color: #000000;
}

.button-primary {
    background-color: var(--bg-button-primary);
    border-style: none;
    color: #FFF;
    border-radius: 12px;
    padding: 1px 10px;
}

.button-primary:hover {
    background-color: #0044B5;
}

/* .button-warning {
    background-color: var(--bg-button-warning);
    border-style: none;
    color: #FFF;
    border-radius: 12px;
    padding: 1px 10px;
}

.button-warning:hover {
    background-color: #0044B5;
} */

.button-success {
    background-color: var(--bg-button-success);
    border-style: none;
    color: #FFF;
    border-radius: 12px;
    padding: 1px 10px;
}

.button-success:hover {
    background-color: #009464;
    color: #FFF;
}

.button-alert {
    background-color: var(--bg-button-alert);
    border-style: none;
    color: #FFF;
    border-radius: 12px;
    padding: 1px 10px;
}

.button-alert:hover {
    background-color: #FD372C;
    color: #FFF;
}

.remark-success {
    text-align: center;
    background-color: #e4f7e6;
    color: #005B13;
    padding: 4px 10px;
    border-radius: 10px;
}

.remark-alert {
    text-align: center;
    background-color: #F3D8D8;
    color: #511A1E;
    padding: 10px;
    border-radius: 10px;
}

.remark-warning {
    text-align: center;
    background-color: #FDF4D1;
    color: #624E17;
    padding: 10px;
    border-radius: 10px;
}

.remark-light {
    text-align: center;
    /* background-color: #f2f2f2; */
    background-color: var(--accent-icon-gray-dark);
    color: #4a4a4a;
    padding: 10px;
    border-radius: 10px;
}


/* background colores UWC */
.bg-FAD42F {
    background-color: #FAD42F;
}

.bg-FFEAD0 {
    background-color: #FFEAD0;
}

.bg-0044B5 {
    background-color: #0044B5;
}

.bg-FFE9E9 {
    background-color: #FFE9E9;
}

.bg-F0F0F2 {
    background-color: #F0F0F2;
}

/* font weight colores UWC */
.fg-FFBA00 {
    color: #FFBA00;
}

.fg-396FEE {
    color: #396FEE;
}

/* sombras */
.shadow-uwc {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* .un-shadow{
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
} */

.un-shadow-hover:hover{
 box-shadow: var(--un-shadow-hover);
 transition-duration: 0.3s;
}

.box {
    border: none;
}

.badge-gray {
    background-color: #CCCCCC;
    color: #000000;
    padding: 0px 7px 1px 7px;
    border-radius: 7px;
}

.badge-green {
    background-color: #e4f7e6;
    color: #005B13;
    padding: 0px 7px 1px 7px;
    border-radius: 7px;
}

.badge-red {
    background-color: #F3D8D8;
    color: #511A1E;
    padding: 0px 7px 1px 7px;
    border-radius: 7px;
}

.badge-blue {
    background-color: #102F82;
    color: #FFFFFF;
    padding: 0px 7px 1px 7px;
    border-radius: 7px;
}

/* contenedor del layout del login */
.container-layout {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/*media query*/
.container-fluid {
    width: 100%;
}

@media (min-width: 900px) {
    .container-fluid {
        padding: 10px 100px 10px 100px;
    }

}

@media (min-width: 300px) and (max-width: 899px) {
    .hide {
        display: none;
    }
}

/* 
iconos
https://www.magnific.com/es/autor/graphicsplazza/iconos/generic-black-outline_9681 */