:root {
    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);
    --gray: rgba(128, 128, 128, 1);
    --primary: rgba(19, 50, 43, 1);
    --secondary: rgba(249, 243,237, 1);
    --shadow: rgba(128, 128, 128, 0.5);
}

* {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-size: small;
}

h1,
main>#title>i {
    font-size: 2em;
}

h2,
.nav-link>span,
.sidebar>.nav-item>.nav-link>i,
.nav-item>.sidebar-brand>i,
main>header>a>button>i {
    font-size: 1.25em;
}

p, .modal-title>i {
    font-size: 1em;
}


a>h2 {
    font-size: 2em;
    color: var(--white);
}









/*---------------------------------------
TOPBAR
---------------------------------------*/
.topbar {
    height: 4em;
    color: var(--white);
    background-color: var(--primary);
}

.topbar>ul>li>a {
    color: var(--white);
}

.dropdown .dropdown-menu .dropdown-header {
    color: var(--black);
}










/*---------------------------------------
SIDEBAR
---------------------------------------*/
.sidebar {
    background-color: var(--primary);
    min-height: 100vh;
}

/*Container Logo*/
.sidebar-brand-header {
    position: relative;
    margin: 0;
}

/*Logo*/
.sidebar-brand-header>a>img {
    height: 4em;
}

/*Container de Inicio*/
.sidebar .sidebar-brand {
    text-decoration: none;
    height: 4em;
    padding: 1.25em;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
    margin: auto;
}

/*Estilos para mantener orden al colapsar*/
.sidebar .nav-item {
    position: relative;
}

/*Estilos para los contenedores de los link e items del sidebar*/
.sidebar .nav-item .nav-link {
    text-align: center;
    padding: 1em;
    width: 7.5em;
    color: var(--white);
}

/*Estilos del Icono de los navs e items*/
.sidebar .nav-item .nav-link i {
    color: var(--white);
}

/*Estilo para el botón de colapso de sidebar*/
.sidebar #sidebarToggle {
    background-color: var(--shadow);
}

/*Animación para colapsar a un costado*/
.sidebar .nav-item .collapsing {
    display: none;
    transition: none;
}

/*Estilos del encabezado del elemento dropdown colapsado*/
.sidebar .nav-item .collapse .collapse-inner .collapse-header, .sidebar .nav-item .collapsing .collapse-inner .collapse-header {
    margin: 0;
    white-space: nowrap;
    padding: .5em 1.2em;
    color: var(--black);
    background-color: var(--shadow);
}

/*Estilos de los elementos dropdown colapsados*/
.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    padding: .5em 1em;
    margin: 0 .5em;
    display: block;
    color: var(--black);
    text-decoration: none;
    border-radius: .35em;
    white-space: nowrap;
}

/*Hover del elemento seleccionado en dropdown*/
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: var(--shadow);
}

/*Estilos del botón para minimizar el menú*/
.sidebar #sidebarToggle {
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    margin-bottom: 1em;
    cursor: pointer;
    color: var(--white);
}

/*Evento para ocultar o mostrar sidebar con el toggle*/
.sidebar.toggled {
    width: 0 !important;
    overflow: hidden;
}



/*MEDIAS QUERY PARA LA SIDEBAR PEQUEÑA*/
@media (min-width:768px) {
    .sidebar {
        width: 20em !important;
    }

    .sidebar .nav-item .collapse {
        position: relative;
        left: 0;
        z-index: 1;
        top: 0;
        -webkit-animation: none;
        animation: none;
    }

    .sidebar .nav-item .collapse .collapse-inner {
        border-radius: 0;
        box-shadow: none;
    }

    .sidebar .nav-item .collapsing {
        display: block;
        transition: height .15s ease;
    }

    .sidebar .nav-item .collapse, .sidebar .nav-item .collapsing {
        margin: 0 1em;
    }

    .sidebar .nav-item .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: 1em;
        width: 20em;
    }

    .sidebar .nav-item .nav-link i {
        margin-right: .25em;
    }

    .sidebar .nav-item .nav-link span {
        display: inline;
    }

    .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
        width: 5em;
        text-align: center;
        float: right;
        vertical-align: 0;
        border: 0;
    }

    .sidebar .sidebar-brand .sidebar-brand-header {
        display: inline;
    }

    .sidebar .sidebar-heading {
        text-align: left;
    }

    .sidebar.toggled {
        overflow: visible;
        width: 10em !important;
    }

    .sidebar.toggled .nav-item .collapse {
        position: absolute;
        left: calc(7em + 1.5em / 2);
        z-index: 1;
        top: 0.1em;
        -webkit-animation-name: growIn;
        animation-name: growIn;
        -webkit-animation-duration: .2s;
        animation-duration: .2s;
        -webkit-animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
        animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
    }

    .sidebar.toggled .nav-item .collapse .collapse-inner {
        box-shadow: 0 .15em 1.75em 0 var(--shadow);
        border-radius: .35em;
    }

    .sidebar.toggled .nav-item .collapsing {
        display: none;
        transition: none;
    }

    .sidebar.toggled .nav-item .collapse, .sidebar.toggled .nav-item .collapsing {
        margin: 0;
    }

    .sidebar.toggled .nav-item:last-child {
        margin-bottom: 1em;
    }

    .sidebar.toggled .nav-item .nav-link {
        text-align: center;
        padding: 1em 1em;
        width: 7em;
    }

    .sidebar.toggled .nav-item .nav-link span {
        display: block;
    }

    .sidebar.toggled .nav-item .nav-link i {
        margin-right: 0;
    }

    .sidebar.toggled .nav-item .nav-link[data-toggle=collapse]::after {
        display: none;
    }

    .sidebar.toggled .sidebar-brand i {
        font-size: 1.25em;
    }

    .sidebar.toggled .sidebar-brand .sidebar-logo {
        display: none;
    }

    .sidebar.toggled .sidebar-heading {
        text-align: center;
    }
}










/*---------------------------------------
BIENVENIDA
---------------------------------------*/
.main>.container-img-bienvenida {
    margin: 15em auto;
}

.main>.container-img-bienvenida>img {
    display: flex;
    margin: auto;
    width: 50em;
    border-radius: 1em;
}









/*---------------------------------------
DIV GENERAL
---------------------------------------*/
#wrapper {
    display: flex;
}










/*---------------------------------------
DIV DEL CONTENIDO
---------------------------------------*/
#wrapper #content-wrapper {
    background-color: var(--white);
    width: 100%;
    overflow-x: hidden;
}

#wrapper #content-wrapper #content {
    flex: 1 0 auto;
}










/*---------------------------------------
TITLE
---------------------------------------*/
main>#title {
    text-align: center;
}










/*---------------------------------------
HEADER
---------------------------------------*/
main>header {
    padding: 1em;
}









/*---------------------------------------
BOTON DE DAR SCROLL UP
---------------------------------------*/
.scroll-to-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    display: none;
    width: 2.75em;
    height: 2.75em;
    text-align: center;
    color: var(--white);
    background: var(--gray);
    line-height: 46px;
}

.scroll-to-top:hover {
    background: var(--gray);
    color: var(--white);
}










/*---------------------------------------
FOOTER
---------------------------------------*/
footer.sticky-footer {
    padding: 2em 0;
    flex-shrink: 0;
}










/*---------------------------------------
ICONS
---------------------------------------*/
#icons_1 {
    font-size: 6em;
}

#icons_href {
    text-decoration: none;
    color: var(--black);
}

#icons_href:hover {
    color: var(--primary);
}