* {
    box-sizing: border-box;
    font-family: inherit;
}

:root{
    --wrapper_margin: 40px;
    --hovered_text_color: #008ac4;
    --hovered_icon_filter: brightness(0) saturate(100%) invert(39%) sepia(33%) saturate(2058%) hue-rotate(163deg) brightness(100%) contrast(105%);

    --light_grey_icon_filter: brightness(0) saturate(100%) invert(66%) sepia(19%) saturate(125%) hue-rotate(126deg) brightness(86%) contrast(87%);
    --grey_icon_filter: brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(694%) hue-rotate(265deg) brightness(93%) contrast(94%);

    --white_icon_filter: brightness(0) saturate(100%) invert(94%) sepia(100%) saturate(122%) hue-rotate(288deg) brightness(116%) contrast(101%);
    --red_icon_filter: brightness(0) saturate(100%) invert(12%) sepia(79%) saturate(7400%) hue-rotate(7deg) brightness(109%) contrast(121%);

    @media(max-width: 800px){
        --wrapper_margin: 15px;
    }
}

body{
    margin: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;

    --header_maximized_heigth: 113.5px;
    @media(max-width: 1024px){
        --header_maximized_heigth: 146.5px;
    }

    --header_heigth: 113.5px;
    &:has(.w_header.minimized){--header_heigth: 83.5px;}
    &:has(.w_header.aside_minimized){--header_heigth: 83.5px;}

    @media(max-width: 1024px){
        --header_heigth: 146.5px;
        &:has(.w_header.minimized){--header_heigth: 46.5px;}
        &:has(.w_header.aside_minimized){--header_heigth: 46.5px;}
    }
}

.wrapper{
    --margin: 0 var(--wrapper_margin);

    max-width: 1920px;
    margin: auto;

    @media(max-width: 1920px){
        margin: var(--margin);
    }
}

.loader_container {
    --width: 8px;
    --heigth: 40px;
    --border-radius: 4px;
    --bg: var(--hovered_text_color);

    width: var(--loader_width, 100%);
    height: var(--loader_heigth,  50px);
    position: fixed;
    z-index: 100;
    top: var(--loader_top, 0);
    left: var(--loader_left, 0);

    background: #ffffffcf;

    display: none;
    align-items: center;
    justify-content: center;

    .loader{
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .left_line, .central_line, .right_line{
        height: var(--heigth);
        width: var(--width);
        background: var(--bg);
        border-radius: var(--border-radius);
    }
    .left_line{
        animation: animateLoader 0.5s 0.45s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
    }
    .central_line{
        animation: animateLoader 0.5s 0.3s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
    }
    .right_line{
        animation: animateLoader 0.5s 0.8s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
    }

    &.show{display: flex;}
}

hr{
    margin: var(--margin, 20px 0);
    border: 0;
    border-top: 1px solid #eeeeee;
}

@keyframes animateLoader {
  0%   { height: 48px}
  100% { height: 4px}
}