/* @import "./css/foo.css";  */



[interface_documentation]:empty:before {
    content: 'NOT DOCUMENTED YET!';
    border: 1px solid;
    padding: 1em;
    display: inline-block;
    font-size: 2em;
}



/*LAYOUT*/
#layout_switcher {
    cursor: pointer;
}

#layout_switcher[layout='1']:before {
    content: '';
    text-align: center;
    border-left: 1px dashed;
    height: 1em;
    color: white;
    margin-left: 50%;
    display: inline-block;
}

#layout_switcher:active {
    background: rgba(255, 255, 255, .7) !important;
}



[forced_layout='1'] #MAIN,
#MAIN[layout='1'] {
    margin-right: 0;
    width: 60%;
}

#left_side_viewer[layout='1'],
[forced_layout='1'] #left_side_viewer {
    width: 40%;
    border-right: 1px dashed #ccc;
    z-index: 100;
}

[forced_layout='1'] #layout_switcher {
    /* display: none; ma incurca */
}




#interface_tools {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    padding: .5em .5em .5em .5em;
    margin-bottom: .5em;
    display: none;
    margin-bottom: 3em;
}

#global_tools {
    position: relative;
    background: white;
    padding: .5em .5em 0 .5em;
    margin-bottom: .5em;
    margin-top: 3em;
}

[edit_switch_active] {
    background: orangered;
    /* color: red; */
    /* box-shadow: inset 0 0 2px 0px rgb(60 80 100 / 98%); */
    /* background: white; */
    outline: 1px double #f83807;
    outline-offset: -2px;
}

#exception_flag {
    font-size: 1.1em;
    display: inline-block;
    /* padding: .7em 1em .5em 1em; */
    padding: 0.5em 1em 0.5em .5em;

    cursor: pointer;
    vertical-align: top;
    overflow: hidden;
    padding-left: 2em;
    position: relative;
}

#exception_flag:empty,
#exception_flag[inutil] {
    display: none;

}

#exception_flag:before {
    content: "\f6bb";
    font-family: mtso;
    font-size: 1em;
    font-weight: 100;
    position: absolute;
    left: .5em;
}









#all_menu_panels ul li {
    list-style: none;
}

#all_menu_panels>ul {
    float: left;
    margin-right: 3em;
    border-left: 2px solid;
    padding: 0 0 0 .5em;
}

#all_menu_panels fieldset {
    border-radius: .3em;
    border-color: .8px solid #aaa;
    margin-bottom: 2em;
    background: rgba(255, 255, 255, .2);
    position: relative;
    color: inherit;
    padding-top: 2em;
}

legend {
    font-size: .9em;
    font-weight: bold;
    padding: .2em .5em;
    width: auto;
    border-bottom: none;
    color: inherit;
    margin-bottom: 0;
}

#all_menu_panels fieldset legend {
    letter-spacing: 1px;
    font-weight: normal;
    background: rgb(71, 71, 71, .88);
    /*    font-size:.8em;*/
    box-shadow: 0 1px 4px gray;
}

#all_menu_panels[hide_children] * {
    display: none !important;
}


#all_menu_panels x-a {
    display: inline-block;
    padding: .3em .5em;
    /* font-family: Thin, monospace; */
    /* font-size: .9em; */
    margin: 0 1em 1em 0;
    cursor: pointer !important;

    /* white-space: nowrap; */
    vertical-align: middle;
    touch-action: manipulation;
    user-select: none;
    background-image: none;
    box-sizing: border-box;
    min-width: 1.5em;
    text-align: center;
    text-decoration: none !important;
    border: .7px solid transparent;
    border-radius: 3px;
    color: initial;
    border: .8px solid #aaa;
    /*background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);*/
    background: -webkit-linear-gradient(top, #fff 0%, #e1e0e0 100%);
    outline: none;
    /* transition: all .1s; */
    opacity: .9
}



#all_menu_panels [contrast_btn] x-a {
    background: -webkit-linear-gradient(top, #fff 0%, #9b9b9b 100%);

}

#all_menu_panels x-a:hover {
    /* outline: .7px solid #ffffff66; */
    opacity: 1;
    ;
    /* box-shadow: 0px 1px 2px #00000066; */
}



#all_menu_panels a {
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: .9em;
}


#all_menu_panels fieldset>div {
    margin: 0 0 .5em 0;
}

#all_menu_panels fieldset>div:last-child {
    margin: 0;
}


#all_menu_panels x-a[act_to_intf_button] {
    padding: 0;
    overflow: hidden;
}

#all_menu_panels legend {
    position: relative;
    padding-right: 3em;
}

#all_menu_panels x-a label {
    background: rgb(71, 71, 71);
    display: block;
    color: white;
    text-align: left;
    padding-left: .5em;
    position: relative;
    padding-right: 2em;
}

#all_menu_panels x-a [what] {
    padding: .2em 1em;
    /* padding: .2em 0.35em 0.2em 2.5em; */
    font-size: 1.2em;
    text-align: right;
}


#all_menu_panels x-a [who] {
    text-align: right;
    padding-right: .5em;

    font-weight: 400;
    font-size: .9em;
    text-wrap: nowrap;
    float: right;
    opacity: .5;
}

#all_menu_panels x-a:not([head_action]) {
    min-width: 9em;
    display: inline-block;
}

x-a[act_to_intf_button] icon {
    /* line-height: 0; */
    /* font-size: 1.5em; */
    font-weight: 200;
    transform: translate(0, 0em);
    /* display: block; */
    margin: 0em .5em 0 0;
    /* color: rgba(0, 0, 0, .6); */
    /* opacity: .7; */
}

[nav_btn_group] {
    display: inline-block;
    margin: 0 3em 3em 0;
    border-top: 2px solid #474747;
    padding-top: 3px;
}

#all_menu_panels [nav_btn_group] x-a {
    margin-bottom: 1em;
}

#all_menu_panels [nav_btn_group] x-a:last-child {
    margin-right: 0;
}

[nav_btn_group] {
    position: relative;
    padding: 1.5em 1em 0 1em;

    border: none;
    border-radius: .5em;
    background: rgba(0, 0, 0, .15);
}


[nav_btn_group]:after {
    content: attr(nav_btn_group);
    position: absolute;
    top: -.8em;
    left: 1em;
    background: rgb(71, 71, 71);
    padding: 0 .3em;
    font-family: thin;
    letter-spacing: 1px;
}

[nav_btn_group]:before {
    content: "unit " attr(unit);
    top: -.8em;
    right: 1em;
    background: rgb(71, 71, 71);
    padding: 0 .5em;
    font-family: thin;
    color: #ffa;
    position: absolute;
    font-size: .8em;
}

#all_menu_panels [nav_btn_group] x-a {
    /* font-size: 1em; */
    min-width: auto;
}



[unit_id_sign] {
    font-weight: 100;
    position: absolute;
    right: 0em;
    background-color: #0a0a0ad6;
    padding: .1em .3em;
    /* min-width: 1.6em; */
    text-align: right;
    line-height: 1em;
    top: 0;
    font-family: 'Thin';
}






@media print {

    #t_bar,
    [opis_wrapper],
    #_corner {
        display: none;
    }

    [src='/img/flowchart_1.png'] {
        image-rendering: auto;
        height: 500px;
        width: auto;
        page-break-before: auto;
        /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
        page-break-after: auto;
        /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
        page-break-inside: avoid;
        /* or 'auto' */
    }

    [play_movie] {
        display: none;
    }
}


/*TOOLS PANEL*/
[tool_btn] {
    margin: 0 .5em .5em 0;
    /*    padding:.5em .5em .3em .5em;*/
    /* font-size: .8em; */
}









#interface_documentation_btn {
    position: relative;
    display: inline-block;
    margin: 0 2em 0 0;
    position: relative;
    vertical-align: top;
}

#interface_documentation_btn:before {
    /*    //content:'\2139';*/
    font-size: 1.3em;
    position: absolute;
    top: 0;
    left: -.5em;
    cursor: pointer;

}

#all_menu_panels x-a[head_action] {
    background: red;
    padding: 1em;
    color: white;
    font-size: 1.2em;
    margin-bottom: .2em
}


#memorize_editing_banner {
    border-top: .7px dashed gray;
    display: none;
    padding: .5em;
    /* background: #658e59; */
    background: #12620a;
    font-size: 1.3em;
    color: white;
    letter-spacing: 1px;
    font-family: thin;
}

[memorize] #memorize_editing_banner {
    display: block;
}






[tpl_wrapper][memorize]:after {
    content: attr(memorize) " MEMORIZE MODE";
    position: fixed;
    z-index: 100000000;
    background: rgba(0, 100, 0, .7);
    padding: .45em;
    color: white;
    top: 0;
    right: 0;
    font-size: 1.1em;
    letter-spacing: .5px;

    /* font-family: thin; */
    ;
}


[tpl_wrapper] {
    min-height: 90vh;
    padding-top: 1em;
}




/* GLOBAL */





:root {
    --default-background: rgba(72, 95, 83, 0.99);
}