@font-face {
    font-family: 'bpg nino mtavruli';
    src: url('../fonts/bpg_nino_mtavruli_bold.ttf');
}

@font-face {
    font-family: 'bpg nino mtavruli light';
    src: url('../fonts/bpg_nino_mtavruli_normal.ttf');
}

html, body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Roboto', 'bpg nino mtavruli', sans-serif;
}

* {
    padding: 0;
    margin: 0;
}

.scrolly-bar.axis-y {
    width: 6px !important;
}

.scrolly-bar {
    border: 2px solid transparent !important;
    user-select: none;
}

.scrolly-bar::before{
    left: 0;
}

a {
    color: white;
    text-decoration: none; /* no underline */
}

ul {
    font-size:0;
}

ul * {
    font-size: medium;
    font-size: initial;
}

:root {
    --slider-width: 350px; 
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

ul, li{
    padding:0;
    margin:0;
    list-style: none;
}

body{
    background-color: #313431;
}

*[v-cloak]{
    opacity: 0;
}

/* Range -------------------------------------- */

  /* Special styling for WebKit/Blink */
  .range {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.range:hover {
    opacity: 1;
}

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.range::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

  /* End Range ------------------------------ */

.hidden {
    display: hidden;
}

.invisible{
    opacity: 0 !important;
}

.archive-viewer{
    position: fixed;
    display: flex;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.nocursor{
    cursor: none !important;
}

.viewer-main {
    z-index: 0;
    position: relative;
    width:100%;
    height:100%;
    text-align: center;
    background-color: #313431;
}

.viewer-pictures{
    display: inline-flex;
    height: 972px;
    position: relative;
}

.viewer-picture{
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    height: 972px;
    background-position-y: center;
    position: relative;;
}

.viewer-main.selector .viewer-picture{
    cursor: crosshair;
}

.viewer-picture > span > *{
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.viewer-side {
    position: fixed;
    z-index: 10;
    overflow: visible;
    height: 100%;
    width: 0;
    background-color: white;
    transition: width .3s, opacity .3s;
}

.viewer-side.opened {
    width: 350px;
}

.viewer-side.left{
    left:0;
}

.viewer-side.right{
    right:0;
}

.slider-panel {
    position: absolute;
    width: 0;
    height: 100vh;
    display: inline-block;
    background-color: white;
    transition: width .2s, left .2s, right .2s;
}

.slider-panel-body{
    overflow: hidden;
}

.slider-panel.left{
    left: 0;
}

.slider-panel.right{
    right: 0;
}

.slider-panel.opened{
    width: 350px;
}

.slider-panel.left.opened{
    border-right: 1px solid #ccc;
}

.slider-panel.right.opened{
    border-left: 1px solid #ccc;
}

.slider-panel.left.indent{
    left:350px;
}

.slider-panel.right.indent{
    right:350px;
}

.slider-open-button{
    display: inline-block;
    position: absolute;
    background-color:white;
    border: 1px solid #ccc;
    min-width:30px;
    width: max-content;
    height:40px;
    top: 20px;
    line-height:40px;
    padding: 0 5px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: border .3s;
}

.opened>.slider-open-button.right{
    z-index: 100;
    border-right: 1px solid white;
}

.opened>.slider-open-button.left{
    z-index: 100;
    border-left: 1px solid white;
}

.slider-open-button.left{
    right: 1px;
    transform: translateX(100%);
}

.slider-open-button.right{
    transform: translateX(-100%);
}

.slider-panel:first-child .slider-open-button.right{
    border-top-left-radius: 5px;
}

.slider-panel:last-child .slider-open-button.right{
    border-bottom-left-radius: 5px;
}

.slider-panel:first-child .slider-open-button.left{
    border-top-right-radius: 5px;
}

.slider-panel:last-child .slider-open-button.left{
    border-bottom-right-radius: 5px;
}

.header {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    background-color: black;
    opacity: .35;
    width: 190px;
    height: 50px;
    transition: opacity .3s, transform .3s;
    z-index: 10;
}

.header:hover{
    opacity: 0.75 !important;
}

.footer {
    width: 540px;
    height: 50px;
    background-color: black;
    opacity: .35;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .3s, transform .3s;
    z-index: 10;
}

.footer:hover{
    opacity: 0.75 !important;
}

.controllers {
    user-select: none;
}

.controller {
    position: relative;
    width: 25px;
    height: 25px;
    padding: 12.5px 7.5px;
    color: white;
    opacity: .6;
    font-size: 25px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    transition: opacity .3s;
}

.controller:hover{
    opacity: 1;
}

.controller .fa-question {
    margin-left: -2px;
    margin-top: -2px;
}

.controller:empty {
    background-color: white;
}

.controller-sep {
    height: 20px;
    margin: 15px 10px;
    border-left: solid 1px;
    border-color: white;
    display: inline-block;
}

.range-wrapper {
    position: absolute;
    height: 30px;
    width: 200px;
    top:0;
    left: 50%;
    padding: 0 10px;
    transform: translate(-50%, -100%);
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: visibility .3s;
}

.range-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

.range-wrapper .range{
    vertical-align: bottom;
    margin-bottom: -3px;
}

.controller:hover .range-wrapper{
    opacity: 1;
    visibility: visible;
}

.icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.brightness-icon {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8Zz4KICAgIDxnPgogICAgICA8cGF0aCBkPSJtNjQuNSw5Mi42YzE1LjUsMCAyOC0xMi42IDI4LTI4cy0xMi42LTI4LTI4LTI4LTI4LDEyLjYtMjgsMjggMTIuNSwyOCAyOCwyOHptMC00Ny45YzExLDAgMTkuOSw4LjkgMTkuOSwxOS45IDAsMTEtOC45LDE5LjktMTkuOSwxOS45cy0xOS45LTguOS0xOS45LTE5LjljMC0xMSA4LjktMTkuOSAxOS45LTE5Ljl6IiBmaWxsPSIjRkZGRkZGIi8+CiAgICAgIDxwYXRoIGQ9Im02OC42LDIzLjZ2LTEyLjljMC0yLjMtMS44LTQuMS00LjEtNC4xcy00LjEsMS44LTQuMSw0LjF2MTIuOWMwLDIuMyAxLjgsNC4xIDQuMSw0LjFzNC4xLTEuOCA0LjEtNC4xeiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgICA8cGF0aCBkPSJtNjAuNCwxMDUuNnYxMi45YzAsMi4zIDEuOCw0LjEgNC4xLDQuMXM0LjEtMS44IDQuMS00LjF2LTEyLjljMC0yLjMtMS44LTQuMS00LjEtNC4xcy00LjEsMS44LTQuMSw0LjF6IiBmaWxsPSIjRkZGRkZGIi8+CiAgICAgIDxwYXRoIGQ9Im05Ni40LDM4LjVsOS4xLTkuMWMxLjYtMS42IDEuNi00LjIgMC01LjgtMS42LTEuNi00LjItMS42LTUuOCwwbC05LjEsOS4xYy0xLjYsMS42LTEuNiw0LjIgMCw1LjggMC44LDAuOCAxLjgsMS4yIDIuOSwxLjJzMi4xLTAuNCAyLjktMS4yeiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgICA8cGF0aCBkPSJtMjMuNSwxMDUuNmMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDkuMS05LjFjMS42LTEuNiAxLjYtNC4yIDAtNS44LTEuNi0xLjYtNC4yLTEuNi01LjgsMGwtOS4xLDkuMWMtMS42LDEuNi0xLjYsNC4yIDAsNS44eiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgICA8cGF0aCBkPSJtMTIyLjUsNjQuNmMwLTIuMy0xLjgtNC4xLTQuMS00LjFoLTEyLjljLTIuMywwLTQuMSwxLjgtNC4xLDQuMSAwLDIuMyAxLjgsNC4xIDQuMSw0LjFoMTIuOWMyLjIsMS40MjEwOWUtMTQgNC4xLTEuOCA0LjEtNC4xeiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgICA8cGF0aCBkPSJtMTAuNiw2OC43aDEyLjljMi4zLDAgNC4xLTEuOCA0LjEtNC4xIDAtMi4zLTEuOC00LjEtNC4xLTQuMWgtMTIuOWMtMi4zLDAtNC4xLDEuOC00LjEsNC4xIDAsMi4zIDEuOSw0LjEgNC4xLDQuMXoiIGZpbGw9IiNGRkZGRkYiLz4KICAgICAgPHBhdGggZD0ibTEwMi42LDEwNi44YzEsMCAyLjEtMC40IDIuOS0xLjIgMS42LTEuNiAxLjYtNC4yIDAtNS44bC05LjEtOS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDkuMSw5LjFjMC44LDAuOCAxLjksMS4yIDIuOSwxLjJ6IiBmaWxsPSIjRkZGRkZGIi8+CiAgICAgIDxwYXRoIGQ9Im0zOC40LDM4LjVjMS42LTEuNiAxLjYtNC4yIDAtNS44bC05LjEtOS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDkuMSw5LjFjMC44LDAuOCAxLjgsMS4yIDIuOSwxLjJzMi4xLTAuNCAyLjktMS4yeiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==);
}

.sharpness-icon {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI4NS45MTkgMjg1LjkxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjg1LjkxOSAyODUuOTE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxwYXRoIGQ9Ik0xNDIuOTU5LDBDNjQuMTMxLDAsMCw2NC4xMzIsMCwxNDIuOTZjMCw3OC44MjgsNjQuMTMxLDE0Mi45NTksMTQyLjk1OSwxNDIuOTU5Yzc4LjgyOCwwLDE0Mi45Ni02NC4xMzEsMTQyLjk2LTE0Mi45NTkgIEMyODUuOTE5LDY0LjEzMiwyMjEuNzg3LDAsMTQyLjk1OSwweiBNMTQyLjk1OSwyNjAuOTE5VjE0Mi45NlYyNWM2NS4wNDMsMCwxMTcuOTYsNTIuOTE3LDExNy45NiwxMTcuOTYgIEMyNjAuOTE5LDIwOC4wMDMsMjA4LjAwMiwyNjAuOTE5LDE0Mi45NTksMjYwLjkxOXoiIGZpbGw9IiNGRkZGRkYiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.fullscreen-icon {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDIyIDIyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMiAyMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00LDE4aDE0VjRINFYxOHogTTYsNmgxMHYxMEg2VjZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBvbHlnb24gcG9pbnRzPSIyLDE2IDAsMTYgMCwyMiA2LDIyIDYsMjAgMiwyMCAgICIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwb2x5Z29uIHBvaW50cz0iMiwyIDYsMiA2LDAgMCwwIDAsNiAyLDYgICAiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cG9seWdvbiBwb2ludHM9IjIwLDIwIDE2LDIwIDE2LDIyIDIyLDIyIDIyLDE2IDIwLDE2ICAgIiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBvbHlnb24gcG9pbnRzPSIxNiwwIDE2LDIgMjAsMiAyMCw2IDIyLDYgMjIsMCAgICIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.xml-icon {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU4IDU4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1OCA1ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwYXRoIGQ9Ik01MS41LDM5VjEzLjk3OGMwLTAuNzY2LTAuMDkyLTEuMzMzLTAuNTUtMS43OTJMMzkuMzEzLDAuNTVDMzguOTY0LDAuMjAxLDM4LjQ4LDAsMzcuOTg1LDBIOC45NjMgICBDNy43NzcsMCw2LjUsMC45MTYsNi41LDIuOTI2VjM5SDUxLjV6IE0zNy41LDMuMzkxYzAtMC40NTgsMC41NTMtMC42ODcsMC44NzctMC4zNjNsMTAuMDk1LDEwLjA5NSAgIEM0OC43OTYsMTMuNDQ3LDQ4LjU2NywxNCw0OC4xMDksMTRIMzcuNVYzLjM5MXogTTMzLjc5MywxOC43MDdjLTAuMzkxLTAuMzkxLTAuMzkxLTEuMDIzLDAtMS40MTRzMS4wMjMtMC4zOTEsMS40MTQsMGw2LDYgICBjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNGwtNiw2QzM1LjAxMiwzMC45MDIsMzQuNzU2LDMxLDM0LjUsMzFzLTAuNTEyLTAuMDk4LTAuNzA3LTAuMjkzICAgYy0wLjM5MS0wLjM5MS0wLjM5MS0xLjAyMywwLTEuNDE0TDM5LjA4NiwyNEwzMy43OTMsMTguNzA3eiBNMjQuNTU3LDMxLjY2N2w2LTE3YzAuMTg1LTAuNTIxLDAuNzUzLTAuNzk1LDEuMjc2LTAuNjEgICBjMC41MjEsMC4xODQsMC43OTQsMC43NTUsMC42MSwxLjI3NmwtNiwxN0MyNi4yOTgsMzIuNzQ0LDI1LjkxMiwzMywyNS41LDMzYy0wLjExLDAtMC4yMjMtMC4wMTktMC4zMzMtMC4wNTggICBDMjQuNjQ2LDMyLjc1OSwyNC4zNzMsMzIuMTg4LDI0LjU1NywzMS42Njd6IE0xNS43OTMsMjMuMjkzbDYtNmMwLjM5MS0wLjM5MSwxLjAyMy0wLjM5MSwxLjQxNCwwczAuMzkxLDEuMDIzLDAsMS40MTRMMTcuOTE0LDI0ICAgbDUuMjkzLDUuMjkzYzAuMzkxLDAuMzkxLDAuMzkxLDEuMDIzLDAsMS40MTRDMjMuMDEyLDMwLjkwMiwyMi43NTYsMzEsMjIuNSwzMXMtMC41MTItMC4wOTgtMC43MDctMC4yOTNsLTYtNiAgIEMxNS40MDIsMjQuMzE2LDE1LjQwMiwyMy42ODQsMTUuNzkzLDIzLjI5M3oiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik02LjUsNDF2MTVjMCwxLjAwOSwxLjIyLDIsMi40NjMsMmg0MC4wNzRjMS4yNDMsMCwyLjQ2My0wLjk5MSwyLjQ2My0yVjQxSDYuNXogTTIyLjkzNiw1NGgtMS45bC0xLjYtMy44MDFoLTAuMTM3ICAgTDE3LjU3Niw1NGgtMS45bDIuNTU3LTQuODk1bC0yLjcyMS01LjE4MmgxLjg3M2wxLjc3Nyw0LjEwMmgwLjEzN2wxLjkyOC00LjEwMkgyMy4xbC0yLjcyMSw1LjE4MkwyMi45MzYsNTR6IE0zNC42NjYsNTRoLTEuNjY4ICAgdi02LjkzMmwtMi4yNTYsNS42MDVoLTEuNDQ5bC0yLjI3LTUuNjA1VjU0aC0xLjY2OFY0My45MjRoMS42NjhsMi45OTQsNi44OTFsMi45OC02Ljg5MWgxLjY2OFY1NHogTTQzLjQ5OCw1NGgtNi4zMDNWNDMuOTI0aDEuNjY4ICAgdjguODMyaDQuNjM1VjU0eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

.controller .value{
    position: relative;
    display: inline-block;
    left: -5px;
    top: -3px;
    font-size: 16px;
    text-align: center;
}

.value.degrees{
    left: -1px;
}

.value .degree {
    position: absolute;
    font-size: 10px;
    top: 0;
    right: -6px;
}

.line {
    height: 1px;
    background-image: linear-gradient(to left, white, #eee, white);
    margin-top: -1px;
}

/* -------- slider panel header ------------ */

.slider-panel-header{
    width: calc(350px - 60px);
    display: flex;
    margin: 40px 30px;
}

.slider-panel-header *{
    font-size: 20px;
}

.slider-panel-header .label{
    font-size: 16px;
}

/* ---------- page indexes --------------- */

.indexes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pages-indexes{
    text-align: center;
    width: 100%;
    display: inline-block;
}

.pages-index-input{
    width: 30px;
    height: 30px;
    padding: 0 5px;
    box-shadow: none;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 5px;
}

.pages-index-input:focus{
    border-color:deepskyblue;
}

/* *************** page indexes **************** */

/* ------------ view mode ------------ */

.view-modes{
    text-align: center;
    width: 100%;
    display: inline-block;
}

.view-modes-labels {
    display: inline-block;
    font-size: 0;
}

.view-modes-labels * {
    font-size: medium;
    font-size: initial;
}

.view-mode{
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin-left: -1px;
    cursor: pointer;
}

.view-mode.active{
    border-color: deepskyblue;
    z-index:1;
}

.view-mode:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.view-mode:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.single-page-icon {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwOC41MiA1MDguNTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOC41MiA1MDguNTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBkPSJNNDQ0Ljk1NSwwSDYzLjU2NUM0Ni4wMjEsMCwzMS43ODIsMTQuMjM5LDMxLjc4MiwzMS43ODJ2NDQ0Ljk1NSAgICAgIGMwLDE3LjU0NCwxNC4yMzksMzEuNzgyLDMxLjc4MiwzMS43ODJoMzgxLjM5YzE3LjU0NCwwLDMxLjc4Mi0xNC4yMzksMzEuNzgyLTMxLjc4MlYzMS43ODJDNDc2LjczNywxNC4yMzksNDYyLjQ5OSwwLDQ0NC45NTUsMCAgICAgIHogTTQ0NC45NTUsNDc2LjczN0g2My41NjVWMzEuNzgyaDM4MS4zOVY0NzYuNzM3eiIgZmlsbD0iI2NjY2NjYyIvPgoJCQkJPHBhdGggZD0iTTIzOC4zNjksMTI3LjEzaDEyNy4xM2M4Ljc0LDAsMTUuODkxLTcuMTE5LDE1Ljg5MS0xNS44OTFzLTcuMTUxLTE1Ljg5MS0xNS44OTEtMTUuODkxaC0xMjcuMTMgICAgICBjLTguNzcyLDAtMTUuODkxLDcuMTE5LTE1Ljg5MSwxNS44OTFTMjI5LjU5NywxMjcuMTMsMjM4LjM2OSwxMjcuMTN6IiBmaWxsPSIjY2NjY2NjIi8+CgkJCQk8cGF0aCBkPSJNMTQzLjAyMSwyMjIuNDc3aDIyMi40NzdjOC43NCwwLDE1Ljg5MS03LjExOSwxNS44OTEtMTUuODkxYzAtOC43NzItNy4xNTEtMTUuODkxLTE1Ljg5MS0xNS44OTEgICAgICBIMTQzLjAyMWMtOC43NzIsMC0xNS44OTEsNy4xMTktMTUuODkxLDE1Ljg5MUMxMjcuMTMsMjE1LjM1OCwxMzQuMjQ5LDIyMi40NzcsMTQzLjAyMSwyMjIuNDc3eiIgZmlsbD0iI2NjY2NjYyIvPgoJCQkJPHBhdGggZD0iTTE0My4wMjEsMzE3LjgyNWgyMjIuNDc3YzguNzQsMCwxNS44OTEtNy4xNTEsMTUuODkxLTE1Ljg5MXMtNy4xNTEtMTUuODkxLTE1Ljg5MS0xNS44OTEgICAgICBIMTQzLjAyMWMtOC43NzIsMC0xNS44OTEsNy4xNTEtMTUuODkxLDE1Ljg5MVMxMzQuMjQ5LDMxNy44MjUsMTQzLjAyMSwzMTcuODI1eiIgZmlsbD0iI2NjY2NjYyIvPgoJCQkJPHBhdGggZD0iTTE0My4wMjEsNDEzLjE3MmgyMjIuNDc3YzguNzQsMCwxNS44OTEtNy4xNTEsMTUuODkxLTE1Ljg5MXMtNy4xNTEtMTUuODkxLTE1Ljg5MS0xNS44OTEgICAgICBIMTQzLjAyMWMtOC43NzIsMC0xNS44OTEsNy4xNTEtMTUuODkxLDE1Ljg5MVMxMzQuMjQ5LDQxMy4xNzIsMTQzLjAyMSw0MTMuMTcyeiIgZmlsbD0iI2NjY2NjYyIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

.active .single-page-icon {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwOC41MiA1MDguNTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOC41MiA1MDguNTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBkPSJNNDQ0Ljk1NSwwSDYzLjU2NUM0Ni4wMjEsMCwzMS43ODIsMTQuMjM5LDMxLjc4MiwzMS43ODJ2NDQ0Ljk1NSAgICAgIGMwLDE3LjU0NCwxNC4yMzksMzEuNzgyLDMxLjc4MiwzMS43ODJoMzgxLjM5YzE3LjU0NCwwLDMxLjc4Mi0xNC4yMzksMzEuNzgyLTMxLjc4MlYzMS43ODJDNDc2LjczNywxNC4yMzksNDYyLjQ5OSwwLDQ0NC45NTUsMCAgICAgIHogTTQ0NC45NTUsNDc2LjczN0g2My41NjVWMzEuNzgyaDM4MS4zOVY0NzYuNzM3eiIgZmlsbD0iIzAwYmZmZiIvPgoJCQkJPHBhdGggZD0iTTIzOC4zNjksMTI3LjEzaDEyNy4xM2M4Ljc0LDAsMTUuODkxLTcuMTE5LDE1Ljg5MS0xNS44OTFzLTcuMTUxLTE1Ljg5MS0xNS44OTEtMTUuODkxaC0xMjcuMTMgICAgICBjLTguNzcyLDAtMTUuODkxLDcuMTE5LTE1Ljg5MSwxNS44OTFTMjI5LjU5NywxMjcuMTMsMjM4LjM2OSwxMjcuMTN6IiBmaWxsPSIjMDBiZmZmIi8+CgkJCQk8cGF0aCBkPSJNMTQzLjAyMSwyMjIuNDc3aDIyMi40NzdjOC43NCwwLDE1Ljg5MS03LjExOSwxNS44OTEtMTUuODkxYzAtOC43NzItNy4xNTEtMTUuODkxLTE1Ljg5MS0xNS44OTEgICAgICBIMTQzLjAyMWMtOC43NzIsMC0xNS44OTEsNy4xMTktMTUuODkxLDE1Ljg5MUMxMjcuMTMsMjE1LjM1OCwxMzQuMjQ5LDIyMi40NzcsMTQzLjAyMSwyMjIuNDc3eiIgZmlsbD0iIzAwYmZmZiIvPgoJCQkJPHBhdGggZD0iTTE0My4wMjEsMzE3LjgyNWgyMjIuNDc3YzguNzQsMCwxNS44OTEtNy4xNTEsMTUuODkxLTE1Ljg5MXMtNy4xNTEtMTUuODkxLTE1Ljg5MS0xNS44OTEgICAgICBIMTQzLjAyMWMtOC43NzIsMC0xNS44OTEsNy4xNTEtMTUuODkxLDE1Ljg5MVMxMzQuMjQ5LDMxNy44MjUsMTQzLjAyMSwzMTcuODI1eiIgZmlsbD0iIzAwYmZmZiIvPgoJCQkJPHBhdGggZD0iTTE0My4wMjEsNDEzLjE3MmgyMjIuNDc3YzguNzQsMCwxNS44OTEtNy4xNTEsMTUuODkxLTE1Ljg5MXMtNy4xNTEtMTUuODkxLTE1Ljg5MS0xNS44OTEgICAgICBIMTQzLjAyMWMtOC43NzIsMC0xNS44OTEsNy4xNTEtMTUuODkxLDE1Ljg5MVMxMzQuMjQ5LDQxMy4xNzIsMTQzLjAyMSw0MTMuMTcyeiIgZmlsbD0iIzAwYmZmZiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.double-page-icon {
    transform: scale(1.15) translateY(-1px);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU1LjIyOCAyNTUuMjI4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTUuMjI4IDI1NS4yMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMC45NzAyMDIgMCAwIDAuOTcwMjAyIDMuODAyNjQgMjguNzUzMSkiPjxnPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0NDQ0NDQyIgZD0iTTIzOS4wMjgsMEgxNi4xOTVDMTAuNDM1LDAsNS43NzQsNC42NjcsNS43NzQsMTAuNDIxdjIxMy4xM2MwLDUuNzQ5LDQuNjYxLDEwLjQxNiwxMC40MjEsMTAuNDE2ICAgIGg5Ny4wODJjMS43NjgsMi4yODQsMy45MTYsOC4wMzksMy45MTYsMTAuODRjMCw1Ljc1NSw0LjY2MSwxMC40MjEsMTAuNDIxLDEwLjQyMWM1Ljc1NSwwLDEwLjQxNi00LjY2NywxMC40MTYtMTAuNDIxICAgIGMwLTIuODAxLDIuMTU0LTguNTUsMy45MTYtMTAuODRoOTcuMDg3YzUuNzYsMCwxMC40MjEtNC42NjcsMTAuNDIxLTEwLjQxNlYxMC40MTZDMjQ5LjQ0OSw0LjY2MSwyNDQuNzgyLDAsMjM5LjAyOCwweiAgICAgTTExNS4xMzcsMjEzLjEzSDI2LjYxNlYyMC44MzdoOTAuNTcxdjE5Mi41MjFDMTE2LjUwNywyMTMuMjcxLDExNS44NDksMjEzLjEzLDExNS4xMzcsMjEzLjEzeiBNMjI4LjYwNywyMTMuMTNIMTQwLjA3ICAgIGMtMC43MTMsMC0xLjM3MSwwLjE0MS0yLjA0NSwwLjIyM1YyMC44MzdoOTAuNTgyVjIxMy4xM3oiIGRhdGEtb3JpZ2luYWw9IiMwMTAwMDIiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiNjY2NjY2MiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+);
}

.active .double-page-icon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU1LjIyOCAyNTUuMjI4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTUuMjI4IDI1NS4yMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMC45NzAyMDIgMCAwIDAuOTcwMjAyIDMuODAyNjQgMjguNzUzMSkiPjxnPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzAwQkZGRiIgZD0iTTIzOS4wMjgsMEgxNi4xOTVDMTAuNDM1LDAsNS43NzQsNC42NjcsNS43NzQsMTAuNDIxdjIxMy4xM2MwLDUuNzQ5LDQuNjYxLDEwLjQxNiwxMC40MjEsMTAuNDE2ICAgIGg5Ny4wODJjMS43NjgsMi4yODQsMy45MTYsOC4wMzksMy45MTYsMTAuODRjMCw1Ljc1NSw0LjY2MSwxMC40MjEsMTAuNDIxLDEwLjQyMWM1Ljc1NSwwLDEwLjQxNi00LjY2NywxMC40MTYtMTAuNDIxICAgIGMwLTIuODAxLDIuMTU0LTguNTUsMy45MTYtMTAuODRoOTcuMDg3YzUuNzYsMCwxMC40MjEtNC42NjcsMTAuNDIxLTEwLjQxNlYxMC40MTZDMjQ5LjQ0OSw0LjY2MSwyNDQuNzgyLDAsMjM5LjAyOCwweiAgICAgTTExNS4xMzcsMjEzLjEzSDI2LjYxNlYyMC44MzdoOTAuNTcxdjE5Mi41MjFDMTE2LjUwNywyMTMuMjcxLDExNS44NDksMjEzLjEzLDExNS4xMzcsMjEzLjEzeiBNMjI4LjYwNywyMTMuMTNIMTQwLjA3ICAgIGMtMC43MTMsMC0xLjM3MSwwLjE0MS0yLjA0NSwwLjIyM1YyMC44MzdoOTAuNTgyVjIxMy4xM3oiIGRhdGEtb3JpZ2luYWw9IiMwMTAwMDIiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiMwMGJmZmYiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+)
}

/* ********** view mode ************ */

/* ---------- pages' thumbnails ----------- */
.slider-panel-main {
    height: calc(100vh - 113px);
    width: 350px;
    box-sizing: content-box;
}

.page-wrapper {
    text-align: center;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

li.page-wrapper:hover {
    background-color: #00bfff05;
}

.page-wrapper.active {
    background-color: #00bfff21 !important;
}

.page {
    display: block;
    margin: 10px auto;
}


/* ************* pages' thumbnails ************* */

/* --------------- annotations --------------- */

.annotations-wrapper {
    height: 100vh;
    box-sizing: content-box;
    line-height: 100vh;
}

.annotations {
    display: inline-block;
    width: 350px;
    vertical-align: text-bottom;
    line-height: normal;
    line-height: initial;
}

.annotation-header {
    text-align: center;
    padding: 20px;
    font-family: 'Roboto', 'bpg nino mtavruli', sans-serif;
    cursor: pointer;
    user-select: none;
}

.annotation {
    text-align: center;
}

.annotation a {
    color: rgb(0, 106, 212);
    opacity: 0.9;
    transition: opacity .3;
}

.annotation a:hover {
    opacity: 1;
}

.annotation-items {
    font-family: 'bpg nino mtavruli light';
    background-color: rgb(250,250,250);
    min-height: 0;
    height: 0;
    transition: min-height .3s;
    width: calc(350px);
}

.annotation.opened .annotation-items {
    min-height: calc(100vh - 236px);
}

.annotation-item {
    padding: 10px;
    border-bottom: #eee 1px solid;
}

.annotation-item * {
    font-size: 14px;
}

.annotation-item-header {
    color: #00bfff;
    margin: 5px;
    padding: 5px 0;
}

/* ************** annotations ************** */


/* --------------- popup ------------------ */

.popup-background {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: 1000;
    line-height: 100vh;
    width: 0;
    transition: background-color .3s, width .3s step-end;
}

.popup-background.active {
    width: 100vw;
    background-color: rgba(0,0,0,0.7);
    transition: background-color .3s;
}

.popup {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    line-height: initial;
    background-color: white;
    border-radius: 10px;
    width: 0;
    height: 0;
    transition: width .3s, height .3s;
    overflow: hidden;
}

.popup-background.active .popup {
    width: 750px;
    height: 550px;
}

.popup * {
    vertical-align: auto;
    vertical-align: initial;
}

.popup-header {
    user-select: none;
    line-height: 46px;
    height: 40px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
    box-shadow: 0px -1px 3px 0px rgba(136,136,136,1);
}

.popup-body {
    width: 700px;
    height: 510px;
    position: absolute !important;
    top: calc(50% + 20px);
    left: calc(50%);
    transform: translate(-50%, -50%);
    box-sizing: content-box;
}

.popup-close-button {
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 20px;
}

/* ************** popup ************** */

/* ------------- indexer ------------- */

/* --- picture indexer --- */
.indexer-area {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 2;
    border: rgba(0,0,0,0.7) solid 0;
}

.index {
    position: absolute;
    border: black solid 2px;
    opacity: 0;
    transition: opacity .3s;
    visibility: hidden;
}

.index.visible {
    visibility: visible;
}

.index.hover {
    opacity: 1;
}

/* *** picture indexer *** */

.indexer-background {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: 1000;
    line-height: 100vh;
    width: 0;
    top: 0;
    left: 0;
}

.indexer-background.active {
    width: 100vw;
    background-color: rgba(0,0,0,0.7);
}

.indexer-background::after {
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
}

.indexer-panel {
    position: relative;
    z-index: 1000;
    overflow: hidden;
}

.indexer-labels {
    width: 100%;
    text-align: center;
    color: #ccc;
}

.indexer-labels .view-mode {
    line-height: 100%;
}

.indexer-labels .fa {
    position: relative;
    top: -1px;
    font-size: 16px;
}

.view-mode.active .fa {
    color: deepskyblue;
}

.index-item {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 20px;
    width: calc(350px - 40px);
    transition: background-color .3s, color .3s;
}

.index-item:hover{
    cursor: pointer;
}

.index-item.hover{
    color: deepskyblue;
}

.index-item.active {
    background-color: #00bfff0d;
}

.index-item.opened {
    height: auto;
    background-color: rgb(250,250,250);
}

.index-header {
    display: inline-block;
    margin: 0;
}

.index-page {
    display: inline-block;
    font-size: 12px;
    vertical-align: text-bottom;
}

.index-text {
    display: inline-block;
    font-family: 'bpg nino mtavruli light';
    font-size: 16px;
}

.index-item.opened .index-text {
    display: block;
    width: 100%;
    white-space: normal;
    cursor: auto;
    cursor: initial;
    position: relative;
    left: -20px;
    padding: 20px;
}

.index-delete {
    display: none;
    position: absolute;
    right: -10px;
    top: 0;
    background-color: rgb(250,250,250);
    height: 30px;
    width: 30px;
    text-align: bottom;
    color: orangered;
    line-height: 35px;
}

.index-item.opened .index-delete {
    display: inline-block;
}

.new-index-wrapper {
    background-color: #00bfff0d;
}

.new-index-back {
    position: fixed;
    width: 100vw;
    height: 100vh;
    border: 100px solid rgba(0,0,0,0.7);
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 2;
}

.new-index-body {
    position: relative;
    background-color: #fff;
    z-index: 10000;
}

.new-index-header {
    width: calc(100% - 40px);
    margin: 20px;
    padding: 10px;
    box-sizing: border-box;
}

.new-index-text {
    width: calc(100% - 40px);
    margin: 0 20px;
    height: 100px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
}

.new-index-buttons-wrapper {
    display: flex;
}

.new-index-button-wrapper {
    width: 100%;
    text-align: center;
}

.new-index-button {
    background-color: white;
    border: 1px solid #ccc;
    color: #767676;
    border-radius: 3px;
    padding: 5px 10px;
    margin: 20px;
    cursor: pointer;
    transition: border-color .3s, colod .3s;
}

.new-index-button:focus {
    outline: none;
    border-color: deepskyblue;
    color: deepskyblue
}

.new-index-button.cancel:hover {
    border-color: lightcoral;
    color: lightcoral
}

.new-index-button.save:hover {
    border-color: lightseagreen;
    color: lightseagreen
}

/* ---------- Annotations popup ---------- */

.annotation-section-header {
    margin: 10px;
    color: #00bfff;
    font-weight: normal;
    font-family: 'bpg nino mtavruli light';
}

.annotation-field {
    display: flex;
}

.annotation-field-name {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid #ddd;
    color: #999;
    font-family: 'bpg nino mtavruli light';
    font-weight: normal;
    flex-shrink: 2;
    padding: 10px;
    font-size: 14px;
}

.annotation-field-value {
    font-family: "bpg nino mtavruli light";
    display: inline-block;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    flex-shrink: 1;
    padding: 10px;
    font-size: 14px;
}

.annotation-field-value h4,
.annotation-field-value strong {
    font-weight: normal;
    color: #999;
}

.annotation-field-value p {
    display: inline;
}   

.annotation-field-value>h3:first-child {
    margin-top: 0;
}

/* Loader styles ---------------------- */
.loader {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .loader div {
    position: absolute;
    top: 27px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ddd;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .loader div:nth-child(1) {
    left: 6px;
    animation: loader1 0.6s infinite;
  }
  .loader div:nth-child(2) {
    left: 6px;
    animation: loader2 0.6s infinite;
  }
  .loader div:nth-child(3) {
    left: 26px;
    animation: loader2 0.6s infinite;
  }
  .loader div:nth-child(4) {
    left: 45px;
    animation: loader3 0.6s infinite;
  }
  @keyframes loader1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes loader3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes loader2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(19px, 0);
    }
  }
/* Loader styles ********************* */