html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
    

    font-family: "M PLUS 1", sans-serif; 

	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {border: 0}
table {border-collapse: collapse; border-spacing: 0}
ul {list-style: none}
q:before, q:after,
blockquote:before, blockquote:after {content: ""}


:root {
	/* Light mode variables */
	--background: #fff;
	--body-color: #000;
	--main-color: #218779;
    --light-color: #8debde;
    --secondary-color: #31b9a7;
	--link-color: #009783;
	--link-hover-color: #298a7d;
	--background-bw: #eaeaea;
	--button-bg: #218779;
	--button-color: #fff;
    --sidebar-background: #8debde80;
    --golden-colour: #8a7300;
}

body.dark-theme {
    /* Dark mode variables */
    --background: #1e1e1e;
    --body-color: #e0e0e0;
	--main-color: #15e790;
    --light-color: #2d7959;
    --secondary-color: #69f7bc;
	--link-color: #69f7bc;
	--link-hover-color: #3cb884;
	--background-bw: #303030;
	--button-bg: hsl(155, 58%, 59%);
	--button-color: #0a472e;
    --sidebar-background: #8eebc480;
    --golden-colour: #F5D327;
}

html:not(.page-loaded) *,
html:not(.page-loaded) {
    transition: none !important;
}

html.page-loaded *,
html.page-loaded,
html.page-loaded .hidden {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease,
                font-weight 0.3s ease,
                box-shadow 0.3s ease,
                img 0.3s ease,
                image 0.3s ease !important;
}

/* html.page-loaded *,
html.page-loaded .hidden {
    transition: transform 0.5s ease;
} */

/* 
* {
	transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                fill 0.3s ease,
                stroke 0.3s ease;
} */

/* @font-face {  
  font-family: "Myriad Pro Regular";
  src: url(fonts/MyriadPro-Regular.otf) format("opentype");
}

@font-face {  
  font-family: "Myriad Pro Bold";
  src: url(fonts/MyriadPro-Bold.otf) format("opentype");
}

@font-face {  
  font-family: "Myriad Pro Italic";
  src: url(fonts/MyriadPro-It.otf) format("opentype");
} */


body           {font-size:18px; font-family:"M PLUS 1", sans-serif; color:var(--body-color); background-color:var(--background)}
h1             {font-size:30px; padding-top:1em; font-weight:700; color:var(--main-color)}
h1             {color:var(--main-color)}
h2             {font-size:24px; margin-top:40px; font-weight:700; color:var(--main-color)}
p              {margin:15px 0; line-height:1.5em; text-align:justify; font-weight: 300;}
a.norecolor    {color:var(--body-color)}
a              {color:var(--link-color); text-decoration:none}
a:hover        {color:var(--link-hover-color)} 
a.nounderline:hover {color:var(--link-hover-color)}
a.underline    {padding-bottom: 1px}
a.underline:hover {padding-bottom: 1px}
ul             {margin:15px 0; margin-left:25px; list-style-type:disc}
ol             {margin:15px 0; margin-left:25px; list-style-type:decimal}
li             {margin:10px 0; text-align:justify; font-weight:100;}

#cover         {float:right; margin:20px 0 5px 30px}
#title         {color:var(--main-color); font-weight:900; font-size:40px; text-align:center; margin-top: 0.5em;}
#conference    {font-size:20px; text-align:center; font-weight:500; margin-top:2em;}
#teaser        {margin-top:40px}

#authors       {width:100%; margin-top:1.5em; display: flex; justify-content: center; border-spacing: 10px;}
#authors tr    {height:25px}
#authors tr.mail {height:35px}
#authors td    {text-align:center; padding:0 1em}
#authors #affiliation {font-size:14px; padding-top: 0.5em}
#authors #affiliation span {margin-left: 20px}
#navigation {
	font-size:20px;
	text-align:center;
	font-weight: 500;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px
}
#navigation td {padding:15px; padding-bottom:0px}

.subtitle {
    font-size: 70%;
}

.super         {vertical-align:super; font-size:70%}
.bold          {/*font-family:"Myriad Pro Bold",Helvetica,sans-serif; */font-weight:bold}
/* .italic,#conference {font-family:"Myriad Pro Italic",Helvetica,sans-serif; font-style:italic} */
#image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#image-container img {
  width: 600px;
  max-width: 100%; /* Ensures the image scales down if needed */
  height: auto; /* Maintains aspect ratio */
}









/* Botón flotante de tema */
.theme-toggle-btn {
    position: fixed;
    top: 1em;
    right: 1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: var(--button-bg);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--button-color);
    font-size: 24px;
    pointer-events: auto;
    transform: translateX(0);
}

/* increase button size if we are in mobile view */
/* @media (max-width: 768px) {
    .theme-toggle-btn {
		top: 0.5em;
		right: 0.5em;
        width: 3em;
        height: 3em;
        font-size: 32px;
    }
} */

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Control de iconos */
.theme-toggle-btn .fa-moon {
    display: none;
}

body.dark-theme .theme-toggle-btn .fa-sun {
    display: none;
}

body.dark-theme .theme-toggle-btn .fa-moon {
    display: inline-block;
}

/* Clase para ocultar - se desliza hacia la derecha */
.theme-toggle-btn.hidden {
    transform: translateX(5em); /* Se desliza a la derecha */
    pointer-events: none; /* No se puede hacer clic */

}

/* En móviles, ajustar la distancia de deslizamiento */
@media screen and (max-width: 480px) {
    .theme-toggle-btn.hidden {
        transform: translateX(4em);
    }
}

#sidebar {
    position: fixed;
    left: 0;
    height: 100%;
    width: 20em;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
    padding: 1em;
    box-sizing: border-box;
    z-index: 9998; /* Debajo del botón de tema */
    /* displayear los elementos verticalmente en el centro */
    display: flex;
    align-items: center;
}

/* estilo de sidebar para pantallas estrechas o moviles */
@media (max-width: 768px) {
    #sidebar {
        height: auto;
        position: relative;
        margin: 0 auto;
    }
}


#content {
    padding-left: 20em;
    width:calc(100% - 21em);
    max-width: 900px;
    margin:0 auto;
    padding: 4em 1em 5em 20em
}

@media (max-width: 768px) {
    #content {
        padding: 1em;
        margin: 0;
        width: calc(100% - 2em);
    }
}


#photo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

#photo {
    border-radius: 1em;
    width: 100%;
}

#sidebar-content {
    align-self: center;
    left: 0;
    /* min-height: 100%; */
    width: 100%;
    /* aplicar color de fondo, con transparencia */
    background-color: var(--sidebar-background);
    padding: 1em;
    box-sizing: border-box;
    z-index: 9998; /* Debajo del botón de tema */
    /* displayear los elementos verticalmente en el centro */
    display: flex;
    align-items: center;
    border-radius: 2em;
    /* colocar los elementos verticalmente en el centro */
    /* justify-content: center; */
    flex-direction: column;
    
    /* si el contenido ocupa más de la altura del sidebar, mostrar scroll */
    overflow-y: auto;
    overflow-x: hidden;
}

.publication {
    background-color: var(--background-bw);
    margin: 0.5em 0;
    border-radius: 1.5em;
    color: var(--body-color);
    text-align: right;
    display: flex;
    align-items: center;
}

.conferences {
    background-color: var(--background-bw);
    margin: 0.5em 0;
    border-radius: 1.5em;
    color: var(--body-color);
    text-align: right;
}

.pub-icontainer {
    padding: 0.75em;
}

.pub-icon {
    border-radius: 0.75em;
    width: 100%;
}

.career-entry-icon {
    width: 8em;
    height: 5em;
    border-radius: 0.75em;
    object-fit:cover
}

.pub-content {
    width: 80%;
    padding: 0.75em;
    padding-left: 0;
    display: inline-block;
}

@media (max-width: 768px) {
    .publication {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .pub-content {
        width: auto;
        padding: 0.75em;
        padding-top: 0;
    }
}

.title {
    font-size: 1em;
    font-weight: bold;
    color: var(--body-color);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.authors {
    font-size: 0.7em;
    font-weight: 300;
}


.studying_years {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--body-color);
    margin-top: 0.2em;
}

.studies_title {
    font-size: 1em;
    font-weight: bold;
    color: var(--body-color);
    margin-top: 0.2em;
}

.studies_institution {
    font-size: 0.7em;
    font-weight: 300;
    margin-top: 0.2em;
}

/* button */
.button {
    background-color: var(--button-bg);
    color: var(--button-color);
    border: none;
    padding: 0.5em 1em;
    font-size: 1em;
    font-family: "M PLUS 1", sans-serif;
    cursor: pointer;
    border-radius: 0.5em;
    transition: background-color 0.3s ease,
                transform 0.3s ease,
                box-shadow 1s ease !important;
}

.button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}


.icon-button {
    width: 2em;
    height: 2em;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg);
    color: var(--button-color);
    border: none;
    font-size: 1em;
    font-family: "M PLUS 1", sans-serif;
    cursor: pointer;
    border-radius: 0.5em;
    transition: background-color 0.3s ease,
                transform 0.3s ease,
                box-shadow 1s ease !important;
}

.mg-b-0 { margin-bottom: 0 !important; }
.mg-b-1 { margin-bottom: 0.1em !important; }
.mg-b-2 { margin-bottom: 0.2em !important; }
.mg-b-3 { margin-bottom: 0.3em !important; }
.mg-b-4 { margin-bottom: 0.4em !important; }
.mg-b-5 { margin-bottom: 0.5em !important; }
.mg-b-6 { margin-bottom: 0.6em !important; }
.mg-b-7 { margin-bottom: 0.7em !important; }
.mg-b-8 { margin-bottom: 0.8em !important; }
.mg-b-9 { margin-bottom: 0.9em !important; }
.mg-b-10 { margin-bottom: 1em !important; }
.mg-b-15 { margin-bottom: 1.5em !important; }
.mg-b-20 { margin-bottom: 2em !important; }
.mg-b-25 { margin-bottom: 2.5em !important; }
.mg-b-30 { margin-bottom: 3em !important; }
.mg-t-0 { margin-top: 0 !important; }
.mg-t-1 { margin-top: 0.1em !important; }
.mg-t-2 { margin-top: 0.2em !important; }
.mg-t-3 { margin-top: 0.3em !important; }
.mg-t-4 { margin-top: 0.4em !important; }
.mg-t-5 { margin-top: 0.5em !important; }
.mg-t-6 { margin-top: 0.6em !important; }
.mg-t-7 { margin-top: 0.7em !important; }
.mg-t-8 { margin-top: 0.8em !important; }
.mg-t-9 { margin-top: 0.9em !important; }
.mg-t-10 { margin-top: 1em !important; }
.mg-t-15 { margin-top: 1.5em !important; }
.mg-t-20 { margin-top: 2em !important; }
.mg-t-25 { margin-top: 2.5em !important; }
.mg-t-30 { margin-top: 3em !important; }
.mg-l-0 { margin-left: 0 !important; }
.mg-l-1 { margin-left: 0.1em !important; }
.mg-l-2 { margin-left: 0.2em !important; }
.mg-l-3 { margin-left: 0.3em !important; }
.mg-l-4 { margin-left: 0.4em !important; }
.mg-l-5 { margin-left: 0.5em !important; }
.mg-l-6 { margin-left: 0.6em !important; }
.mg-l-7 { margin-left: 0.7em !important; }
.mg-l-8 { margin-left: 0.8em !important; }
.mg-l-9 { margin-left: 0.9em !important; }
.mg-l-10 { margin-left: 1em !important; }
.mg-l-15 { margin-left: 1.5em !important; }
.mg-l-20 { margin-left: 2em !important; }
.mg-l-25 { margin-left: 2.5em !important; }
.mg-l-30 { margin-left: 3em !important; }
.mg-r-0 { margin-right: 0 !important; }
.mg-r-1 { margin-right: 0.1em !important; }
.mg-r-2 { margin-right: 0.2em !important; }
.mg-r-3 { margin-right: 0.3em !important; }
.mg-r-4 { margin-right: 0.4em !important; }
.mg-r-5 { margin-right: 0.5em !important; }
.mg-r-6 { margin-right: 0.6em !important; }
.mg-r-7 { margin-right: 0.7em !important; }
.mg-r-8 { margin-right: 0.8em !important; }
.mg-r-9 { margin-right: 0.9em !important; }
.mg-r-10 { margin-right: 1em !important; }
.mg-r-15 { margin-right: 1.5em !important; }
.mg-r-20 { margin-right: 2em !important; }
.mg-r-25 { margin-right: 2.5em !important; }
.mg-r-30 { margin-right: 3em !important; }
.mg-y-0 { margin-bottom: 0 !important; margin-top: 0 !important; }
.mg-y-1 { margin-bottom: 0.1em !important; margin-top: 0.1em !important; }
.mg-y-2 { margin-bottom: 0.2em !important; margin-top: 0.2em !important; }
.mg-y-3 { margin-bottom: 0.3em !important; margin-top: 0.3em !important; }
.mg-y-4 { margin-bottom: 0.4em !important; margin-top: 0.4em !important; }
.mg-y-5 { margin-bottom: 0.5em !important; margin-top: 0.5em !important; }
.mg-y-6 { margin-bottom: 0.6em !important; margin-top: 0.6em !important; }
.mg-y-7 { margin-bottom: 0.7em !important; margin-top: 0.7em !important; }
.mg-y-8 { margin-bottom: 0.8em !important; margin-top: 0.8em !important; }
.mg-y-9 { margin-bottom: 0.9em !important; margin-top: 0.9em !important; }
.mg-y-10 { margin-bottom: 1em !important; margin-top: 1em !important; }
.mg-y-15 { margin-bottom: 1.5em !important; margin-top: 1.5em !important; }
.mg-y-20 { margin-bottom: 2em !important; margin-top: 2em !important; }
.mg-y-25 { margin-bottom: 2.5em !important; margin-top: 2.5em !important; }
.mg-y-30 { margin-bottom: 3em !important; margin-top: 3em !important; }
.mg-x-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mg-x-1 { margin-left: 0.1em !important; margin-right: 0.1em !important; }
.mg-x-2 { margin-left: 0.2em !important; margin-right: 0.2em !important; }
.mg-x-3 { margin-left: 0.3em !important; margin-right: 0.3em !important; }
.mg-x-4 { margin-left: 0.4em !important; margin-right: 0.4em !important; }
.mg-x-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
.mg-x-6 { margin-left: 0.6em !important; margin-right: 0.6em !important; }
.mg-x-7 { margin-left: 0.7em !important; margin-right: 0.7em !important; }
.mg-x-8 { margin-left: 0.8em !important; margin-right: 0.8em !important; }
.mg-x-9 { margin-left: 0.9em !important; margin-right: 0.9em !important; }
.mg-x-10 { margin-left: 1em !important; margin-right: 1em !important; }
.mg-x-15 { margin-left: 1.5em !important; margin-right: 1.5em !important; }
.mg-x-20 { margin-left: 2em !important; margin-right: 2em !important; }
.mg-x-25 { margin-left: 2.5em !important; margin-right: 2.5em !important; }
.mg-x-30 { margin-left: 3em !important; margin-right: 3em !important; }
.mg-0 { margin: 0 !important; }
.mg-1 { margin: 0.1em !important; }
.mg-2 { margin: 0.2em !important; }
.mg-3 { margin: 0.3em !important; }
.mg-4 { margin: 0.4em !important; }
.mg-5 { margin: 0.5em !important; }
.mg-6 { margin: 0.6em !important; }
.mg-7 { margin: 0.7em !important; }
.mg-8 { margin: 0.8em !important; }
.mg-9 { margin: 0.9em !important; }
.mg-10 { margin: 1em !important; }
.mg-15 { margin: 1.5em !important; }
.mg-20 { margin: 2em !important; }
.mg-25 { margin: 2.5em !important; }
.mg-30 { margin: 3em !important; }


.pd-b-0 { padding-bottom: 0 !important; }
.pd-b-1 { padding-bottom: 0.1em !important; }
.pd-b-2 { padding-bottom: 0.2em !important; }
.pd-b-3 { padding-bottom: 0.3em !important; }
.pd-b-4 { padding-bottom: 0.4em !important; }
.pd-b-5 { padding-bottom: 0.5em !important; }
.pd-b-6 { padding-bottom: 0.6em !important; }
.pd-b-7 { padding-bottom: 0.7em !important; }
.pd-b-8 { padding-bottom: 0.8em !important; }
.pd-b-9 { padding-bottom: 0.9em !important; }
.pd-b-10 { padding-bottom: 1em !important; }
.pd-b-15 { padding-bottom: 1.5em !important; }
.pd-b-20 { padding-bottom: 2em !important; }
.pd-b-25 { padding-bottom: 2.5em !important; }
.pd-b-30 { padding-bottom: 3em !important; }
.pd-t-0 { padding-top: 0 !important; }
.pd-t-1 { padding-top: 0.1em !important; }
.pd-t-2 { padding-top: 0.2em !important; }
.pd-t-3 { padding-top: 0.3em !important; }
.pd-t-4 { padding-top: 0.4em !important; }
.pd-t-5 { padding-top: 0.5em !important; }
.pd-t-6 { padding-top: 0.6em !important; }
.pd-t-7 { padding-top: 0.7em !important; }
.pd-t-8 { padding-top: 0.8em !important; }
.pd-t-9 { padding-top: 0.9em !important; }
.pd-t-10 { padding-top: 1em !important; }
.pd-t-15 { padding-top: 1.5em !important; }
.pd-t-20 { padding-top: 2em !important; }
.pd-t-25 { padding-top: 2.5em !important; }
.pd-t-30 { padding-top: 3em !important; }
.pd-l-0 { padding-left: 0 !important; }
.pd-l-1 { padding-left: 0.1em !important; }
.pd-l-2 { padding-left: 0.2em !important; }
.pd-l-3 { padding-left: 0.3em !important; }
.pd-l-4 { padding-left: 0.4em !important; }
.pd-l-5 { padding-left: 0.5em !important; }
.pd-l-6 { padding-left: 0.6em !important; }
.pd-l-7 { padding-left: 0.7em !important; }
.pd-l-8 { padding-left: 0.8em !important; }
.pd-l-9 { padding-left: 0.9em !important; }
.pd-l-10 { padding-left: 1em !important; }
.pd-l-15 { padding-left: 1.5em !important; }
.pd-l-20 { padding-left: 2em !important; }
.pd-l-25 { padding-left: 2.5em !important; }
.pd-l-30 { padding-left: 3em !important; }
.pd-r-0 { padding-right: 0 !important; }
.pd-r-1 { padding-right: 0.1em !important; }
.pd-r-2 { padding-right: 0.2em !important; }
.pd-r-3 { padding-right: 0.3em !important; }
.pd-r-4 { padding-right: 0.4em !important; }
.pd-r-5 { padding-right: 0.5em !important; }
.pd-r-6 { padding-right: 0.6em !important; }
.pd-r-7 { padding-right: 0.7em !important; }
.pd-r-8 { padding-right: 0.8em !important; }
.pd-r-9 { padding-right: 0.9em !important; }
.pd-r-10 { padding-right: 1em !important; }
.pd-r-15 { padding-right: 1.5em !important; }
.pd-r-20 { padding-right: 2em !important; }
.pd-r-25 { padding-right: 2.5em !important; }
.pd-r-30 { padding-right: 3em !important; }
.pd-y-0 { padding-bottom: 0 !important; padding-top: 0 !important; }
.pd-y-1 { padding-bottom: 0.1em !important; padding-top: 0.1em !important; }
.pd-y-2 { padding-bottom: 0.2em !important; padding-top: 0.2em !important; }
.pd-y-3 { padding-bottom: 0.3em !important; padding-top: 0.3em !important; }
.pd-y-4 { padding-bottom: 0.4em !important; padding-top: 0.4em !important; }
.pd-y-5 { padding-bottom: 0.5em !important; padding-top: 0.5em !important; }
.pd-y-6 { padding-bottom: 0.6em !important; padding-top: 0.6em !important; }
.pd-y-7 { padding-bottom: 0.7em !important; padding-top: 0.7em !important; }
.pd-y-8 { padding-bottom: 0.8em !important; padding-top: 0.8em !important; }
.pd-y-9 { padding-bottom: 0.9em !important; padding-top: 0.9em !important; }
.pd-y-10 { padding-bottom: 1em !important; padding-top: 1em !important; }
.pd-y-15 { padding-bottom: 1.5em !important; padding-top: 1.5em !important; }
.pd-y-20 { padding-bottom: 2em !important; padding-top: 2em !important; }
.pd-y-25 { padding-bottom: 2.5em !important; padding-top: 2.5em !important; }
.pd-y-30 { padding-bottom: 3em !important; padding-top: 3em !important; }
.pd-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pd-x-1 { padding-left: 0.1em !important; padding-right: 0.1em !important; }
.pd-x-2 { padding-left: 0.2em !important; padding-right: 0.2em !important; }
.pd-x-3 { padding-left: 0.3em !important; padding-right: 0.3em !important; }
.pd-x-4 { padding-left: 0.4em !important; padding-right: 0.4em !important; }
.pd-x-5 { padding-left: 0.5em !important; padding-right: 0.5em !important; }
.pd-x-6 { padding-left: 0.6em !important; padding-right: 0.6em !important; }
.pd-x-7 { padding-left: 0.7em !important; padding-right: 0.7em !important; }
.pd-x-8 { padding-left: 0.8em !important; padding-right: 0.8em !important; }
.pd-x-9 { padding-left: 0.9em !important; padding-right: 0.9em !important; }
.pd-x-10 { padding-left: 1em !important; padding-right: 1em !important; }
.pd-x-15 { padding-left: 1.5em !important; padding-right: 1.5em !important; }
.pd-x-20 { padding-left: 2em !important; padding-right: 2em !important; }
.pd-x-25 { padding-left: 2.5em !important; padding-right: 2.5em !important; }
.pd-x-30 { padding-left: 3em !important; padding-right: 3em !important; }
.pd-0 { padding: 0 !important; }
.pd-1 { padding: 0.1em !important; }
.pd-2 { padding: 0.2em !important; }
.pd-3 { padding: 0.3em !important; }
.pd-4 { padding: 0.4em !important; }
.pd-5 { padding: 0.5em !important; }
.pd-6 { padding: 0.6em !important; }
.pd-7 { padding: 0.7em !important; }
.pd-8 { padding: 0.8em !important; }
.pd-9 { padding: 0.9em !important; }
.pd-10 { padding: 1em !important; }
.pd-15 { padding: 1.5em !important; }
.pd-20 { padding: 2em !important; }
.pd-25 { padding: 2.5em !important; }
.pd-30 { padding: 3em !important; }

.bd-rd-0 { border-radius: 0 !important; }
.bd-rd-5 { border-radius: 0.5em !important; }
.bd-rd-10 { border-radius: 1em !important; }
.bd-rd-15 { border-radius: 1.5em !important; }
.bd-rd-20 { border-radius: 2em !important; }
.bd-rd-25 { border-radius: 2.5em !important; }
.bd-rd-30 { border-radius: 3em !important; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-sz-0 { font-size: 0.0em !important; }
.text-sz-1 { font-size: 0.1em !important; }
.text-sz-2 { font-size: 0.2em !important; }
.text-sz-3 { font-size: 0.3em !important; }
.text-sz-4 { font-size: 0.4em !important; }
.text-sz-5 { font-size: 0.5em !important; }
.text-sz-6 { font-size: 0.6em !important; }
.text-sz-7 { font-size: 0.7em !important; }
.text-sz-8 { font-size: 0.8em !important; }
.text-sz-9 { font-size: 0.9em !important; }
.text-sz-10 { font-size: 1.0em !important; }
.text-sz-11 { font-size: 1.1em !important; }
.text-sz-12 { font-size: 1.2em !important; }
.text-sz-13 { font-size: 1.3em !important; }
.text-sz-14 { font-size: 1.4em !important; }
.text-sz-15 { font-size: 1.5em !important; }
.text-sz-16 { font-size: 1.6em !important; }
.text-sz-17 { font-size: 1.7em !important; }
.text-sz-18 { font-size: 1.8em !important; }
.text-sz-19 { font-size: 1.9em !important; }
.text-sz-20 { font-size: 2.0em !important; }
.text-sz-21 { font-size: 2.1em !important; }
.text-sz-22 { font-size: 2.2em !important; }
.text-sz-23 { font-size: 2.3em !important; }
.text-sz-24 { font-size: 2.4em !important; }
.text-sz-25 { font-size: 2.5em !important; }
.text-sz-26 { font-size: 2.6em !important; }
.text-sz-27 { font-size: 2.7em !important; }
.text-sz-28 { font-size: 2.8em !important; }
.text-sz-29 { font-size: 2.9em !important; }
.text-sz-30 { font-size: 3.0em !important; }
.text-sz-31 { font-size: 3.1em !important; }
.text-sz-32 { font-size: 3.2em !important; }
.text-sz-33 { font-size: 3.3em !important; }
.text-sz-34 { font-size: 3.4em !important; }
.text-sz-35 { font-size: 3.5em !important; }
.text-sz-36 { font-size: 3.6em !important; }
.text-sz-37 { font-size: 3.7em !important; }
.text-sz-38 { font-size: 3.8em !important; }
.text-sz-39 { font-size: 3.9em !important; }
.text-sz-40 { font-size: 4.0em !important; }
.text-sz-41 { font-size: 4.1em !important; }
.text-sz-42 { font-size: 4.2em !important; }
.text-sz-43 { font-size: 4.3em !important; }
.text-sz-44 { font-size: 4.4em !important; }
.text-sz-45 { font-size: 4.5em !important; }
.text-sz-46 { font-size: 4.6em !important; }
.text-sz-47 { font-size: 4.7em !important; }
.text-sz-48 { font-size: 4.8em !important; }
.text-sz-49 { font-size: 4.9em !important; }
.text-sz-50 { font-size: 5.0em !important; }

.text-wg-100 { font-weight: 100 !important; }
.text-wg-150 { font-weight: 150 !important; }
.text-wg-200 { font-weight: 200 !important; }
.text-wg-250 { font-weight: 250 !important; }
.text-wg-300 { font-weight: 300 !important; }
.text-wg-350 { font-weight: 350 !important; }
.text-wg-400 { font-weight: 400 !important; }
.text-wg-450 { font-weight: 450 !important; }
.text-wg-500 { font-weight: 500 !important; }
.text-wg-550 { font-weight: 550 !important; }
.text-wg-600 { font-weight: 600 !important; }
.text-wg-650 { font-weight: 650 !important; }
.text-wg-700 { font-weight: 700 !important; }
.text-wg-750 { font-weight: 750 !important; }
.text-wg-800 { font-weight: 800 !important; }
.text-wg-850 { font-weight: 850 !important; }
.text-wg-900 { font-weight: 900 !important; }
.hover-text-wg-100:hover { font-weight: 100 !important; }
.hover-text-wg-150:hover { font-weight: 150 !important; }
.hover-text-wg-200:hover { font-weight: 200 !important; }
.hover-text-wg-250:hover { font-weight: 250 !important; }
.hover-text-wg-300:hover { font-weight: 300 !important; }
.hover-text-wg-350:hover { font-weight: 350 !important; }
.hover-text-wg-400:hover { font-weight: 400 !important; }
.hover-text-wg-450:hover { font-weight: 450 !important; }
.hover-text-wg-500:hover { font-weight: 500 !important; }
.hover-text-wg-550:hover { font-weight: 550 !important; }
.hover-text-wg-600:hover { font-weight: 600 !important; }
.hover-text-wg-650:hover { font-weight: 650 !important; }
.hover-text-wg-700:hover { font-weight: 700 !important; }
.hover-text-wg-750:hover { font-weight: 750 !important; }
.hover-text-wg-800:hover { font-weight: 800 !important; }
.hover-text-wg-850:hover { font-weight: 850 !important; }
.hover-text-wg-900:hover { font-weight: 900 !important; }
/* .text-wg-900 { font-weight: 9００ !important; } */

/* other text effects (italic, underline, etc.) */
.text-italic { font-style: italic !important; }
.text-underline { text-decoration: underline !important; }
.text-no-underline { text-decoration: none !important; }

.color-body { color: var(--body-color) !important; }
.color-main { color: var(--main-color) !important; }
.color-light { color: var(--light-color) !important; }
.color-secondary { color: var(--secondary-color) !important; }
.bgcolor-body { background-color: var(--body-color) !important; }
.bgcolor-main { background-color: var(--main-color) !important; }
.bgcolor-light { background-color: var(--light-color) !important; }
.bgcolor-secondary { background-color: var(--secondary-color) !important; }

.hover-color-body:hover { color: var(--body-color) !important; }
.hover-color-main:hover { color: var(--main-color) !important; }
.hover-color-light:hover { color: var(--light-color) !important; }
.hover-color-secondary:hover { color: var(--secondary-color) !important; }
.hover-bgcolor-body:hover { background-color: var(--body-color) !important; }
.hover-bgcolor-main:hover { background-color: var(--main-color) !important; }
.hover-bgcolor-light:hover { background-color: var(--light-color) !important; }
.hover-bgcolor-secondary:hover { background-color: var(--secondary-color) !important; }

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

.text-align-left { text-align: left !important; }
.text-align-center { text-align: center !important; }
.text-align-right { text-align: right !important; }
.text-align-justify { text-align: justify !important; }

.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }

.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }

.nowrap { white-space: nowrap !important; }

.gap-0 { gap: 0 !important; }
.gap-5 { gap: 0.5em !important; }
.gap-10 { gap: 1em !important; }
.gap-15 { gap: 1.5em !important; }

.of-x-hidden { overflow-x: hidden !important; }
.of-x-auto { overflow-x: auto !important; }
.of-x-scroll { overflow-x: scroll !important; }
.of-x-visible { overflow-x: visible !important; }
.of-y-hidden { overflow-y: hidden !important; }
.of-y-auto { overflow-y: auto !important; }
.of-y-scroll { overflow-y: scroll !important; }
.of-y-visible { overflow-y: visible !important; }
.hide-scroll { scrollbar-width: none; }
.smooth-scroll { scroll-behavior: smooth !important; }

.width-0pc { width: 0% !important; }
.width-10pc { width: 10% !important; }
.width-20pc { width: 20% !important; }
.width-25pc { width: 25% !important; }
.width-30pc { width: 30% !important; }
.width-40pc { width: 40% !important; }
.width-50pc { width: 50% !important; }
.width-60pc { width: 60% !important; }
.width-70pc { width: 70% !important; }
.width-75pc { width: 75% !important; }
.width-80pc { width: 80% !important; }
.width-90pc { width: 90% !important; }
.width-100pc { width: 100% !important; }
.width-05em { width: 0.5em !important; }
.width-10em { width: 1em !important; }
.width-15em { width: 1.5em !important; }
.width-20em { width: 2em !important; }
.width-25em { width: 2.5em !important; }
.width-30em { width: 3em !important; }
.width-35em { width: 3.5em !important; }
.width-40em { width: 4em !important; }
.width-45em { width: 4.5em !important; }
.width-50em { width: 5em !important; }
.min-width-0pc { min-width: 0% !important; }
.min-width-10pc { min-width: 10% !important; }
.min-width-20pc { min-width: 20% !important; }
.min-width-25pc { min-width: 25% !important; }
.min-width-30pc { min-width: 30% !important; }
.min-width-40pc { min-width: 40% !important; }
.min-width-50pc { min-width: 50% !important; }
.min-width-60pc { min-width: 60% !important; }
.min-width-70pc { min-width: 70% !important; }
.min-width-75pc { min-width: 75% !important; }
.min-width-80pc { min-width: 80% !important; }
.min-width-90pc { min-width: 90% !important; }
.min-width-100pc { min-width: 100% !important; }
.max-width-0pc { max-width: 0% !important; }
.max-width-10pc { max-width: 10% !important; }
.max-width-20pc { max-width: 20% !important; }
.max-width-25pc { max-width: 25% !important; }
.max-width-30pc { max-width: 30% !important; }
.max-width-40pc { max-width: 40% !important; }
.max-width-50pc { max-width: 50% !important; }
.max-width-60pc { max-width: 60% !important; }
.max-width-70pc { max-width: 70% !important; }
.max-width-75pc { max-width: 75% !important; }
.max-width-80pc { max-width: 80% !important; }
.max-width-90pc { max-width: 90% !important; }
.max-width-100pc { max-width: 100% !important; }
.width-fit-to-available {
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
}
.width-auto { width: auto !important; }

.height-0pc { height: 0% !important; }
.height-10pc { height: 10% !important; }
.height-20pc { height: 20% !important; }
.height-25pc { height: 25% !important; }
.height-30pc { height: 30% !important; }
.height-40pc { height: 40% !important; }
.height-50pc { height: 50% !important; }
.height-60pc { height: 60% !important; }
.height-70pc { height: 70% !important; }
.height-75pc { height: 75% !important; }
.height-80pc { height: 80% !important; }
.height-90pc { height: 90% !important; }
.height-100pc { height: 100% !important; }
.height-05em { height: 0.5em !important; }
.height-10em { height: 1em !important; }
.height-15em { height: 1.5em !important; }
.height-20em { height: 2em !important; }
.height-25em { height: 2.5em !important; }
.height-30em { height: 3em !important; }
.height-35em { height: 3.5em !important; }
.height-40em { height: 4em !important; }
.height-45em { height: 4.5em !important; }
.height-50em { height: 5em !important; }
.min-height-0pc { min-height: 0% !important; }
.min-height-10pc { min-height: 10% !important; }
.min-height-20pc { min-height: 20% !important; }
.min-height-25pc { min-height: 25% !important; }
.min-height-30pc { min-height: 30% !important; }
.min-height-40pc { min-height: 40% !important; }
.min-height-50pc { min-height: 50% !important; }
.min-height-60pc { min-height: 60% !important; }
.min-height-70pc { min-height: 70% !important; }
.min-height-75pc { min-height: 75% !important; }
.min-height-80pc { min-height: 80% !important; }
.min-height-90pc { min-height: 90% !important; }
.min-height-100pc { min-height: 100% !important; }
.max-height-0pc { max-height: 0% !important; }
.max-height-10pc { max-height: 10% !important; }
.max-height-20pc { max-height: 20% !important; }
.max-height-25pc { max-height: 25% !important; }
.max-height-30pc { max-height: 30% !important; }
.max-height-40pc { max-height: 40% !important; }
.max-height-50pc { max-height: 50% !important; }
.max-height-60pc { max-height: 60% !important; }
.max-height-70pc { max-height: 70% !important; }
.max-height-75pc { max-height: 75% !important; }
.max-height-80pc { max-height: 80% !important; }
.max-height-90pc { max-height: 90% !important; }
.max-height-100pc { max-height: 100% !important; }
.height-fit-to-available {
    max-height: -moz-available !important;
    max-height: -webkit-fill-available !important;
}
.height-auto { height: auto !important; }