body
{
    margin: 0px 10vw 100px 10vw;
    direction: rtl;
    font-family:'Segoe UI', Tahoma;
    /*font-family:default-font,'Segoe UI', Tahoma;*/
    /*font-size:1vw;*/
    overflow-y:scroll;
}

input, textarea, select, button
{
    font:inherit;
}

DIV.header
{
    margin: 20px 0px 0px 0px;
    display:flex;
    flex-wrap:wrap;
    border-bottom-width:1px;
    border-bottom-color:var(--color-border);
    border-bottom-style:double;
}

DIV.header IMG
{
    max-width:80vw;
}

DIV.menu
{
    display:flex;
    flex-wrap:wrap;
    margin:10px;
}

DIV.menuitem
{
    align-self:center;
    margin:10px;
}

DIV.menuitem A
{
    color: #259dad;
}

DIV.breadcrumb
{
    width: 50%;
    margin: auto;
    font-weight: bold;
    text-align: center;
    border-bottom: solid var(--color-highlight) medium;
    padding-bottom:5px;
    background:var(--color-background);
}

DIV.views_container
{
    width: 75%;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border-bottom: dotted silver;
    border-bottom-width: thin;
}

DIV.views
{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    justify-content:space-around;
}

DIV.views > DIV.view
{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    grid-column-gap: 5px;
    vertical-align: top;
    border-bottom: solid transparent thin;
    border-top: solid transparent thin;
    padding-bottom:5px;
    margin-left:10px;
}

DIV.views > DIV.view:hover
{
    border-bottom: solid var(--color-highlight) thin;
}

DIV.views > DIV.view.active
{
    border-bottom: solid var(--color-highlight) medium;
}

DIV.views > DIV.view.selected
{
    border-bottom: solid var(--color-highlight) medium;
    animation-name: bounceEffect;
    animation-duration: 1.0s;
    animation-fill-mode: forward;
}

DIV.views A
{
    color: inherit;
}

DIV.views A:link
{
    text-decoration: none;
}

DIV.views A:visited
{
    text-decoration: none;
}

DIV.views A:hover
{
    text-decoration: none;
}

DIV.views A:active
{
    text-decoration: none;
}

DIV.bullete
{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    align-self: center;
    vertical-align: top;
}

DIV.pagemessage
{
    width:auto;
    margin-top:20px;
    padding:5px;
    text-align:center;
    background:var(--color-message-background);
    box-shadow:3px 3px 4px rgba(0,0,0,0.4);
}

DIV.alert
{
    width:auto;
    padding:5px;
    text-align:center;
    background:#ffff00;
    box-shadow:3px 3px 4px rgba(0,0,0,0.4);
}

A
{
    color: var(--color-link);
}

A:link
{
    text-decoration: none;
}

A:visited
{
    text-decoration: none;
}

A:hover
{
    text-decoration: underline;
}

A:active
{
    text-decoration: underline;
}

A.external
{
    background-position:center left;
    background-repeat:no-repeat;
    background-image: url(../img/externallink.svg);
    padding-left:13px;
}



.tablinks {
    overflow: hidden;
    border: 1px solid var(--color-background);
    //background-color: #f1f1f1;
    border-width: 0px;
    border-bottom-width: 1px;
}

    .tablinks button {
        background-color: #f1f1f1;
        float: right;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-color: #f1f1f1;
        border-radius: 20px 20px 0px 0px;
        border-inline-start: 1px solid gray;
        margin-top:2px;
    }

        .tablinks button:hover {
            background-color: #ddd;
            border-bottom-color: #ddd;
        }

        .tablinks button.active {
            background-color: var(--color-background);
            animation: bounceEffect 0.5s;
            border-bottom-color: var(--color-highlight);
            border-inline-start-color: #333
        }

.tabcontent {
    display: none;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-top: none;
    animation: fadeEffect 1s;
}

.tabcontent.active
{
    display:block;
}

.tooltip
{
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext
{
    visibility:hidden;
    max-width:300px;
    background-color:var(--color-background);
    text-align:center;
    padding: 10px;
    border-radius: 5px;
    position:absolute;
    z-index:1;
    box-shadow:0 3px 4px rgba(0,0,0,0.4);
}

.tooltip:hover .tooltiptext
{
    visibility:visible;
}


DETAILS
{
    display:block; /*Edge*/
    margin:15px 0 0 0;
    font-size:inherit;
}

DETAILS > SUMMARY
{
    display:list-item; /*Edge*/
    cursor:pointer;
    padding:8px;
    position:relative;
    border-bottom:solid 1px var(--color-border);
}

DETAILS > SUMMARY:hover
{
    border-bottom-color:var(--color-highlight);
}

DETAILS[open] > SUMMARY
{
    border-bottom-width:2px;
    border-bottom-color:var(--color-highlight);
}

DETAILS > DIV
{
    display:none;
    margin-top:20px;
    margin-right:10px;
    padding-right:5px;
    animation: bounceEffect 1s;
    border-right:1px solid var(--color-background);
}

DETAILS[open] > DIV
{
    display:block;
}

DIV.dialogContainer
{
    display:none;
    position:fixed;
    z-index:1001;
    background:black;
    width:100%;
    height:100%;
    left:0;
    top:0;
    opacity:0.8;
}

DIV.dialog
{
    position:fixed;
    z-index:1001;
    background:black;
    width:90%;
    height:90%;
    left:0;
    top:0;
}

IFRAME
{
    border-width:0px;
    width:100%;
    height:50vh;
}

:root
{
    --color-highlight-R: 255;
    --color-highlight-G: 165;
    --color-highlight-B: 00;
    
    --color-highlight: rgb(var(--color-highlight-R), var(--color-highlight-G), var(--color-highlight-B));
    
    /*--color-wait-R: calc(var(--color-highlight-R) - 100);
    --color-wait-G: calc(var(--color-highlight-G) - 100);
    --color-wait-B: calc(var(--color-highlight-B) - 0);*/
    
    --color-wait-R: 201;
    --color-wait-G: 185;
    --color-wait-B: 169;
    
    --color-wait-0: rgba(var(--color-wait-R), var(--color-wait-G), var(--color-wait-B), 0.0);
    --color-wait-1: rgba(var(--color-wait-R), var(--color-wait-G), var(--color-wait-B), 0.5);
    --color-wait-2: rgba(var(--color-wait-R), var(--color-wait-G), var(--color-wait-B), 1.0);
    
    --color-inactive: #ccc;
    --color-background: #ccc;
    --color-border: #ccc;
    
    --color-message-background: #abc;
    
    --color-link:#008000;
    --color-alert:#ffff00;
}

.color1
{
    background: red;
}

.color2
{
    background: blue;
}

.color3
{
    background: orange;
}

.color4
{
    background: green;
}

.color5
{
    background: cyan;
}

.color6
{
    background: magenta;
}

.color7
{
    background: yellow;
}

.color8
{
    background: #8bc34a;
}

/*@font-face
{
    font-family:default-font;
    src:url(../font/segoeui.ttf);
}

@font-face
{
    font-family:default-font-bold;
    src:url(../font/segoeuib.ttf);
}*/

@keyframes waitEffect
{
    000% {background: linear-gradient(to left, var(--color-wait-0), var(--color-wait-1), var(--color-wait-2), var(--color-wait-1), var(--color-wait-0));}
    020% {background: linear-gradient(to left, var(--color-wait-0), var(--color-wait-0), var(--color-wait-1), var(--color-wait-2), var(--color-wait-1));}
    040% {background: linear-gradient(to left, var(--color-wait-1), var(--color-wait-0), var(--color-wait-0), var(--color-wait-1), var(--color-wait-2));}
    060% {background: linear-gradient(to left, var(--color-wait-2), var(--color-wait-1), var(--color-wait-0), var(--color-wait-0), var(--color-wait-1));}
    080% {background: linear-gradient(to left, var(--color-wait-1), var(--color-wait-2), var(--color-wait-1), var(--color-wait-0), var(--color-wait-0));}
    100% {background: linear-gradient(to left, var(--color-wait-0), var(--color-wait-1), var(--color-wait-2), var(--color-wait-1), var(--color-wait-0));}
}

@keyframes flashEffect
{
    00% {background: var(--C0);}
    30% {background: var(--C1);}
    60% {background: var(--C2);}
    90% {background: var(--C1);}
    100% {background: var(--C0);}
}

@keyframes dropEffect
{
    00% {transform-origin:center; opacity:1;}
    20% {transform: translate3d(0, 20px, 0) rotate3d(0, 0, 1, -10deg); opacity: 1;}
    40%, 
    45% {transform: translate3d(0, -120px, 0) rotate3d(0, 0, 1, 10deg); opacity: 1;}
    100% {transform: translate3d(0, 200px, 0) rotate3d(0, 0, 1, 10deg); opacity: 0;}
}

@keyframes bounceEffect_
{
    00% {transform: translateX(-50px); animation-timing-function:ease-in; opacity: 0;}
    38% {transform: translateX(0px); animation-timing-function:ease-out; opacity: 1;}
    55% {transform: translateX(-6px); animation-timing-function:ease-in; }
    72% {transform: translateX(0); animation-timing-function:ease-out; }
    81% {transform: translateX(-3px); animation-timing-function:ease-in; }
    90% {transform: translateX(0); animation-timing-function:ease-out; }
    95% {transform: translateX(-1px); animation-timing-function:ease-in; }
    100% {transform: translateX(0); animation-timing-function:ease-out;}
}

@keyframes bounceEffect
{
    0% {transform: scaleY(0.01); opacity:0; background:red;}
}

@keyframes pulseEffect
{
    00% {transform: scale3d(1,1,1);}
    50% {transform: scale3d(1.05,1.05,1.05);}
    100% {transform: scale3d(1,1,1);}
}

@keyframes fadeEffect
{
    from {opacity : 0;}
    to { opacity : 1;}
}

@keyframes shadowEffect
{
    0% { box-shadow: none;}
    100% {box-shadow: -5px 8px 11px 0px black;}
}

@keyframes fallEffect
{
    00% {transform: translateY(-50px); animation-timing-function:ease-in; opacity: 0;}
    38% {transform: translateY(0px); animation-timing-function:ease-out; opacity: 1;}
    55% {transform: translateY(-6px); animation-timing-function:ease-in; }
    72% {transform: translateY(0); animation-timing-function:ease-out; }
    81% {transform: translateY(-3px); animation-timing-function:ease-in; }
    90% {transform: translateY(0); animation-timing-function:ease-out; }
    95% {transform: translateY(-1px); animation-timing-function:ease-in; }
    100% {transform: translateY(0); animation-timing-function:ease-out;}
}
.cidoctree
{
    direction:ltr;
}

.cidoctree button
{
    float: none;
    display: block;
}

.cidoctree .tabcontent
{
    padding: 10px;
    border: 1px solid var(--color-border);
    border-left:none;
}

.cidoctree .tabcontrol
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    vertical-align: top;
}

.cidoctree .tabcontents
{
    vertical-align: top;
    padding: 0px;
}

.cidoctree .tabcontent DIV.levelprops
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    width: 100%;
}

.cidoctree .tabcontent DIV.propsection
{
    width: 100%;
}

.cidoctree .tabcontent DIV.propsectionheader
{
    color: white;
    background: black;
}

.cidoctree .tabcontent DIV.prop
{
    width: 100%;
    border-bottom: 1px solid var(--color-border);
}

.cidoctree .tabcontent DIV.propheader
{
    background: rgba(0,0,255,0.1);
    text-align: center;
}

.cidoctree .tabcontent DIV.propvalues
{
    padding: 10px;
    word-break:break-word;
}

.cidoctree .tabcontent DIV.props0
{
    border:1px solid var(--color-background);
    vertical-align: top;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.cidoctree .tabcontent DIV.props1
{
    border:1px solid var(--color-background);
    vertical-align: top; 
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
/*@import url("common.css");
@import url("cidoctree.css");*/

DIV.cidoctree
{
    direction: ltr;
}

DIV.gauge
{
    display:flex;
    border-bottom-style: double;
    border-right-style: double;
    border-color: Black;
    border-width: 1px;
    height:5px;
    margin:10px;
}

DIV.gaugeitem
{
    height:100%;
}