/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');*/
@import url('fonts.css');
@import url('colors.css');
@import url('normalize.css');
@import url('header.css');
@import url('nav.css');
@import url('nprogress.css');
@import url('custom_scroll.css');
@import url('help.css');
@import url('content_section.css');

main
{
    margin:          0 auto;
    display:         flex;
    align-items:     stretch;
    align-content:   stretch;
    justify-content: flex-start;
    width:           100%;
    min-height:      calc(100vh - 61px);
    transition:      all 0.3s;
}

@media screen and (max-width: 1280px)
{
    main.toggled
    {
        width:        calc(100% + 200px);
        padding-left: 200px;
    }

    main.toggled:before
    {
        content:    '';
        position:   fixed;
        left:       0;
        top:        0;
        display:    block;
        height:     100vh;
        width:      100vw;
        background: hsla(var(--main), 0.25);
        z-index:    89;
        animation:  maintoggled 0.3s forwards;
    }
}

@keyframes maintoggled
{
    0%
    {
        background: hsla(var(--main), 0);
    }

    100%
    {
        background: hsla(var(--main), 0.25);
    }
}

@media screen and (max-width: 640px)
{
    main.toggled
    {
        width:        calc(100% + 200px);
        padding-left: 200px;
    }
}

article
{
    padding: 5px;
    width:   100%;
}

/*article > div
{
    width: 100%;
}*/

/*Popup*/
.k-i-minify::before, .k-i-window-minify::before
{
    content: "\e136"
}

.k-i-minify.on::before, .k-i-window-minify.on::before
{
    content: "\e135";
}

.k-i-minify.on, .k-i-window-minify.on
{
    transform: scaleX(-1)
}

.window-container
{
    overflow: hidden;
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
}

.window-container .window-content-container
{
    padding:    10px 16px 0;
    height:     auto;
    max-height: 100%;
    overflow:   auto;
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    bottom:     72px;
}

.window-container .window-buttons-container
{
    padding:  10px 16px 0;
    overflow: auto;
    position: absolute;
    height:   40px;
    left:     0;
    right:    0;
    bottom:   0;
}

.k-overlay
{
    max-width:  100vw;
    max-height: 100vh;
}

.k-widget.k-window,
.k-window.k-state-focused
{
    color:       hsl(var(--main));
    font-family: var(--font);
    margin:      0 0 0 -5px;
    border:      none !important;
    box-shadow:  0 10px 30px -10px hsla(var(--main), 0.4) !important;
    max-width:   calc(100vw - 10px);
    max-height:  100vh;
}

.k-window.k-state-focused
{
    box-shadow: 0 10px 30px -10px hsla(var(--main), 0.6) !important;
}

.k-window .k-header
{
    font-weight:   bold;
    background:    hsla(var(--main), 0.05);
    border:        5px solid hsl(var(--second));
    border-bottom: none;
    width:         100%;
}

.k-window-title
{
    color: black;
}

.window-container .window-buttons-container button
{
    margin:   0 5px 5px 0;
    position: relative;
}

.window-container .window-buttons-container button:last-of-type
{
    margin-right: 0;
}

.window-container .window-buttons-container
{
    padding-bottom:  11px;
    height:          auto;
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    align-content:   center;
    justify-content: space-between;
}

.window-buttons-primary-container,
.window-buttons-secondary-container
{
    display:         inline-flex;
    align-items:     center;
    align-content:   center;
    justify-content: flex-start;
}

.k-window.minimized .k-prompt-container, .k-window.minimized .k-window-content
{
    padding: 0;
}

.k-button.k-bare,
.k-button.k-bare:before
{
    background: hsl(var(--active));
}

.k-i-close:before,
.k-i-group-delete:before
{
    color:      hsl(var(--main));
    background: hsl(var(--active));
    border:     1px solid hsla(var(--main), 0.2);
}

.k-i-close:hover:before,
.k-i-group-delete:hover:before
{
    color:      hsl(var(--active));
    background: hsl(var(--main));
    border:     1px solid hsla(var(--main), 0.2);
}

button.reload_me
{
    padding:  2px 3px;
    position: fixed;
    left:     5px;
    bottom:   5px;
}

.toggled button.reload_me
{
    left:      -10px;
    bottom:    25px;
    transform: rotate(-90deg);
}


.k-notification
{
    padding: 8px !important;
}

.k-notification-error,
.k-notification-warning,
.k-notification-info,
.k-notification-success
{

    color:       hsl(var(--second)) !important;
    font-weight: bold;
    border:      1px solid white !important;
    box-shadow:  0 10px 20px -10px hsla(var(--main), 0.4) !important;
}

.k-notification-content
{
    line-height: 13px !important;
}

.k-notification-error
{
    background: hsl(var(--red)) !important;
}

.k-notification-warning
{
    background: hsl(var(--brown)) !important;
}

.k-notification-info
{
    background: hsl(var(--blue)) !important;
}

.k-notification-success
{
    background: hsl(var(--green)) !important;
}

.k-window .k-icon:not(.k-i-close):before,
.k-i-filter::before,
.k-grid a
{
    color: hsl(var(--main)) !important;
}

.k-button-icontext
{
    font-size:   8pt !important;
    font-weight: bold;
}

a.k-grid-Details:before
{
    content:     '\e13d';
    font-family: WebComponentsIcons;
    font-size:   11pt;
    font-weight: normal;
    line-height: 16px;
    background:  hsl(var(--active));
    color:       hsl(var(--main));
    border:      1px solid hsla(var(--main), 0.2);
    margin:      0 3px 0 -4px;
    display:     block;
    width:       16px;
    height:      16px;
    position:    static;
    opacity:     1;
}

a.k-grid-Details:hover:before
{
    opacity:    1;
    color:      hsl(var(--active));
    background: hsl(var(--main));
}

/*#Inv table*/
#inv
{
    color: hsl(var(--main));
}

#inv table
{
    border: 1px solid hsl(var(--red));
    height: 100%;
}

/*Popup titlebar*/
.k-window-titlebar
{
    border: none !important;
}

.k-window-titlebar .k-window-title
{
    font-size:       13pt;
    font-weight:     bold;
    flex:            0 1 auto;
    display:         flex;
    align-items:     center;
    align-content:   center;
    justify-content: flex-start;
}

.k-window-titlebar .assigned
{
    font-size:      8pt;
    font-weight:    normal;
    text-transform: none;
    white-space:    nowrap;
    color:          hsl(var(--main));
    margin:         -3px 4px 0 4px;
    line-height:    16px;
    flex:           1;
    text-overflow:  ellipsis;
    overflow:       hidden;
}

.k-window-titlebar .watcher
{
    margin:     2px 6px 0 0;
    background: url('/i/view.svg') no-repeat center center/100% 100%;
    min-width:  16px;
    max-width:  16px;
    height:     16px;
    cursor:     pointer;
}

.k-window-titlebar .watcher.off
{
    background: url('/i/view_off.svg') no-repeat center center/100% 100%;
    opacity:    0.5;
}

.k-window-titlebar .k-window-actions
{
    margin-left: auto;
}