@charset "UTF-8";

/*-----------------------------------BEGINS ROOT SECTION-----------------------------------*/
:root{
    --black-alike: #07013B;
    --darker-main-color: #1D0F9B;
    --main-color: #1800EB;
    --light-main-color: #7162F7;
    --lighter-main-color: #B5ADFF;
    --second-color: #EB5D00;
    --light-second-color: #FA9856;
    --lighter-second-color: #F7CFB4;
    --third-color: #3C9632;
    --background-color: #F3F3F3;
    --white-alike: #FCFCFC;
    --text-color: #000;
}

/*@media (prefers-color-scheme: dark){
    :root{
        --background-color: #3f3649;
        --text-color: #eee;
    }
}*/

::selection{
    background-color: var(--light-second-color);
}

body{
    margin: 0;
    font-family:Arial, Helvetica, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

:focus{
    outline: 2px solid var(--second-color);
}

/*-----------------------------------ENDS ROOT SECTION-----------------------------------*/










/*-----------------------------------BEGINS HEADER SECTION-----------------------------------*/
#courtain{
    width: 100vw;
    height: 6vh;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    background: var(--main-color);
    background: radial-gradient(circle, var(--light-main-color) 0%, var(--main-color) 100%);
    transition: height 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
    box-shadow: 0px 2px 5px 0px #aca5a5;
    z-index: 15;
}

#particles-js{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 16;
}

header{
    width: calc(100vw - 4vh);
    height: 3vh;
    position: fixed;
    padding: 2vh;
    padding-bottom: 1vh;    
    background-color: var(--main-color);
    z-index: 17;
}

#company_logo{
    height: 4vh;
    margin-left: 0.8vw;
    margin-top: 2vh;
}

#company_logo .st0{
    fill: var(--lighter-main-color);
}

#logo_text{
    font-family: 'Anton', sans-serif;
    width: calc(15vw - 2vh);
    color: var(--lighter-main-color);
    font-size: 1.5em;
    user-select: none;
    cursor: pointer;
    display: inline-block;
    transition: margin 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

#hamburguer{
    display:inline-block;
    margin-right: 0.5vh;
    vertical-align: top;
    background: transparent;
    border: none;
}

#lastupdate{
    right: 4vh;
    position: absolute;
    color: var(--lighter-main-color);
    font-size: 0.9em;
    cursor: default;
    user-select: none;
}

#lastupdate::before{
    content: "Última actualización hace ";
}
/*-----------------------------------ENDS HEADER SECTION-----------------------------------*/










/*-----------------------------------BEGINS FORM SECTION-----------------------------------*/
form{
    accent-color: var(--main-color);
}

fieldset{
    border: 1px solid var(--main-color);
    border-radius: 4px;
}

input{
    border-radius: 2px;
    border: 1px solid var(--main-color);
}

input[type="text"]{
    margin-right: 0.3em;
    margin-bottom: 1em;
    padding: 0.3em;
}

input[type="submit"]{
    color: #FFF;
    background-color: var(--main-color);
    margin:2px;
    padding: 0.3em;
}

input[type="submit"]:hover{
    cursor: pointer;
}

input[type="submit"]:active{
    background-color: var(--light-main-color);
}

input[type="submit"]:disabled{
    background-color: #dfdde0;
    color: var(--light-main-color);
    border: 1px solid var(--lighter-main-color);
}

select{
    border-radius: 2px;
    border: 1px solid var(--main-color);
}
select option:hover{
    box-shadow: 0 0 10px 100px var(--lighter-main-color) inset;
}

select option:checked{
    box-shadow: 0 0 10px 100px var(--main-color) inset;
}

select:focus{
    outline: 2px solid var(--second-color);
}

input[type="checkbox"]{
    accent-color: var(--third-color);
}

input[type="radio"]{
    accent-color: var(--third-color);
}

textarea:focus{
    outline: 2px solid var(--second-color);
}
/*-----------------------------------ENDS FORM SECTION-----------------------------------*/










/*-----------------------------------BEGINS CENTEREDFORM SECTION-----------------------------------*/
#centeredform_container{
    height: 94vh;
    width: 100vw;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

#centeredform{
    background-color: #FFF;
    padding: 2vh;
    border-radius: 8px;
    font-size: 1em;
    box-shadow: 0px 20px 12px 6px rgb(0 0 0 / 20%);
}

#centeredform input{
    padding: 1em;
    display: block;
    margin-top: 1em;
}

#centeredform select{
    padding: 1em;
    display: block;
    margin-top: 1em;
}

#centeredform input[type="submit"]{
    width: 100%;
}
/*-----------------------------------ENDS CENTEREDFORM SECTION-----------------------------------*/










/*-----------------------------------BEGINS NAV SECTION-----------------------------------*/
nav{
    background-color: var(--black-alike);
    color: var(--white-alike);
    width: 15vw;
    /*height: 94vh;*/
    height: 96vh;/*Adding 2vh for mobile overflow*/
    /*display: none;*/
    margin-top: 6vh;
    user-select: none;
    cursor: default;
    overflow: hidden;
    position: fixed;
    z-index: 10;
}

@media only screen and (min-width: 1200px) {
    nav{
        left:0;
        display: block;
        box-shadow: none;
    }

    #hamburguer{
        display: none;
    }   
}

#portfolios{
    overflow: hidden;
}

#portfolio_displayer{
    border-bottom: 1px solid var(--darker-main-color);
    padding: 10px;
    overflow: hidden;
    cursor: pointer;
    /*transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);*/
    box-shadow: 0px 0px 8px 0px #00000050;
    position: relative;
    z-index: 12;
}

#portfolio_displayer:hover{
    background-color: var(--darker-main-color);
}

#portfolio_pp{
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    background-color: #FFF;
    border: 1px solid var(--lighter-main-color);
}

#portfolio_name_container{
    display: inline-block;
    vertical-align: super;
    margin-right: 0.3em;
}

#portfolio_name{
    color: var(--lighter-main-color);
}

#portfolio_ul_box{
    background-color: var(--main-color);
    height: 0px;
    transition: height 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
    z-index: 11;
}

#portfolio_ul{
    display: block;
}

#portfolio_ul li:hover{
    background-color: var(--light-main-color);
}

ul{
    margin: 0;
    padding: 0;
    padding-top:0.4em;
    padding-bottom:0.4em;
    user-select: none;
    cursor: default;
}

li{
    list-style-type: none;
    padding: 0.8em;
    margin: 10px;
    margin-top: 0;
    margin-bottom: 0;
    transition: background-color ease-out 115ms;
}

nav li{
    border-radius: 5px;
}

nav li:hover{
    background-color: var(--darker-main-color);
}

.default_nav li{
    border-radius: 5px;
}

.default_nav li:hover{
    background-color: var(--darker-main-color);
    color:var(--white-alike);
}

#user_container{
    position: absolute;
    width: calc(100% - 1.6em);
    bottom: 0;
    padding: 0.8em;
    /*padding-bottom: 3vh;*/
    padding-bottom: 5vh;/*Adding 2vh for mobile overflow*/
    border-top: 1px solid var(--darker-main-color);
}

#user_fullname{
    color:var(--lighter-main-color);
}

#logout{
    display: block;
    font-weight: bold;
    font-size: 0.8em;
    color: var(--light-main-color);
    margin-top:0.4em;
    text-decoration: none;
}

#logout:hover{
    text-decoration: underline;
}
/*-----------------------------------ENDS NAV SECTION-----------------------------------*/



/*-----------------------------------BEGINS ASIDE SECTION-----------------------------------*/
aside{
    width: 30vw;
    flex-basis: 30vw;
    flex-shrink: 0;
    margin-left: 2vh;
    overflow: auto;
}
/*-----------------------------------ENDS ASIDE SECTION-----------------------------------*/




/*-----------------------------------BEGINS MAIN SECTION-----------------------------------*/
#main_container{
    position: absolute;
    height: 1000px;
    margin-top: 6vh;
    margin-left: 15vw;
    width: 83vw;
}

#content{
    position: absolute;
    display: flex;
    overflow: hidden;
    margin-top: 6vh;
    margin-left: 15vw;
    /*width: 85vw;*/
    width: calc(85vw - (100vw - 100%));
}

main{
    width: calc(85vw - 2vh);/*85 is 100 minus nav. And 2vh are being substracted estimating the width of scroll bar*/
    margin-left: 2vw;
    margin-right: 0vw;
    margin-top: 2vh;
    margin-bottom: 2vh;
    position: relative;
    left:0;
}

#inline_nav{
    margin-left: 2vw;
}

#inline_nav li{
    padding: 0.4em;
    padding-left: 0.8em;
    border-radius: 1em;
    color: var(--main-color);
    display: inline-block;
    margin: 0;
    padding-right: 0.8em;
}

#inline_nav li.inline_navli_selected{
    background-color: var(--main-color);
    /*background-color: var(--second-color);*/
    color: var(--white-alike);
}

#inline_nav li:not(.inline_navli_selected):hover{
    background-color: var(--lighter-main-color);
    /*background-color: var(--light-second-color);*/
}

a{
    color: var(--main-color);
}

a:active{
    color: var(--light-main-color)
}
/*-----------------------------------ENDS MAIN SECTION-----------------------------------*/










/*-----------------------------------BEGINS TABLE SECTION-----------------------------------*/
table{
    display: block;
    border-spacing: 0;
    font-family: monospace;
}

tbody > tr > td:first-of-type{
    border-left:  1px solid #f3f3f3;
}

th{
    background-color: var(--main-color);
    color: var(--lighter-main-color);
    padding: 0.3em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    font-weight: initial;
}

tr:hover{
    background-color: var(--lighter-second-color);
}

table.heatmap tr:hover{
    background-color: initial;
}

td{
    white-space: nowrap;
    padding: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.3em;
    border: 1px solid #f3f3f3;
    border-bottom: 0;
    border-left: 0;
}

table.heatmap td.heatmapcolorized{
    transition: opacity 200ms ease-out;
}

table.heatmap td.heatmapcolorized:hover{
    opacity: 0.5;
}

.tdclickable:focus{
    outline: 2px solid var(--darker-main-color);
}

.td_number{
    text-align:right;
}

.td_index{
    color:#BBB;
    background-color: transparent;
}

tfoot{
    font-weight: bold;
}

tfoot tr:hover{
    background-color: initial;
}

tfoot td{
    border-top: 1px solid var(--main-color);
    border-bottom: 1px solid #f3f3f3;
}

.inline_tag{
    font-size: 0.7em;
    color: #016900;
    border: 1px solid #016900;
    background-color: #bee7be;
    border-radius: 4px;
    padding: 0.05em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    cursor: default;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}
/*-----------------------------------ENDS TABLE SECTION-----------------------------------*/










/*-----------------------------------BEGINS MODULES SECTION-----------------------------------*/

.modules_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100%;
}

.module{
    padding:2vw;
    margin:1vw;
    position:relative;
    border-radius: 1vw;
    background-color: #FFF;
    box-shadow: 0px 5px 10px 2px #CCC;
    z-index: 2;
}

.modules_column{
    display:flex;
    flex-direction: column; 
}

.bignums_col{
    width: min-content;
}

.bignums_col > div.module{
    /*Applies for the modules that are inside bignums_col*/
    padding: 1vw;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

.loading_overlay{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4;
}

.md_ratio2{
    width: 50vw;
    flex-grow: 2;
    min-height: calc(50vw / 2);
}

.bignum{
    opacity: 0.2;
}

.gr_ratio2{
    width: 60vw;
}

canvas, table, iframe{
    transition: opacity 0.15s ease-in;
    z-index: 3;
}

h2{
    text-align: center;
    font-weight: normal;
    font-size: 1.2em;
    margin-top: 0;
    color: var(--darker-main-color);
    border-bottom: 1px solid var(--lighter-main-color);
    position: sticky;
    left: 0;
}

.hmodule{
    width: min-width;
}

.hmodule h1{
    margin: 0;    
}

.hmodule h2{
    text-align: initial;
    font-weight: normal;
    font-size: 1.2em;
    margin: initial;
    margin-bottom: 0;
    color: var(--darker-main-color);
    border:none;
}
/*-----------------------------------ENDS MODULES SECTION-----------------------------------*/




.download_icon{cursor: pointer;}
.download_arrow{fill:var(--main-color); transition: transform 250ms ease-in;}
.download_disk{fill:var(--main-color)}
.download_icon:hover .download_arrow{transform: translateY(1px); transition: transform 150ms ease-out;}

/*.upload_icon{}*/
.upload_arrow{fill:var(--main-color); transition: transform 250ms ease-in;transform: translateY(32px)}
.upload_cloud{fill:var(--main-color)}
.icon_button:hover .upload_arrow{transform: translateY(0px); transition: transform 150ms ease-out;}

.icon_button{
    cursor: pointer;
    margin-left: -0.4em;
    padding:0.4em;
    border: none;
}

.icon_button:hover{
    background-color: #DDD;
}