@import url("https://fonts.googleapis.com/css?family=Ubuntu");

:root {

    /*--body-color: rgb(86, 87, 93);*/
    /*--body-color-dark: rgb(62, 62, 66);*/
    /*--body-color-light: rgb(125, 127, 133);*/

    --body-color: #e2e2e2;
    --body-color-dark: #d9d9d9;
    --body-color-light: #f3f3f3;
    --body-color-superlight: #ffffff;

    --primary-color: #4f83d7;
    --primary-color-dark: #3c63a3;
    --primary-color-light: #5d9afd;


    --success-color: #337a32;

    --warn-color: #c4b30d;

    --info-color: #37598d;

    --error-color: #a61b1b;

    --text-color: black;
    --text-color-grey: rgb(173, 173, 173);
    --text-color-darkgrey: rgb(114, 114, 114);

    --heading-font: Futura,Trebuchet MS,Arial,sans-serif;
    --paragraph-font: var(--heading-font);


    --break-color: var(--primary-color);

    --nav-color: var(--body-color-superlight);
    --nav-ac-color: var(--primary-color);
    --sd-color: rgba(0, 0, 0, 0.2);

    --nav-text-color: black;

    --nav-text-font: var(--heading-font);


    --item-border-radius-small: 5px;
    --item-border-radius-large: 8px;

}

body::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    /*background: rgb(150, 150, 150);*/

}


body::-webkit-scrollbar-thumb {
    background: var(--primary-color-light);
    border-radius: 2px;
}
body::-webkit-scrollbar-thumb:active {
    background: var(--primary-color);
}

::selection {
    background: var(--primary-color);
    color: white;
}


body
{
    margin: 0;
    padding: 0;
    font-family: var(--paragraph-font);
    color: var(--text-color);
    overflow-x: hidden;

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

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

body:has(main){
    background-color: var(--body-color-dark);

}



/*!*/


a {
    text-decoration: none;
    color: var(--primary-color);
    transition: 0.1s ease background, 0.1s ease color;
}
a:hover, a:active, a:focus, a#active{
    color: var(--primary-color-dark);
}
h1{
    font-size: 2.25rem;
    margin: 25px 0 0 0;

}
p{

}
b.primaryBold, p.primaryBold{
    color: var(--primary-color);
    margin-left: 10px !important;
}


/*!*/

div.lineBreak{
    height: 2px;
    width: 100%;
    background-color: var(--break-color);
}

div.lineBreak.thick{
    height: 3px;
}

.requiredStar {
    font-size: inherit;
    font-weight: 800;
    color: var(--error-color);
}

p.dataCode{
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-color-darkgrey);
    margin: 0 0 2px !important;
}

@media screen and (max-width: 650px) {
    p.dataCode {
        text-align: center;
    }
}

/*!Progress bar*/

.progress-bar {
    width: 100%;
    height: 20px;
    background-color: var(--body-color-superlight);
    border-radius: var(--item-border-radius-small);
}
#progress {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: var(--item-border-radius-small);
}

/*!*/

/*LAZY IMAGE*/

div.lowerSpot div.loadedBox div.lazyImage img{
    position: relative;

    height: 100%;
    width: 100%;
    object-fit: cover;
}