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;}
}
DIV.filtercontainer
{
    display:grid;
    grid-template-columns:1fr auto;
    border:1px solid var(--color-border);
    padding:5px;
    margin-top:20px;
}

DIV.filter
{
    display:flex;
    flex-wrap:wrap;
    
    --color-highlight:#ddb;
}

DIV.filter DIV.filteritem
{
    border:1px solid var(--color-border);
    padding:10px;
    margin:5px;
    border-radius:5px;
    white-space:nowrap;
    background-color:var(--color-highlight);
    
    background-position:5px center;
    background-repeat:no-repeat;
    background-image: url(../img/close.svg);
    padding-left:25px;
    
    box-shadow:3px 3px 5px 0px grey;
    cursor:pointer;
}

DIV.filter DIV.filteritem:hover
{
    background-color:inherit;
}

DIV.filter A
{
    color:inherit;
}

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

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

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






DIV.filterlist
{
    padding-right:15px;
    
    --color-filterlink:#42536c;
    --color-resourcelink:#c2c2d8;
}

DIV.filterlist DIV.filterlistitem
{
    display:grid;
    grid-template-columns:1fr auto;
}

DIV.filterlist DIV.filterlistitem:hover
{
    background:var(--color-background);
}

DIV.filterlist DIV.filterlistitem .filterlink
{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

DIV.filterlist DIV.filterlistitem:hover .filterlink
{
    white-space:pre-wrap;
}

DIV.filterlist DIV.filterlistitem .resourcelink
{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--color-resourcelink);
    text-align:center;
    display:none;
}

DIV.filterlist DIV.filterlistitem:hover .resourcelink
{
    display:inherit;
}

DIV.filterlist DIV.filterlistitem A
{
    color:var(--color-filterlink);
}

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

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

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

INPUT.customfilter_text
{
    max-width:90%;
}

SELECT.customfilter_select
{
    max-width:90%;
}
/*@import url("common.css");
@import url("filter.css");*/

DIV.input
{
    /*width: 100%;
    margin: auto;*/
    position:relative;
    margin-top: 50px;
    margin-bottom: 5px;
    text-align:center;
}

DIV.input #searchTerm
{
}

DIV.input #searchDropDown
{
    position:absolute;
    overflow-y:auto;
    max-height:20em;
    z-index:1;
    border:1px solid var(--color-background);
    background:#fff;
    left:50%;
    top:100%;
    transform: translate(-50%, 0);
    box-shadow:3px 3px 4px rgba(0,0,0,0.4);
    padding:5px;
    min-width:150px;
    display:none;
}

DIV.input #searchDropDown DIV.searchsuggestionitem.selected
{
    background : var(--color-background);
}

    DIV.input #searchDropDown DIV.searchsuggestionitem.userinput {
        font-weight: bold;
    }


    DIV.input #searchDropDown DIV.searchsuggestionitem.correction {
        font-style: italic;
    }

DIV.dataset
{
    width: 100%;
    
    animation-name: bounceEffect;
    animation-duration: 1.1s;
    animation-fill-mode:forwards;
}

DIV.datatable
{
    width: 100%;
}

DIV.tabcontrol.searchresult
{
    margin-top:30px;
}

DIV.resultitem
{
    display:grid;
    grid-template-areas: 
      'bullete thumbnail' 
      'bullete header' 
      'bullete matches' 
      'bullete snippet'
      'bullete related_image';
      grid-template-columns: 20px auto;
      grid-template-rows:auto auto auto auto auto;
    
    border-bottom: solid thin #C0C0C0;
    margin:10px;
    white-space:pre-wrap;
}

DIV.resultitem DIV.bullete
{
    grid-area:bullete;
    width:3px;
    height:auto;
    align-self:auto;
    border-radius:0%;
}

DIV.thumbnail
{
  display: flex;
  flex-wrap:wrap;
  grid-area: thumbnail;
  margin-bottom:15px;
}

DIV.thumbnail IMG
{
    height:120px;
    /*border-radius:10px;
    margin:10px;*/
    max-width:100%;
    box-shadow:4px 4px 4px rgba(0,0,0,.5);
    border:5px solid white;
    /*position:relative;*/
}

/*
DIV.thumbnail IMG::after
{
    display: block;
    //position:absolute;
    top:0;
    left:0;
    height:120px;
    width:120px;
    background:#ccc url('../img/brokenimage.svg') no-repeat center;
    content:'';
}*/

DIV.thumbnail IMG:hover
{
    box-shadow:7px 7px 7px rgba(0,0,0,.5);
    transform:scale(1.01);
}

DIV.thumbnail .stack
{
    box-sizing:border-box;
}

DIV.thumbnail .stack:before
{
    background:#ccc;
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-10;
    transform:rotate(5deg);
    /*border-radius:10px;
    margin:5px;*/
    max-width:100%;
    box-shadow:4px 4px 4px rgba(0,0,0,.5);
    border:5px solid white;
    box-sizing:border-box;
}

DIV.resultheader
{
    font-weight:bold;
    grid-area:header;
    
    overflow:hidden;
    text-overflow:ellipsis;
}

DIV.matches
{
    grid-area:matches;
}

DIV.snippet
{
    font-weight: lighter;
    color: #808080;
    vertical-align:top;
    
    grid-area: snippet;
    
    overflow:hidden;
    text-overflow:ellipsis;
}

DIV.related_images
{
    grid-area:related-image;
}

DIV.related_image IMG
{
    width:50px;
    height:50px;
}

DIV.wordcompletion
{
    display:grid;
    /*grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));*/
    grid-template-columns:1fr;
    grid-column-gap:10px;
    background-color: #fed;
}

DIV.wait
{
    min-height:5px;
    padding:0px;
    margin:0px;
    animation-name: waitEffect;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode:forwards;
}

#searchresult
{
    margin-top:20px;
}


.samplesearch
{
    margin-top:20px
}

.samplesearch .message
{
    margin: 20px;
    border-color: Red;
    font-weight: bold;
    text-align:center;
}

.samplesearch .sections
{
    /*display: flex;
    flex-wrap: wrap;*/
}

.samplesearch .section
{
    margin: 10px;
    max-width:50%;
    border-width: 1px;
    border-style: dotted;
    border-color: Gray;
    
}

.samplesearch .section .description
{
    color: Gray;
    text-align: center;
    margin: 15px;
    background:var(--color-background);
}

.samplesearch .section .sectionheader
{
    background: #f1f1f1;
    text-align: center;
}

.samplesearch .section .items
{
    margin: 10px;
}

.samplesearch .section .item
{
}

.samplesearch SPAN.item:not(:first-child)::before
{
    content:" | ";
}

DIV.image_dataset
{
    margin-top:20px;
    width: 100%;
}

DIV.image_datatable
{
    margin:20px;
    display:flex;
    flex-wrap:wrap;
}

DIV.image_resultitem
{
    position:relative;
}

DIV.image_resultitem DIV.image_over
{
    position:absolute;
    visibility:collapse;
    background-color:var(--color-background);
    box-shadow:0 3px 4px rgba(0,0,0,0.4);
    z-index:1;
    padding:15px;
    border:1px solid transparent;
    margin:5px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color:rgba(100,100,100,0.8);
    
    border-radius:10px 10px 0px 0px;
    text-align:center;
    
    overflow-x:hidden;
    text-overflow:ellipsis;
    /*white-space:wrap;*/
    
    overflow-y:hidden;
    max-height:80%;
}

DIV.image_resultitem DIV.image_over:hover
{
    overflow-x:visible;
    text-overflow:unset;
    background-color:#000;

    overflow-y:visible;
    max-height:max-content;
}   

DIV.image_resultitem DIV.image_over A
{
    color: white;
    text-shadow:3px 3px 10px black;
}


DIV.image_resultitem:hover DIV.image_over
{
    visibility:visible;
    /*width:inherit;*/
}

DIV.image_resultitem DIV.resultlink
{
}

DIV.image_resultitem DIV.related_images
{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
} 

DIV.image_resultitem DIV.related_images IMG
{
    /*width:50px;*/
    height:50px;
}

DIV.image_resultitem IMG
{
    grid-area:image;
    
    height:150px;
    box-shadow: 4px 4px 4px 0px grey;
    border: 3px solid white;
    margin:5px;
    object-fit:fill;
    max-width:100%;
}

DIV.image_resultitem IMG:hover
{
    box-shadow:7px 7px 7px rgba(0,0,0,.5);
    transform:scale(1.01);
}
.qoqnus-modal
{
    display:none;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
}

.qoqnus-modal .modal-content
{
    background:#fefefe;
    margin:12vh auto;
    border:1px solid black;
    box-shadow:10px 10px 10px;
    width:80%;
    animation:fallEffect 1s;
    overflow-y:auto;
}

.qoqnus-modal .modal-content DIV.head
{
    display:grid;
    position:sticky;
    top : 0px;
    grid-template-columns:1fr auto;
}

.qoqnus-modal .modal-content DIV.head DIV.title
{
    text-align:center;
    padding:5px;
    background-color: #ccc;
}

.qoqnus-modal .modal-content DIV.head DIV.close
{
    color:#aaa;
    float:right;
    font-size:28px;
    font-weight:bold;
}

.qoqnus-modal .modal-content IFRAME
{
    border-width:0px;
    width:100%;
    height:75vh;
}

.qoqnus-modal .modal-content DIV.close:hover,
.qoqnus-modal .modal-content DIV.close:focus
{
    color:black;
    text-decoration:none;
    cursor:pointer;
}

.wdrs
{
}

.wdrs .wdr
{
    border-bottom: solid 1px var(--color-background);
    margin: 10px;
    padding: 5px;
}

.wdrs .wdr DIV.labels
{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0px, 5px, 0px, 0px;
}

.wdrs .wdr DIV.label
{
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
}

.wdrs .wdr DIV.label.bold
{
    font-weight:bold;
}

.wdrs .wdr DIV.label:not(:first-of-type)::before
{
    content: " | ";
}

.wdrs .wdr DIV.descriptions
{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0px, 5px,0px,0px;
    color:var(--color-background);
}

.wdrs .wdr DIV.description
{
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
}

.wdrs .wdr DIV.description:not(:first-of-type)::before
{
    content: " | ";
}

.wdrs .wdr DIV.images
{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0px, 5px, 0px, 0px;
    margin: 10px;
}

.wdrs .wdr DIV.images IMG
{
    height: 150px;
}
.qoqnus-popup
{
    position:absolute;
    box-shadow:10px 10px 10px;
    background:#fefefe;
    border:1px solid black;
    z-index:1000;
}

.qoqnus-popup .popup-content
{
    padding:5px;
}

.qoqnus-popup .popup-content A
{
    cursor:pointer;
}