:root{
    --heart-ice: #F8FCFF;
    --powder-white: #EAF0F4;
    --denim: #2641B3;
    --blue:#007bff;
    --daintree: #002A32;
    --violet: #712cf9;
    --purple:#605ca8;
    --teal: #39cccc;
    --red-handed: #DA2630;
    --vivacious: #A2255D;
    --pink: #e83e8c;
    --orange: #ff851b;
    --harbour-blue: #3F748E;
    --marine-teal: #008282;
    --highlight: #ffff00;
    --grey: #6c757d;
    --denim-rgb: 38, 65, 179;
    --blue-rgb: 0, 123, 255;
    --daintree-rgb: 0, 42, 50;
    --violet-rgb: 113, 44, 249;
    --purple-rgb: 96, 92, 168;
    --teal-rgb: 57, 204, 204;
    --red-handed-rgb: 218, 38, 48;
    --vivacious-rgb: 162, 37, 93;
    --pink-rgb: 232, 62, 140;
    --orange-rgb: 255, 133, 27;
    --harbour-blue-rgb: 63, 116, 142;
    --marine-teal-rgb: 0, 130, 130;
    --highlight-rgb: 255, 255, 0;
    --grey-rgb: 108, 117, 125;
    --n1:calc(10px + 37px);
    --n2:calc(20px + 37px);
    --n3:calc(30px + 37px);
    --n4:calc(40px + 37px);
    --bs-bg-opacity: 1;
}

@font-face {
    font-family: 'InterTight-Light';
    src: url('fonts/InterTight-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'InterTight-Regular';
    src: url('fonts/InterTight-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Rokkitt-Bold';
    src: url('fonts/Rokkitt-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Rokkitt-ExtraBold';
    src: url('fonts/Rokkitt-ExtraBold.ttf') format('truetype');
}

html, body{
    font-family: 'InterTight-Regular';
    height: 100%;
    margin: 0;
}

.header{
    position: fixed;
    width: 100%;
}
.logo-chicago-deusto{
    width: auto;
    height: 80px;
}

.logo-uned {
    width: 80px;
    height: auto;
}



/** Color de fondos */
.bg-heart-ice{
    background-color: rgba(var(--heart-ice-rgb), var(--bs-bg-opacity))!important;
}
.bg-powder-white{
    background-color: rgba(var(--powder-white-rgb), var(--bs-bg-opacity))!important;
}
.bg-denim{
    background-color: rgba(var(--denim-rgb), var(--bs-bg-opacity))!important;
}
.bg-blue{
    background-color: rgba(var(--blue-rgb), var(--bs-bg-opacity))!important;
}
.bg-daintree{
    background-color: rgba(var(--daintree-rgb), var(--bs-bg-opacity))!important;
}
.bg-violet{
    background-color: rgba(var(--violet-rgb), var(--bs-bg-opacity))!important;
}
.bg-red-handed{
    background-color: rgba(var(--red-handed-rgb), var(--bs-bg-opacity))!important;
}
.bg-vivacious{
    background-color: rgba(var(--vivacious-rgb), var(--bs-bg-opacity))!important;
}
.bg-pink{
    background-color: rgba(var(--pink-rgb), var(--bs-bg-opacity))!important;
}
.bg-orange{
    background-color: rgba(var(--orange-rgb), var(--bs-bg-opacity))!important;
}
.bg-purple{
    background-color: rgba(var(--purple-rgb), var(--bs-bg-opacity))!important;
}
.bg-teal{
    background-color: rgba(var(--teal-rgb), var(--bs-bg-opacity))!important;
}
.bg-harbour-blue{
    background-color: rgba(var(--harbour-blue-rgb), var(--bs-bg-opacity))!important;
}
.bg-marine-teal{
    background-color: rgba(var(--marine-teal-rgb), var(--bs-bg-opacity))!important;
}
.bg-highlight{
    background-color: rgba(var(--highlight-rgb), var(--bs-bg-opacity))!important;
}
.bg-grey{
    background-color: rgba(var(--grey-rgb), var(--bs-bg-opacity))!important;
}


/** Color de texto */
.text-heart-ice{
    color: rgba(var(--heart-ice-rgb), var(--bs-bg-opacity))!important;
}
.text-powder-white{
    color: rgba(var(--powder-white-rgb), var(--bs-bg-opacity))!important;
}
.text-denim{
    color: rgba(var(--denim-rgb), var(--bs-bg-opacity))!important;
}
.text-blue{
    color: rgba(var(--blue-rgb), var(--bs-bg-opacity))!important;
}
.text-daintree{
    color: rgba(var(--daintree-rgb), var(--bs-bg-opacity))!important;
}
.text-violet{
    color: rgba(var(--violet-rgb), var(--bs-bg-opacity))!important;
}
.text-red-handed{
    color: rgba(var(--red-handed-rgb), var(--bs-bg-opacity))!important;
}
.text-vivacious{
    color: rgba(var(--vivacious-rgb), var(--bs-bg-opacity))!important;
}
.text-pink{
    color: rgba(var(--pink-rgb), var(--bs-bg-opacity))!important;
}
.text-orange{
    color: rgba(var(--orange-rgb), var(--bs-bg-opacity))!important;
}
.text-purple{
    color: rgba(var(--purple-rgb), var(--bs-bg-opacity))!important;
}
.text-teal{
    color: rgba(var(--teal-rgb), var(--bs-bg-opacity))!important;
}
.text-harbour-blue{
    color: rgba(var(--harbour-blue-rgb), var(--bs-bg-opacity))!important;
}
.text-marine-teal{
    color: rgba(var(--marine-teal-rgb), var(--bs-bg-opacity))!important;
}
.text-highlight{
    color: rgba(var(--highlight-rgb), var(--bs-bg-opacity))!important;
}
.text-grey{
    color: rgba(var(--grey-rgb), var(--bs-bg-opacity))!important;
}

/** Color del border */
.border-denim{
    border-color: var(--denim)!important;
}
.border-red-handed{
    border-color: var(--red-handed)!important;
}

/** Highligh y tooltip */
.highlight:hover{
    --bs-tooltip-opacity: 1;
    background-color:var(--highlight);
    cursor: pointer;
}

.tool-denim:hover{
    background-color: rgba(var(--denim-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-denim{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--denim);
    --bs-tooltip-color: var(--bs-white);
}
.tool-blue:hover{
    background-color: rgba(var(--blue-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-blue{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--blue);
    --bs-tooltip-color: var(--bs-white);
}
.tool-daintree:hover{
    background-color: rgba(var(--daintree-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-daintree{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--daintree);
    --bs-tooltip-color: var(--bs-white);
}
.tool-violet:hover{
    background-color: rgba(var(--violet-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-violet{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--violet);
    --bs-tooltip-color: var(--bs-white);
}
.tool-red-handed:hover{
    background-color: rgba(var(--red-handed-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-red-handed{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--red-handed);
    --bs-tooltip-color: var(--bs-white);
}
.tool-vivacious:hover{
    background-color: rgba(var(--vivacious-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-vivacious{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--vivacious);
    --bs-tooltip-color: var(--bs-white);
}
.tool-pink:hover{
    background-color: rgba(var(--pink-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-pink{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--pink);
    --bs-tooltip-color: var(--bs-white);
}
.tool-orange:hover{
    background-color: rgba(var(--orange-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-orange{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--orange);
    --bs-tooltip-color: var(--bs-white);
}
.tool-purple:hover{
    background-color: rgba(var(--purple-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-purple{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--purple);
    --bs-tooltip-color: var(--bs-white);
}
.tool-teal:hover{
    background-color: rgba(var(--teal-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-teal{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--teal);
    --bs-tooltip-color: var(--bs-black);
}
.tool-harbour-blue:hover{
    background-color: rgba(var(--harbour-blue-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-harbour-blue{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--harbour-blue);
    --bs-tooltip-color: var(--bs-white);
}
.tool-marine-teal:hover{
    background-color: rgba(var(--marine-teal-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-marine-teal{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--marine-teal);
    --bs-tooltip-color: var(--bs-white);
}
.tool-highlight:hover{
    background-color: rgba(var(--highlight-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
}
.tooltip-highlight{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--highlight);
    --bs-tooltip-color: var(--bs-black);
    
}
.tool-grey:hover{
    background-color: rgba(var(--grey-rgb), var(--bs-bg-opacity))!important;
    cursor:pointer;
    
}
.tooltip-grey{
    --bs-tooltip-opacity: 1;
    --bs-tooltip-bg: var(--grey);
    --bs-tooltip-color: var(--bs-white);
}


/** Fuentes */
.font-interTight-light{
    font-family: 'InterTight-Light';
}
.font-interTight-regular{
    font-family: 'InterTight-Regular';
}
.font-rokkitt-bold{
    font-family: 'Rokkitt-Bold';
}
.font-rokkitt-extraBold{
    font-family: 'Rokkitt-ExtraBold';
}

/** Acordeón */
.accordion-button::after {
    content: "\f078"; /* Código Unicode de la flecha hacia abajo */
    font-family: "Font Awesome 6 Free";
    color:var(--red-handed)!important;
}

.accordion{
    --bs-accordion-btn-icon: none!important;
    --bs-accordion-btn-active-icon: none!important;
}

/** Nav */
.nav-link {
    color: var(--denim);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--denim);
}

/** Tamño de los iconos */
.ico-1{
    width: auto;
    height: 16px;
}
.ico-2{
    width: auto;
    height: 24px;
}
.ico-3{
    width: auto;
    height: 32px;
}
.ico-4{
    width: auto;
    height: 48px;
}

/** Contenedor principal, usando flexbox */
.container-fluid {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
.footer{
    bottom: 0;
}

/** Menú horizontal */
.dropdown-item-:hover {
    background-color: var(--powder-white)!important;
}
.dropdown-item.active, .dropdown-item:focus {
    background-color: var(--denim);
    color: var(--bs-white)!important;
}
.dropdown-item-1:hover {
    background-color: var(--heart-ice)!important;
}
.dropdown-item-1.active, .dropdown-item-1:focus {
    background-color: var(--marine-teal)!important;
    color: var(--bs-white)!important;
}

.dropdown-item-label:focus, .dropdown-item-label:hover, .dropdown-item-label:active{
    background-color: var(--bs-white)!important;
    color: var(--denim)!important;
}

/** Menú vertical */
.menu-vertical {
    z-index: 1000;
    left: 5px!important;
    width: 50px; 
    overflow: hidden;
    /*transition: width 0.3s ease;*/
    font-family: 'Rokkitt-Bold';
    position: fixed !important;
}

.menu-vertical:hover {
    width: 150px; 
    overflow: visible;
}

.menu-vertical div {
    white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
    transition: color 0.3s ease;
}

.menu-vertical div:hover, .offcanvas-body div:hover {
    color: var(--denim);
}

.menu-vertical img, .offcanvas-body img {
    margin-right: 10px;
    vertical-align: middle;
}

.offcanvas-body div{
    display: flex;
}

.menu-n1{
    padding-left: var(--n1)!important;
}
.menu-n2{
    padding-left: var(--n2)!important;
}
.menu-n3{
    padding-left: var(--n3)!important;
}
.menu-n4{
    padding-left: var(--n4)!important;
}

.offcanvas.offcanvas-start {
    width: 300px;
}

.offcanvas-body .active{
    color:var(--denim)!important;
    border-left: 3px solid var(--denim);
    background-color: var(--heart-ice);
    width: 100%;
}

.offcanvas-body a{
    display: contents;
}




/*
.offcanvas-body .active::before {
    content: '|';
    display: inline-block;
    margin-right: 5px;
    position: relative;
    left: -10px;
}*/

/** Link */
.link-dark:focus, .link-dark:hover {
    color: var(--denim) !important;
    -webkit-text-decoration-color: var(--denim) !important;
    text-decoration-color: var(--denim) !important;
}

/** Mobile */
.header-mobile{
    height: 50px;
    z-index: 1000;
}

/** Margenes */
.ps-xl-6 {
    padding-left: .25rem !important;
}

.mb-6{
    margin-bottom: 4rem;
}

/** Media */
@media (min-width: 769px) and (max-width: 1400px) {
    .ps-xl-6 {
        padding-left: 60px !important;
    }
}
@media (max-width: 768px) {
    .ps-xl-6 {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
}