* {
    box-sizing: border-box;
}
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none;
}
body {
    overflow: hidden;
}
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: arial;
}
#map {
    position: absolute;
    top: 0%;
    left: 17%;
    width: 83%;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid #ddd;
    background-color: #fff;
}
#data {
    width: 60%;
}
#table_data {
    position: absolute;
    bottom: 0%;
    overflow: scroll;
    left: 17%;
    right: 0%;
    height: 0%;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all 300ms ease 0ms;
}
#table {
    white-space:nowrap;
    grid-template-areas:"head-fixed" "body-scrollable";
}
#showData {
    overflow: auto;
    width: 100%;
}
#table th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
    background-color: darksalmon;
}
#mouse-position {
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    width: fit-content;
    height: auto;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 900;
    z-index: 1;
}
#information {
    position: absolute;
    display: block;
    bottom: 7px;
    left: 7px;
    width: 25px;
    height: 25px;
    background: url('./assets/info_small.png') 0px 0px/25px 25px no-repeat;
    opacity: 0.6;
    cursor: pointer;
    z-index: 1;
}
#information::after {
    display: none;
    position: absolute;
    content: "If you discover any incorrect entry in the database,\00000aplease notify the EFA staff here: reflect.efa@gmail.com";
    width: 422px;
    height: 100px;
    bottom: 19px;
    left: 17px;
    font-size: 17px;
    font-weight: 600;
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 11px 11px 11px 0;
    border: 0.5px solid gray;
    line-height: 26px;
    text-shadow: 2px 2px lightblue;
    box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
}
#information:hover {
    display: block;
    opacity: 1;
}
#information:hover::after {
    display: block;
}

#clear_btn {
    position: absolute;
    z-index: 500;
    top: 1%;
    left: 55%;
}
.ol-mouse-position {
    position: absolute;
    top: 97.5%;
    left: 50%;
    right: unset;
    transform: translateX(-50%);
    font-weight: bold;
}
.layer-switcher {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    text-align: left;
}
.layer-switcher.shown {
    max-height: 465px;
}
.layer-switcher .panel > ul{
    margin-right: 16px;
}
#query-tab {
    position: absolute;
    padding-top: 0.5%;
    top: 0%;
    height: 100%;
    width: 17%;
    left: 0%;
    background: linear-gradient(205deg, rgba(255,255,255,1) 55%, rgba(255,255,255,0.1) 100%);
}
.tab-content {
    position: relative;
    top:1%;
    height: 94%;
    z-index: 2;
}
#form, #form1 {
    position: relative;
    height: 100%;
    margin: 0 8px;
}
#form label:not(:first-child), #form1 label:not(:first-child) {
    margin-top: 10px;
}
#form label[for='value'] {
    display: block;
}
.value-wrapper {
    position: relative;
    margin-top: 10px;
}
#value {
    display: inline-block;
    width: 66%;
}
.operator-buttons {
    position: relative;
    width: 100%;
    height: 42px;
    margin-top: 17px;
}
.operator-buttons::after {
    position: absolute;
    content: "\21E9 \0020 Hover over the data below for brackets!";
    top: 42px;
    font-size: 13px;
    color: #0d0c61;
    width: 100%;
    text-align: center;
    text-shadow: 2px 2px lightgray;
}
.btn-add, .btn-operator, .btn-export, .btn-load-query, .btn-clear-settings {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    border-width: 0px;
    border-color: rgba(0,0,0,0);
    border-radius: 4px;
    letter-spacing: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.7em;
    background-image: linear-gradient(90deg,#28a4e2 0%,#1f2c93 100%);
    box-shadow: 0px 20px 30px -10px rgba(114,156,220,0.66);
    transition: all 300ms ease 0ms;
}
.btn-clear-settings {
    position: absolute;
    top: 0;
    right: -2px;
    margin: 3px 3px 0 0;
    padding: 0px 20px;
    background-image: linear-gradient(90deg,#e30029 0%,#910000 100%);
}
.btn-clear-settings:hover {
    padding: 0px 24px;
}
.btn-clear-settings:hover::after {
    margin-left: 2px;
}
.btn-add {
    position: absolute;
    top: 24px;
    left: 84%;
    padding: 6px 14px;
    transform: translateX(-50%);
}
.btn-add:hover {
    padding: 6px 18px;
}
.btn-add:hover::after {
    margin-left: 1.5px;
}
.btn-operator {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
}
#and-btn-operator {
    padding: 7px 29px;
    left: 31%;
}
#and-btn-operator:hover {
    padding: 7px 33px;
}
#and-btn-operator:hover::after {
    margin-left: 1px;
}
#or-btn-operator {
    padding: 7px 36.18px;
    left: 69%;
}
#or-btn-operator:hover {
    padding: 7px 40.43px;
}
#or-btn-operator:hover::after {
    margin-left: 5px;
}
.btn-operator:hover::after, .btn-add:hover::after, .btn-clear-settings:hover::after {
    transition: none;
    opacity: 1;
}
.btn-export, .btn-load-query {
    padding: 12px 30px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
}
.btn-load-query {
    background-image: unset;
    background-color: #5cb85c;
}
.btn-export:hover, .btn-load-query:hover, .btn-operator:hover, .btn-add:hover, .btn-clear-settings:hover {
    letter-spacing: 6px;
}
.btn-export::after, .btn-load-query::after, .btn-operator::after, .btn-add::after, .btn-clear-settings::after {
    content: "\203A";
    position: absolute;
    margin-left: -10px;
    font-size: 1.6em;
    font-family: ETmodules;
    line-height: 1em;
    opacity: 0;
    transition: all 300ms ease 0ms;
}
.btn-export:hover::after, .btn-load-query:hover::after {
    margin-left: 8px;
    transition: none;
    opacity: 1;
}
.btn-load-query:hover::after {
    margin-left: 7px;
}
.btn-clear-settings:disabled,
.btn-add:disabled,
.btn-operator:disabled,
.btn-export:disabled,
.btn-load-query:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#query-combo {
    position: relative;
    height: auto;
    min-height: 91px;
    max-height: 23em;
    width: 100%;
    margin-top: 18px;
    border: 1.5px dashed darkgray;
    padding: 6px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 2px 2px lightgray;
    overflow: auto;
}
#query-combo::after {
    content: "#1 - select an attribute\00000a#2 - choose an operator\00000a#3 - then add a value";
    position: absolute;
    width: calc(100% - 12px);
    height: 76px;;
    top: 6px;
    left: 6px;
    padding: 3px 0;
    font-size: 15.5px;
    font-weight: normal;
    color: #5352b7;
    text-align: center;
    border: 1.5px solid lightsteelblue;
    background-color: whitesmoke;
    box-shadow: 1px 3px 3px lightgrey;
    white-space: pre;
}
#query-combo.higher::after {
    height: 99px;;
    padding: 26px 0 3px 0;
}
.attribute-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 3px 0;
    text-align: center;
    border: 1.5px solid lightsteelblue;
    background-color: whitesmoke;
    cursor: pointer;
}
.attribute-values.highlight-for-close-it-one::before,
.attribute-values.highlight-for-close-it-two::before,
.attribute-values.highlight-for-close-it-three::before,
.attribute-values.highlight-for-close-it-four::before {
    position: absolute;
    content: '';
    width: 101%;
    height: 105px;
    left: -1px;
    background-color: rgba(255, 125, 125, 0.3);
    z-index: 2;
}
.attribute-values.highlight-for-close-it-one::before { top: -1px; }
.attribute-values.highlight-for-close-it-two::before { top: -30px; }
.attribute-values.highlight-for-close-it-three::before { top: -30px; height: 134px; }
.attribute-values.highlight-for-close-it-four::before { top: -1px; height: 76px; }

.attribute-values.highlight-for-close-it-one.higher::before { height: 128px; }
.attribute-values.highlight-for-close-it-two.higher::before { height: 128px; }
.attribute-values.highlight-for-close-it-three.higher::before { height: 157px; }
.attribute-values.highlight-for-close-it-four.higher::before { height: 99px; }

.attribute-values:not(:first-child) {
    box-shadow: 1px 3px 3px lightgrey;
}
.attribute-values .attribute-value {
    display: block;
    width: calc(100% - 6px);
    color: mediumvioletred;
    word-break: break-word;
    padding: 0 21px;
    z-index: 1;
    background-color: #f5f5f5;;
}
.attribute-values .operator-value {
    display: block;
    width: calc(100% - 6px);
    font-size: 15px;
    color: blue;
    z-index: 1;
    background-color: #f5f5f5;;
}
.attribute-values .input-value {
    display: block;
    width: calc(100% - 6px);
    color: red;
    z-index: 1;
    background-color: #f5f5f5;
}
.attribute-values .attribute-value:hover,
.attribute-values .operator-value:hover,
.attribute-values .input-value:hover {
    background-color: #ceceff;
    margin: 0 3px;
}
.attribute-values .attribute-value.change-it-action,
.attribute-values .operator-value.change-it-action,
.attribute-values .input-value.change-it-action {
    background-color: #bcbcff;
    margin: 0 3px;
}
.attribute-values .close-it,
.operator-main .close-oprtr-main {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: url('./assets/close-it.svg') 0px 0px/13px 13px no-repeat;
    opacity: 0.66;
    cursor: pointer;
    z-index: 3;
}
.operator-main .close-oprtr-main {
    top: 6px;
    right: 4px;
}
.blinking-bg {
    animation: blinkingBackground;
    animation-duration:  1s;
    animation-delay: 0.15s;
}
@keyframes blinkingBackground{
    0%		{ background-color: #f5f5f5;}
    25%		{ background-color: #a6dfa6;}
    50%		{ background-color: #f5f5f5;}
    75%		{ background-color: #a6dfa6;}
    100%	{ background-color: #f5f5f5;}
}
.operator-main {
    position: relative;
    padding: 3px 0;
    color: blue;
    font-weight: bolder;
    text-align: center;
    cursor: pointer;
}
.operator-main:hover::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: #0400ff40;
}
#form1 {
    margin: 0 8px;
}
.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content: "X";
}
.ol-full-screen {
    top: 0.5em;
    left: 0.5em;
    right: unset;
}
.ol-zoom {
    top: 3em;
    left: 0.5em;
}
.ol-zoom-extent {
    top: 21.8em;
    left: 0.5em;
}
.ol-zoomslider {
    top: 7.1em;
    left: 0.5em;
    height: 200px;
}
.ol-control {
    position: absolute;
    background-color: rgba(255,255,255,0.6);
    border-radius: 4px;
    padding: 2px;
}
#measure {
    position: absolute;
    z-index:50;
    top: 1%;
    left: 5%;
}
#getinfo {
    position: absolute;
    z-index:50;
    top: 1%;
    left: 30%;
}
.tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
}
.tooltip-measure {
    opacity: 1;
    font-weight: bold;
}
.tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static:before {
          border-top-color: #ffcc33;
}    
button.btn-settings {
    margin: 25px;
    padding: 20px 30px;
    font-size: 1.2em;
    background-color: #337ab7;
    color: white;
}
button.btn-settings:active {
    color: white;
}
.image-wrap {
    position: absolute;
    width: 95%;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.image-wrap.hide-from-viewport {
    bottom: -40px;
    opacity: 0;
    transition: all 500ms ease-in 0ms;
}
.reflect-logo, .flag {
    display: block;
    position: relative;
    height: auto;
    width: 145px;
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
}
.reflect-logo {
    width: 183px;
    margin-bottom: 10px;
    box-shadow: none;
    background: radial-gradient(ellipse 49% 41px, #ffffff3d 44%, #ffffff26 78%, #6f5ece00);
}
.eu-funding-text {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    color: #fff;
    word-wrap: break-word;
    font-family: 'Muli',sans-serif;
    line-height: 1.2;
}
#background-video {
    height: 58%;
    left: 0px;
    bottom: 0px;
    z-index: -1;
    position: absolute;
}
.no-result-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    width: fit-content;
    height: 91px;
    margin-left: 0;
    padding: 0 20px;
    background-color: white;
    z-index: -1;
    opacity: 0;
    transition: all 300ms ease 0ms;
}
.no-result-message {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: #e30029;
    text-shadow: 2px 2px lightgray;
}
.no-result-message::after {
    position: absolute;
    content: "";
    top: 3px;
    right: 3px;
    width: 11px;
    height: 11px;
    background: url('./assets/close-it.svg') 0px 0px/12px 12px no-repeat;
    opacity: 0.4;
    cursor: pointer;
}
.no-result-box.active {
    margin-left: 17%;
    z-index: 1;
    opacity: 1;
    border-top: 1.5px solid #ddd;
    border-top-right-radius: 4px;
    border-right: 1.5px solid #ddd;
    border-bottom-right-radius: 4px;
    border-bottom: 1.5px solid #ddd;
    transition: all 300ms ease 0ms;
}
.no-result-box.active span:not(:first-child) {
    margin-top: 3px;
}
#parenthesis-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    width: 557px;
    height: auto;
    margin-left: 0;
    padding: 10px 20px 18px;
    background-color: white;
    z-index: -1;
    opacity: 0;
    transition: all 300ms ease 0ms;
}
#parenthesis-box.active {
    margin-left: 17%;
    z-index: 1;
    opacity: 1;
    border-top: 1.5px solid #ddd;
    border-top-right-radius: 4px;
    border-right: 1.5px solid #ddd;
    border-bottom-right-radius: 4px;
    border-bottom: 1.5px solid #ddd;
    transition: all 300ms ease 0ms;
}
#parenthesis-box button {
    width: 140px;
    padding: 3.5px 9px;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    border-width: 0px;
    border-color: rgba(0,0,0,0);
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
    line-height: 1.7em;
    background-image: linear-gradient(90deg,#28a4e2 0%,#1f2c93 100%);
    box-shadow: 0px 20px 30px -10px rgba(114,156,220,0.66);
}
#parenthesis-box #delete-bracket {
    margin: 6px 0;
}
#parenthesis-box::after {
    position: absolute;
    content: "Other tips:\00000aYou can modify your query by clicking on the lines\00000ain the query box. Then you can select a new attribute,\00000aoperator, or add a new value. If the modification is\00000afinished, click on the line again to remove the selection.\00000aPlease note, that the modifications will remove the\00000abrackets from the selected lines.";
    top: 9px;
    left: 181px;
    font-size: 13.5px;
    color: #0d0c61;
    text-shadow: 2px 2px lightgray;
    white-space: pre;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.btn-export.not-working {
    position: relative;
}
.btn-export.not-working::after {
    display: none;
    content: "Sorry, currently not working! We will repair it soon!";
    position: absolute;
    width: 200px;
    height: auto;
    top: 10px;
    left: 0;
    font-size: 14px;
    font-weight: 900;
    font-family: 'Muli',sans-serif;
    color: black;
    background-color: #fff;
    padding: 8px 12px;
    border: 0.5px solid gray;
    border-radius: 5px;
    line-height: 20px;
    text-shadow: 2px 2px rgb(0 0 0 / 22%);
    box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
    letter-spacing: normal;
    opacity: unset;
}
.btn-export.not-working:hover::after {
    display: block;
}

@media only screen and (max-height: 800px) {
    body {
        font-size: 11.3px;
        line-height: 1.0;
    }
    .nav > li > a {
        padding: 8px 12px;
    }
    .form-control {
        height: 28px;
        padding: 6px 8px;
        font-size: unset
    }
    #form, #form1 {
        margin: 0 6px;
    }
    .btn-add, .btn-operator, .btn-export, .btn-load-query, .btn-clear-settings {
        letter-spacing: 4px;
        font-size: unset;
    }
    .btn-clear-settings {
        margin: 1px 1px 0 0;
        padding: 0px 15px;
    }
    .btn-clear-settings:hover {
        padding: 0px 15px;
    }
    .btn-clear-settings:hover::after {
        margin-left: 1px;
    }
    .btn-add {
        top: 15px;
        padding: 5px 9px;
    }
    .btn-add:hover {
        padding: 5px 9px;
    }
    .btn-add:hover::after {
        margin-left: -3px;
    }
    .operator-buttons {
        height: 32px;
        margin-top: 11px;
    }
    .operator-buttons::after {
        top: 37px;
        font-size: 12px;
    }
    #and-btn-operator {
        padding: 6px 21px;
    }
    #and-btn-operator:hover {
        padding: 6px 21px;
    }
    #and-btn-operator:hover::after {
        margin-left: 4px;
    }
    #or-btn-operator {
        padding: 6px 28.18px;
    }
    #or-btn-operator:hover {
        padding: 6px 28.18px;
    }
    #or-btn-operator:hover::after {
        margin-left: 6px;
    }
    #query-combo {
        min-height: 74px;
        margin-top: 19px;
        padding: 4px 4px;
        font-size: 14px;
    }
    #query-combo::after {
        width: calc(100% - 8px);
        height: 61px;
        top: 5px;
        left: 4px;
        font-size: 12.5px;
        line-height: 1.38;
    }
    .attribute-values {
        height: 62px;
        padding: 3px 0 0px;
        line-height: 18px;
    }
    .attribute-values span {
        height: 18px;
    }
    .attribute-values span:hover {
        height: 18px;
    }
    .operator-main {
        height: 24px;
        line-height: 18px;
    }
    .attribute-values .attribute-value {
        width: calc(100% - 3px);
    }
    .attribute-values .operator-value {
        width: calc(100% - 3px);
        font-size: 13px;
    }
    .attribute-values .input-value {
        width: calc(100% - 3px);
    }
    .attribute-values .close-it, .operator-main .close-oprtr-main {
        top: 2px;
        right: 2px;
        background: url('./assets/close-it.svg') 0px 0px/13px 11px no-repeat;
    }
    .operator-main .close-oprtr-main {
        top: 6px;
    }
    .operator-main:hover::before {
        top: 2px;
        height: 21px;
    }
    .attribute-values.highlight-for-close-it-one::before,
    .attribute-values.highlight-for-close-it-two::before,
    .attribute-values.highlight-for-close-it-three::before,
    .attribute-values.highlight-for-close-it-four::before {
    width: 102%;
    height: 86px;
    left: -3px;
    }
    .attribute-values.highlight-for-close-it-one::before { height: 85px; }
    .attribute-values.highlight-for-close-it-two::before { top: -25px; }
    .attribute-values.highlight-for-close-it-three::before { top: -25px; height: 109px; }
    .attribute-values.highlight-for-close-it-four::before { top: -1px; height: 61px; }

    .btn-export, .btn-load-query {
        padding: 9px 24px;
        margin-top: 10px;
    }
    .btn-load-query:hover, .btn-export:hover {
        letter-spacing: 5px;
    }
    .btn-load-query:hover::after {
        margin-left: 5px;
    }
    .btn-export:hover::after {
        margin-left: 6px;
    }
    .image-wrap {
        bottom: 7px;
    }
    .reflect-logo, .flag {
        width: 100px;
    }
    .reflect-logo {
        width: 126px;
    }
    .eu-funding-text {
        font-size: 10.4px;
    }
    #parenthesis-box {
        width: 527px;
        padding: 12px 15px 22px;
    }
    #parenthesis-box button {
        width: 119px;
    }
    #parenthesis-box #add-bracket {
        margin-top: 5px;
    }
    #parenthesis-box::after {
          top: 12px;
          left: 152px;
          line-height: 1.1;
    }
    #mouse-position {
        font-size: 11.5px;
        bottom: 4px;
    }
    #information {
        bottom: 5px;
        left: 4px;
        width: 22px;
        height: 22px;
        background: url('./assets/info_small.png') 0px 0px/22px 22px no-repeat;
    }
    #information::after {
        width: 305px;
        height: 80px;
        left: 16px;
        bottom: 18px;
        font-size: 13px;
        padding: 6px 13px;
        line-height: 21px;
    }
    .ol-zoom-extent {
        top: 25.1em;
    }
}
@media only screen and (max-width: 750px) {
    body {
      background: url("./assets/background-reflect.jpg") no-repeat;
      background-size: cover;
    }
    #background-video {
        display: none;
    }
}