/* =============== Variables =============== */

:root
{
    --main-background: #2f3136;
    --main-color: #c9cbcc;

    --button-color: #595b5c;
    --back-button-background: #202225f8;
    --back-button-hover-color: #717375;

    --box-shadow-black-very-low-alpha: #00000018;

    --search-color: #9da0a4;
    --search-background-color: #202225;

    --element-background: #36393f;
}



/* =============== General =============== */

*
{
    scroll-behavior: smooth;
    font-family: Helvetica, Arial, sans-serif;
    scrollbar-color: #56595f var(--main-background);
}


html.wait *
{
    cursor: wait !important;
}


body
{
    color: var(--main-color);
    background-color: var(--main-background);
}



a, a:visited
{
    text-decoration: none;
    color: var(--main-color);
}

img
{
    user-select: none;
}

button
{
    font-weight: bold;

    margin-right: 0.5em;

    width: 1.2em;
    height: 1.2em;

    border-radius: 1.2em;
    border: none;

    background-color: var(--main-background);
    color: var(--button-color);

    user-select: none;

    transition: background-color 0.2s;
}

button:hover
{
    background-color: #383a3e;
}


hr
{
    margin-left: -0.5em;
    width: 95%;
}


label
{
    transition: filter 0.4s;
}


.tooltip
{
    visibility: hidden;

    z-index: 3;
    position: absolute;

    text-align: center;

    width: 12ch;

    margin: 0.75em 0 0 -5ch;
    padding: 0.25em 0.25em 0.1em 0.25em;

    pointer-events: none;

    border-radius: 0.25em;
    background-color: var(--button-color);
}

.visible-tooltip
{
    visibility: visible;
}





/* =============== For details and main pages =============== */

.model, .module
{
    border-radius: .5em;
    background-color: var(--element-background);

    max-width: 100%;

    transition: filter 0.65s;
}

.model:hover, .module:hover
{
    filter: brightness(108%);
}



table
{
    text-align: left;
}


thead
{
    background-color: #28292e;
    font-size: 1.75em;
}

tr
{
    width: 90%;
}


td, th
{
    padding: 0.5em 0.5em 0.5em 0.5em;
}



.module-name
{
    font-size: 1.75em;
}

.process-name-per-module
{
    font-size: 1.3em;
}



.model-anchor, .module-anchor
{
    padding-top: 10em;
}


.model-content, .module-content
{
    padding-top: 0.5%;
    padding-bottom: 0.5%;

    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 2%;
    margin-right: 2%;
}



/* =============== For details page only =============== */

#back-button
{
    position: sticky;
    inset-block-start: 0.15em;
    z-index: 2;

    font-size: 3em;

    margin-left:0.1em;

    padding: 0.1em 0.1em 0 0.1em;

    border-radius: 0.25em;

    background-color: var(--back-button-background);
    color: var(--button-color);

    user-select: none;

    transition: background-color 0.2s, color 0.2s;;
}

#back-button:hover
{
    background-color: #383a3ed0;
    color: var(--back-button-hover-color);
    box-shadow: var(--box-shadow-black-very-low-alpha) 0 0.25em 0.75em;
}


#back-button + span
{
    position: fixed;
    inset-block-start: 1.25em;
    z-index: 1;

    visibility: hidden;

    margin-left: -5em;
    margin-bottom: 8em;

    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 1em;
    padding-right: 1em;

    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;

    opacity: 0;

    color: var(--back-button-hover-color);
    background-color: #3e4044d0;

    box-shadow: #00000028 0 0.25em 0.75em;

    transition: opacity 0.8s ease-in, margin-left 0.6s ease-out;
}

#back-button:hover + span
{
    visibility: visible;
    margin-left: 0;
    opacity: 1;
}



#module-table-history, #model-table-history
{
    width: 95%
}

.darker
{
    background-color: #32353b;
}






/* =============== For main page only =============== */


#progress-bar h2
{
    text-align: center;
    cursor: default;
    user-select: none;
}


#bar
{
    display: block;
    position: relative;

    margin-top: 20%;
    margin-left: calc(50% - 5em);

    width: 10em;
    height: 10em;
}

#bar div
{
    display: block;
    position: absolute;

    box-sizing: border-box;


    margin: 1em;

    width: 8em;
    height: 8em;

    border: 1em solid #fff;
    border-radius: 50%;

    animation: bar 1.2s cubic-bezier(0.5, 0, 0.5, 1);
    border-color: #fff transparent transparent transparent;
}

#bar div:nth-child(1)
{
    animation-delay: -0.45s;
}

#bar div:nth-child(2)
{
    animation-delay: -0.3s;
}

#bar div:nth-child(3)
{
    animation-delay: -0.15s;
}

@keyframes bar
{
    0%
    {
        transform: rotate(0deg);
    }

    100%
    {
        transform: rotate(360deg);
    }
}





#tiny-summary
{
    top: -2%;

    z-index: 1;
    position: fixed;

    font-size: 2.5em;

    margin-left: 1em;

    display: none;

    cursor: default;
    user-select: none;

    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;

    background-color: var(--back-button-background);

    transition: background-color 0.4s ease-out;
}

#tiny-summary:hover
{
    background-color: var(--back-button-hover-color);
}


#summary
{
    padding-top: 1em;
    padding-bottom: 1.75em;

    margin-top: -0.5em;
    margin-left: 0em;
    margin-right: 0em;

    width: 100%;

    top: 0;
    position: sticky;
    z-index: 2;

    user-select: none;

    display: block;
}

#summary-content
{
    padding-top: 1em;
    padding-bottom: 1.75em;

    margin-top: -1em;
    background-color: #2e3035;

    border-bottom-left-radius: 1.75em;
    border-bottom-right-radius: 1.75em;

    box-shadow: var(--box-shadow-black-very-low-alpha) 0 0.25em 0.75em;
}


#search-bar
{
    float: left;
    padding: 0.25em 0.25em;

    margin-top: 0.6em;
    margin-left: 1.5em;
    margin-right: 2em;

    color: var(--search-color);
    background-color: var(--search-background-color);

    border-radius: 0.25em;
    border: 0;
    outline: none;

    cursor: text;


    transition: background-color 0.2s;
}


#search-bar a
{
    padding-top: 0.3em;
    padding-bottom: 0.5em;
}

#search-bar a span
{
    margin-left: 0.15em;
    margin-right: 0.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
}


#search-bar-field
{
    float: left;
    padding: 0.25em 0.25em;

    margin-right: 1em;

    color: var(--search-color);
    background-color: var(--search-background-color);

    border-radius: 0.25em;
    border: 0;
    outline: none;


    transition: background-color 0.2s;
}

#search-bar-field::placeholder
{
    font-size: 80%;
}


#search-icon
{
    display: inline-block;

    font-size: 1.5em;

    padding: 0 0.35em 0 0.5em;
    margin: 0.4em 1em 0 -1.2em;

    transform: scale(-1, 1);

    border-radius: 0.2em;
    background-color: var(--search-background-color);

    transition: filter 0.2s;
}

#search-icon:hover
{
    filter: brightness(105%);
}

#search-icon:active
{
    background-color: #404245;
}


.summary-name, .summary-name:visited
{
    display: block;

    color: var(--search-color);
    text-decoration: none;
}



#summary-elements
{
    list-style-type: none;

    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.8em;

    width: 22em;

    border: 0;
    border-radius: 0.5em;

    color: var(--main-color);
    background-color: var(--search-background-color);
}



#model-selection, #module-selection
{
    display: none;
}


#model-selection + label, #module-selection + label
{
    margin-left: 0.5em;
    cursor: pointer;
    transition: filter 0.2s;
}

#model-selection + label:hover, #module-selection + label:hover
{
    filter: brightness(80%);
}


#model-selection + label > img, #module-selection + label > img
{
    width: 2.5em;

    margin-left: 0.5em;
    vertical-align: bottom;

    cursor: pointer;
    transition: filter 0.2s;
}

#model-selection + label > img:hover, #module-selection + label > img:hover
{
    filter: brightness(80%);
}



.checkcombobox
{
    display: inline-block;
    margin-left: 1em;
    color: #b9bbbc;
}


.checkcombobox span
{
    background-color: var(--search-background-color);
}

.checkcombobox ul
{
    background-color: var(--element-background);
}

.checkcombobox li:hover
{
    background-color: #2e47c5 !important;
}


.author-selection li
{
    background-color: var(--element-background) !important;
}

.author-selection .checked
{
    background-color: #1e37b5 !important;
}



.hide-show-selection li
{
    background-color: #1e37b5 !important;
}

.hide-show-selection .checked
{
    background-color: var(--element-background) !important;
}




#results-informations
{
    margin-left: 3em;
}

#close-summary
{
    display: none;

    font-size: 2.5em;
    width: 0.85em;

    margin-left: 1em;

    cursor: default;
    user-select: none;

    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;

    background-color: var(--back-button-background);
    box-shadow: var(--box-shadow-black-very-low-alpha) 0 0.25em 0.75em;

    transition: background-color 0.4s ease-out;
}

#close-summary:hover
{
    background-color: var(--back-button-hover-color);
}




#no-content
{
    text-align: center;
    margin-top: 18%;

    color: #3c3e43;

    font-size: 5em;

    cursor: default;
    user-select: none;
}




#models-anchor, #modules-anchor
{
    padding-top: 4.5em;
}

#models-anchor h1, #modules-anchor h1
{
    text-align: center;
}


.no-update
{
    display: block;
    text-align: center;

    color: #43464c;

    cursor: default;
    user-select: none;

    transition: color 0.5s;
}

.model:hover .no-update, .module:hover .no-update
{
    color: #4b4e55;
}



.model-dimensions, .module-dimensions
{
    font-size: 1.5em;
    text-align: center;
}



#module-model-hr
{
    margin: 0;
    width: 100%;
}



.creation
{
    color: #898bec;
}

.update
{
    color: #e98b8c;
}


.inouts-column
{
    text-align: left;
    padding-left: 0.75em
}



.model-details-button, .model-details-button:visited, .module-details-button, .module-details-button:visited
{
    text-decoration: none;

    display: block;
    text-align: center;

    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 15%;
    padding-right: 15%;

    margin-left: 5%;


    border-radius: 1em;
    border: 0;

    color: var(--main-color);
    background-color: var(--main-background);

    user-select: none;

    transition: background-color 1s;
}

.model-details-button:hover, .module-details-button:hover
{
    background-color: #33353a;
}



.model-description, .module-description
{
    text-align: justify;
}




#top-arrow
{
    z-index: 2;

    padding-right: 0.5em;
    padding-top: 0.33em;
    padding-left: 0.5em;

    font-size: 2em;
    font-weight: bold;

    bottom: 0.4em;
    right: calc(50% - 1.5em);

    text-align: right;
    position: fixed;

    border-radius: 100%;
    color: #000000;
    background-color: #bfbbdbaf;

    text-decoration: none;
    user-select: none;

    transition: color 0.33s, background-color 0.33s;
}

#top-arrow:visited
{
    color: #000000;
    text-decoration: none;
}

#top-arrow:hover
{
    color: #ffffff;
    background-color: #16191f00;
}



footer
{
    position: sticky;
    inset-block-start: 95%;
}


footer p
{
    display: inline-block;
    position: sticky;

    font-size: 66%;

    bottom: 0;
    text-align: center;

    width: 100%;
}





/* =============== Responsive =============== */

@media only screen and (max-width: 1400px)
{
    #tiny-summary
    {
        display: none;
    }

    #close-summary
    {
        display: none;
    }

    #summary
    {
        display: block;
    }

    #search-bar
    {
        width: 11.2em;
        padding: 0 0 -0.1em;
        height: 1.25em;
    }

    #search-bar a
    {
        margin-top: -0.25em;
        float: right;
    }

    #search-bar-field
    {
        margin-top: 0.25em;
        width: 10em;
        height: 1.1em;
    }

    #summary-elements
    {
        max-width: 15em;
    }

    #top-arrow
    {
        font-size: 1.3em;
    }
}


@media only screen and (max-width: 1200px)
{
    #tiny-summary
    {
        display: block;
    }

    #close-summary
    {
        display: block;
    }

    #summary
    {
        inset-block-start: -15em;
    }

    #model-selection + label span, #module-selection + label span
    {
        display: none;
    }

     #model-selection + label > img, #module-selection + label > img
    {
        display: inline-block;
    }
}


@media only screen and (max-width: 1056px)
{
    #search-icon
    {
        margin-right: 0.1em;
    }

    .author-selection
    {
        position: absolute;
        margin: 0.5em 1em 0 calc(100% - 50em);
    }

    .hide-show-selection
    {
        position: absolute;
        margin: 3em 1em 0 calc(100% - 51.6em);
    }
}


@media only screen and (max-width: 831px)
{
    .author-selection
    {
        position: relative;
        margin: 0.5em 0 0 1.5em;
    }

    .hide-show-selection
    {
        position: relative;
        margin: 0.5em 0 0 1.5em;
    }
}