/*****************************************************************/
/*********************         HEADER        *********************/
/*****************************************************************/

.superposition {
    z-index: 10 !important;
}

/*****************************************************************/
/*********************         MENU TOP      *********************/
/*****************************************************************/

#navbar-top {
    background: #333 !important;
    padding: 0 1rem;
}

#navbar-top.navbar-dark .nav-link {
    color: rgba(0, 0, 0, 0.5);
}

#navbar-top.navbar-dark .nav-link:focus,
#navbar-top.navbar-dark .nav-link:hover {
    color: rgba(0, 0, 0, 0.75);
}

#navbar-top.navbar-light .nav-link {
    color: rgba(0, 0, 0, 0.5);
}

#navbar-top.navbar-light .nav-link:focus,
#navbar-top.navbar-light .nav-link:hover {
    color: rgba(0, 0, 0, 0.7);
}

#navbar-top .region-top-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
}

#navbar-top .region-top-header .nav-item a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff !important;
    font-size: 14px;
    padding: 0;
    margin-right: 15px;
    font-family: "SourceSansPro";
}

#navbar-top .region-top-header .block-menu .nav-item a:hover {
    text-decoration: underline;
}

#navbar-top .region-top-header .block-menu .nav-item:last-child a {
    margin-right: 25px;
}

#navbar-top .redes-sociales {
    margin-top: 0;
}


#navbar-top .redes-sociales ul {
    margin-bottom: 0;
    padding-left: 0;
}

#navbar-top .redes-sociales ul::before {
    display: inline-block;
    border-radius: 0.5px;
    color: #fff;
    content: "\007C";
    margin-right: 15px;
    margin-bottom: 5px;
}

#navbar-top .redes-sociales ul li {
    display: inline-block;
    text-align: center;
    padding: 0.1em 0.25em;
}

#navbar-top .redes-sociales ul .fa-2x {
    font-size: 15px;
    color: #fff;
}

@media screen and (max-width: 575px) {
    #navbar-top {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    #navbar-top .region-top-header {
        margin-right: -10px;
    }

    #navbar-top .region-top-header .block-menu .nav-item a {
        margin-right: 20px;
    }
}

/*****************************************************************/
/*************          MENU USUARIO             *****************/
/*****************************************************************/


#navbar-user {
    padding: 0;
    background-color: white;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137) !important;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137) !important;
}

.tituloNavA {
    background-color: white;
    border-radius: 5px;
    padding: 10px 15px;
}



#navbar-user>.container{
    height: 100px;
    flex-wrap: nowrap;
    display: flex;
    justify-content: start;
}

#navbar-user>.container .logo-junta{
    width: 65px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    -webkit-background-size: auto 100px;
    background-size: auto 100px;
    text-indent: -9999px;
    margin-right: 10px;
}

#navbar-user>.container .navbar-brand:focus,
#navbar-user>.container .navbar-brand:hover {
    text-decoration: none;
}

#navbar-user>.container .logo-organismo {
    width: 190px;
}

#navbar-user>.container .logo-domain {
    height: 100px;
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -9999px;
    margin-right: 0;
}

#navbar-user>.container #nombre-app{
    border-left: 3px solid #33333333;
}

#nombre-app,
#nombre-app-sm {
    text-decoration: none !important;
}

#navbar-user>.container #nombre-app-sm{
    font-size: 1rem;
}

#navbar-user .navbar-toggler {
    color: #087021;
    width: 48%;
    height: 30%;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size:0.8rem;
    i{
        font-size:1.3rem;
    }
}

#navbar-user .navbar-toggler:focus,
#navbar-user .navbar-toggler:hover {
    text-decoration: none;
    border: none !important;
}

#navbar-user>.container .nav-user li {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;

    div{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 105px;

        a {
            font-family: "SourceSansProBold";
            font-size: 0.85em !important;
            letter-spacing: -0.3px;
            padding: 0;
        }

        a , span {
            color: #84B790;
        }
    }
}

#navbar-user>.container .nav-user>li:hover,
#navbar-user>.container .nav-user>li.active {
    div{
        box-shadow: inset 0 -4px 0 #087021;
        a {
            font-family: "SourceSansProBold";
        }
        a , span {
            color: #087021;
        }
    }
}

#navbar-user>.container .nav-user>li .separador{
    border-left: 3px solid #333333;
    opacity:0.38;
    height: 50%;
    margin-left:20px;
    margin-right:20px;
}

.title-app {
    color: #087021;
    font-family: "MontserratBold";
}

#collapsibleNavId ul {
    z-index: 12 !important;
    position: relative;
    background-color: white !important;
}

@media all and (min-width: 768px) {
    #navbar-user>.container #nombre-app-sm{
        display:none;
    }
}

@media all and (max-width: 575px) {
    #navbar-user .container .logo-organismo {
        display: none;
    }
    #navbar-user>.container #nombre-app{
        font-size: 1rem;
        border: none;
    }
    #navbar-user>.container .nav-user{
        display: none;
    }
}

@media all and (min-width: 575px) and  (max-width: 768px) {
    #navbar-user>.container #nombre-app{
        font-size: 1rem;
        border:none;
    }
}

@media all and (max-width: 767px) {
    #navbar-user>.container #nombre-app{
        display:none;
    }
}

@media all and (min-width: 767px) and  (max-width: 992px) {
    #navbar-user>.container #nombre-app{
        font-size: 1.2rem;
    }
}

@media all and (max-width: 992px) {
    #navbar-user{
        margin:0;
    }

    #navbar-user>.container{
        height: 60px;
        margin-bottom:0;
    }

    #navbar-user::after {
        display:none;
    }

    #navbar-user>.container .logo-junta {
        width: 60px;
        height: 50px;
        background-position: -34px 0;
        -webkit-background-size: 84px 50px;
        background-size: 84px 50px;
        margin-right: 0;
    }

    #navbar-user>.container .logo-domain {
        width: 180px;
        height: 50px;
        background-position: -153px 0;
        -webkit-background-size: 622px 50px;
        background-size: 622px 50px;
    }

    #collapsibleNavId .navbar-nav {

        border-radius: 0;
        margin-top: 0;

        .nav-item {
            display: flex ;
            flex-direction:row;
            width: 40px;
            height: 45px;
            margin: 20px 10px !important;

            .nav-link {
                margin-left: 20px;
                align-self: center;
                font-family: "SourceSansProBold";
                color: #087021 ;
                font-size: unset;
            }
        }
    }
}

@media all and (min-width: 992px) and  (max-width: 1200px) {
    #navbar-user>.container #nombre-app{
        font-size: 1.6rem;
    }
}

@media all and (min-width: 1200px) {
    #navbar-user>.container #nombre-app{
        font-size: 1.8rem;
    }
}



/*****************************************************************/
/*************             MENU PRINCIPAL            *************/
/*****************************************************************/

.degradado .container,
.degradado .navbar,
.degradado .navbar .container-fluid {
    padding: 0;
}

.degradado h1 {
    margin-top: 33px;
}

.degradado ul.navbar-nav {
    border-radius: 19px;
    margin-top: 25px;
    background-color: #fff !important;
}

.degradado li.nav-item{
    margin: 20px 10px;
    width: 95px;
    height: 90px;
    position: relative;
    img {
        border-radius: 9px;
    }

    display: flex;
    flex-direction: column;
}

.degradado li.nav-item:first-child{
    margin: 20px 10px 20px 20px;
}

.degradado li.nav-item:last-child {
    margin: 20px 20px 20px 10px;
}

.degradado .nav-link {
    font-family: 'MontserratBold';
    color: #333333;
    font-size: 0.8rem;
    text-align: center;
}

.margin-left-20 {
    margin-left: -20px;
}

.margin-left-5 {
    margin-left: -5px;
}

@media all and (max-width: 992px) {
    :host{
        z-index: 999999;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #33333360;
    }

    #navbar-main2::after {
        display: none;
    }

    .degradado {
        height: auto;
        background: none;

    }

    .degradado .container {
        justify-content:start !important;
    }

    .degradado .container .navbar {
        width:100%;
    }

    #collapsibleNavId .navbar-nav {
        border-radius: 0;
        margin-top: 0;

        .nav-item{
            display: flex ;
            flex-direction: row;
            border-bottom: 1px solid !important;
            border-bottom-color: #33333338 !important;
            padding: 3px 0px;
            margin: 0 13px;
            width: unset;
            height: unset;

            img {
                width: 45px;
                height: 45px;
                margin: 3px;
            }

            .nav-link{
                margin-left: 20px;
                align-self: center;
                font-family: "SourceSansProBold";
                color: #087021 ;
                font-size: unset;
            }
        }
    }
}

@media (min-width: 992px) {
    #collapsibleNavId {
        .visually-hidden{
            all: unset !important;
        }
    }
}


/*****************************************************************/
/************                 NAVBAR            ******************/
/*****************************************************************/

.nav-item.empresa img {
    background-color: #77B5C3;
}

.nav-item.ciudadano img {
    background-color: #E3CD66;
}

.nav-item.sae img {
    background-color: #A5CCA0;
}

.degradado.empresa {
    height: 15px;
    background:  transparent linear-gradient(90deg, #77B5C3 0%, #B7DDE5 27%, #A5CCA0 56%, #619064 100%) 0% 0% no-repeat padding-box;
    width: -webkit-fill-available;
}
.degradado.ciudadano {
    height: 100px;
    background:  transparent linear-gradient(90deg, #DAC56C 0%, #F5E688 27%, #A5CCA0 56%, #619064 100%) 0% 0% no-repeat padding-box;
    width: -webkit-fill-available;
}

.navbar {
    --bs-navbar-toggler-border-color: transparent !important;
    --bs-navbar-toggler-border-radius: 0 !important;
    --bs-navbar-toggler-focus-width: 0 !important;
    --bs-navbar-toggler-transition: 0.15s ease-in-out !important;
}


/*****************************************************************/
/**************                 BADGE                *************/
/*****************************************************************/

.badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20%, -20%);
    font-size: 1.2em !important;
    --bs-badge-padding-x: 12px;
    --bs-badge-padding-y: 0.25em;
}

@media (max-width: 991px) {
    .badge {
        position: relative;
        top: unset;
        right: unset;
        transform: unset;
        height: fit-content;
        --bs-badge-padding-x: 9px !important;
        font-size: 0.75em !important;
    }
}

/*****************************************************************/
/**************            BREADCRUMBS            ****************/
/*****************************************************************/

.breadcrumb {
    background-color: transparent !important;
    font-family: "SourceSansPro";
    margin-top: 10px;
    font-size: 13px !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "\203a";
    color: #087021 !important;
}

.breadcrumb-item.active {
    font-weight: 100;
    font-weight: bold;
    color: #087021 !important;
}

.breadcrumb-item.active span {
    font-weight: 100;
    font-weight: bold;
}

.breadcrumb-item:first-child > a, .breadcrumb-item.active:first-child{
    font-weight: bolder;
    text-decoration: none;
    color: #087021;
}

@media (max-width: 991px) {
    .breadcrumb {
        width: 100% !important;
        position: relative !important;
        top: 0;
        z-index: 0 !important;
    }

}

/*****************************************************************/
/************                 FONTS                   ************/
/*****************************************************************/

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat/Montserrat-Regular.ttf");
    font-weight: normal;
    font-style: normal;
    font-optical-sizing: auto;
}

@font-face {
    font-family: "MontserratBold";
    src: url("fonts/Montserrat/Montserrat-Bold.ttf");
    font-weight: bold;
    font-style: normal;
    font-optical-sizing: auto;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("fonts/SourceSansPro/SourceSansPro-Regular.ttf");
    font-weight: normal;
    font-style: normal;
    font-optical-sizing: auto;
}

@font-face {
    font-family: "SourceSansProBold";
    src: url("fonts/SourceSansPro/SourceSansPro-Bold.ttf");
    font-weight: bold;
    font-style: normal;
    font-optical-sizing: auto;
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-brands-400.eot);
    src: url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),
        url("fonts/fa-brands-400.woff2") format("woff2"),
        url("fonts/fa-brands-400.woff") format("woff"),
        url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-brands-400.ttf) format("truetype"),
        url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-brands-400.svg#fontawesome) format("svg");
}

:host {
    display: block;
}

.fa-instagram:before {
    content: "\f16d";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-x-twitter:before {
    content: "\e61b";
}

.fa-tiktok:before {
    content: "\e07b";
}

.fa-youtube:before {
    content: "\f167";
}

.fa-facebook-f:before {
    content: "\f39e";
}

.fa-flickr:before {
    content: "\f16e";
}

.fa-linkedin-in:before {
    content: "\f0e1";
}

.fa-bars:before {
    content: "\f0c9";
}

.fa-times:before {
    content: "\f00d";
}

.fa-user:before {
    content: "\f007";
}

.fab {
    font-family: "Font Awesome 5 Brands";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-solid-900.eot);
    src: url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
        url("fonts/fa-solid-900.woff2") format("woff2"),
        url("fonts/fa-solid-900.woff") format("woff"),
        url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-solid-900.ttf) format("truetype"),
        url(https://www.juntadeandalucia.es/libraries/fontawesome/webfonts/fa-solid-900.svg#fontawesome) format("svg");
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("fonts/fa6-brands-400.woff2") format("woff2");
}

.fa,
.far,
.fas {
    font-family: "Font Awesome 5 Free";
}

.fab.fa-x-twitter,
.fab.fa-tiktok {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

.fa,
.fas {
    font-weight: 900;
}

.fas.fa-circle-xmark:before{
    content: "\f057";
}

.fa-2x {
    font-size: 2em;
}

.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}