@font-face{
    font-family:'FontIcoMoon2';src:url('icomoon2.woff') format('woff');font-weight:normal;font-style:normal;
}

#idrviewer{
    /*scroll-behavior: smooth; не працює panning - перетягування сторінки по горизонталі і вертикалі */
}

.drawing{
    transform: translateY(calc(-100% - 80px));
    left: 0px; right: auto !important; z-index:998 !important;
    height: 65px !important;
    width: auto !important;
}
.drawing .controls{
    width:100% !important;
    height:65px !important;
}
.drawing.open{
    transform:initial;
    right:0px;
}
/*#sidebar.drawing.open+#main #overlay{
        visibility: initial;
    background-color: initial;
}*/

.layer{
    /*pointer-events:auto;*/
    z-index : 5;
}
.layer.active>canvas{

    cursor:crosshair;
}

#sidebar-controls>button{
    background-size: 100%;
    filter: drop-shadow(1px 1px 1px black);
}

#btnSearch{
    background-image: url(res/svg/poshuk.svg);
}
#btnBookmarks{
    background-image: url(res/svg/paragraf.svg);
}
#btnThumbnails{
    background-image: url(res/svg/preview.svg);
}
#btnZakladky{
background-image: url(res/svg/zakladki.svg);
}
#btnDictionary{
background-image: url(res/svg/slovnyk.svg);
}
#btnPrint{
background-image: url(res/svg/druk.svg);
}
#btnНалаштування{
background-image: url(res/svg/settings.svg);
}
#btnДомашки{
background-image: url(res/svg/home_work.svg);
}

#btnSideToggle{background-image: url(res/svg/menu.svg);}
.dark-theme #btnSideToggle{background-image: url(res/svg/menu1.svg);}
#btnThemeToggle{background-image: url(res/svg/light_on.svg);}
.dark-theme #btnThemeToggle{background-image: url(res/svg/light_off1.svg);}
#btnMove{background-image: url(res/svg/peremiszennya.svg)}
.dark-theme #btnMove{background-image: url(res/svg/peremiszennya1.svg)}
#btnSelect{background-image: url(res/svg/kursor.svg)}
.dark-theme #btnSelect{background-image: url(res/svg/kursor1.svg)}
#btnDraw{background-image: url(res/svg/draw.svg)}
.dark-theme #btnDraw{background-image: url(res/svg/draw1.svg)}
#btnFullScreen{background-image: url(res/svg/full_sсreen.svg)}
.dark-theme #btnFullScreen{background-image: url(res/svg/full_sсreen1.svg)}
@media (display-mode: fullscreen){
    #btnFullScreen{background-image: url(res/svg/sсreen.svg)}
    .dark-theme #btnFullScreen{background-image: url(res/svg/sсreen1.svg)}
}

#вибірУчня{
    margin-left:33px;
}
/*body{
    cursor:url("https://media-library.rozumniki.ua/storage/01_sourse_DRM_games/online/03_knygokit/materials/storage/doc_element/svg/__shablon_praktik/3.svg"), auto;
}*/

/*https://www.w3schools.com/howto/howto_css_switch.asp*/
.switch {
  position: relative;  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;
  cursor: pointer;
  top: 0;  left: 0;  right: 0;  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round { border-radius: 34px;}
.slider.round:before {  border-radius: 50%;}


.медаль{
    text-align : center;
}
.медаль>svg{
    position: relative; top: 50%; transform: translateY(-50%);
}

.fi2{ font-family:FontIcoMoon2}

#btnView, #btnZoomOut, #btnZoom, #btnZoomIn{
    display:none;
}

#налаштування-panel>div{
margin: 24px 24px 24px 24px;
}
#налаштування-panel .fi2>label {
  float: left;
  padding: 0 1em;
  text-align: center;
}
#налаштування-panel .fi2>label>span{
  font-size: 40px
}

/* task grid  */
/*

theme{  overflow:hidden;      white-space: normal;        position: absolute;        top: 0;        right: 0;           width: 100%;        box-sizing: border-box;    }    .lessons-list{                display: flex;        flex-wrap: wrap;        margin: 0;        padding: 0;    }    .lessons-list li{        margin-bottom: 1.2em;        flex: 0 0 25%;      width: 25%;        padding: 0 2%;        box-sizing: border-box;    }    .lessons-list__item{        display: flex;        justify-content: space-between;        position: relative;    }    .lessons-list__item .media-block{        width: auto;        height: auto;        background: #FFFFFF;        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);        border-radius: 5px;        position: relative;    }
.lesson-sm__header .title{        text-align: center;        font-size:14px;   color: #000000;   margin: 5px 5px 0 5px;    }    .lesson-sm__content{        width: 100%;        height: auto;        background: #fff;        margin: 0px;        box-sizing: border-box;        padding: 0px;    }    .lesson-sm__content img{        width: inherit;    }    .right-sidebar ul.lessons-list li{        margin-bottom: 40px;    }    .lessons-list__item .media-block .mark-circle{        width: 35px;        height: 35px;        border-radius: 50%;        background: #FFFFFF;        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);        position: absolute;        bottom: 0;        left: -17.5px;        display: flex;        justify-content: center;        align-items: center;    }    .lessons-list__item .media-block .mark-circle .mark-block{        margin: 0;        width: 35px;        height: 35px;        background-size: contain;    }
*/

#вікно {
    position:fixed;width:100%;height:calc(100% - 0px);top:0px;left:0;border:0;z-index:1234; display:none
}

audio.a{
    cursor: pointer;
    background-size: auto;   background-position: center;   background-repeat: no-repeat;
    background-image: url(https://media-library.rozumniki.ua/storage/01_sourse_DRM_games/online/00_media/ui/audio_play.svg);
}
audio.a.playing{
    background-image: url(https://media-library.rozumniki.ua/storage/01_sourse_DRM_games/online/00_media/ui/audio_pause.svg);
}
.озвучка{
    border:1px dashed blue;
    /*border-radius: 100px;*/
}

theme{
    /*overflow:hidden;*/   /* white-space: normal;box-sizing: border-box;*/
}
theme img{
    width:100%;
}
.завдання{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    margin:0; padding:0;
    list-style-position: inside;
    text-align:center;
    list-style: none;
}
.завдання li>div{
    position: relative;
}
.завдання li:hover{
    border:dashed 1px;
}
.подложка{
    position: absolute;
    top: 55%;
}
.small{
    font-size:12px;
}

.тема_подложка{
    border-radius: 200px;
    background: white;
    height: 25%;
    position: absolute;
    box-shadow: gray 3px 3px 5px;
    width: 40%;
    /*display: inline-block;*/
        left: 50%;
    transform: translateX(-50%);
}

audio::-webkit-media-controls
{
    display:none;
}

.prev video{
    display:none;
}
.next model-viewer, .prev model-viewer{
    display:none;
}
.next iframe, .prev iframe{
    display:none;
}
.next .label_all, .prev .label_all{
    display:none;
}
.next canvas, .next canvas ~ *, .prev canvas, .prev canvas ~ *{
    display:none;
}

@media screen {
    .menu.open+#main #overlay{
        visibility: visible;
        background-color: rgba(0,0,0,0.2);
    }
}

.search-input-wrap button img{  vertical-align: middle}
.search-input-wrap button{  height: 100%; border:none; background:none;}

.pageControls{
    background: white; display: inline-block; height:65px
}
.dark-theme .pageControls{
    background:initial !important;
}
.mark-block img{
   /* transform: scale(1.5);
   width:85%;
    margin-top: 2px;
    margin-left: 2px;*/
}

.theme_box > img{
    width:48px;
    right: 40px;
    position: absolute;
    top: 700px;
}

#controls{
    z-index:1000;
}
#controls.upside-down{
    top:initial;
    bottom:0;
}
#idrviewer.upside-down{
    top:0;
    bottom:66px;
}

select.fi2
{
    vertical-align: middle !important;
    margin: 0 !important;
    appearance: none !important;
    width: 60px !important;
    height: 58px !important;
    text-align: center;

    display: inline-block;
    font: 40px/1 FontIcoMoon2 !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.shablon{
    opacity: 0;position: absolute;bottom: 0px; pointer-events: none;
}

#btnMove{
    /*margin-right: 125px;*/
}
.dark-theme .btn{
    opacity:  1;
}
#bookmarks-panel .bookmark-container
{
    font-size: 18px;
}
#bookmarks-panel .bookmark-container .bookmark-item {
    margin: 0px;
    margin-bottom:  3px;
}

#bookmarks-panel .bookmark-container .bookmark-item.parent > .toggle {
    color: #514351; font-size: 20px;
    left: 0px; right: initial; /*top: 18px;*/
    width:  87px;
    height: 86px;
    line-height: 86px;
    text-align: center;
    padding: 0;
    /*border: 1px solid;*/
}
.bookmark-item.parent>a{
    background: #d9eded;
    padding: 0px 0px 0px 87px !important;
}

.bookmark-item img/*, .bookmark-item span*/{
    width:80px;height:76px;
}
.nazva{/* Віктор знайшов https://stackoverflow.com/a/61610994*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bookmark-item span:last-child{
    width:46px; height:55px; display:flex; margin-left:40px;
}

.bookmark-item .медальЗміст{
    transform: scale(0.65) translate(-46px, -46px);
}

#bookmarks-panel .bookmark-container .bookmark-item a {
    font-family: 'Roboto';
    height:  86px;
    display: flex;
    align-items: center;
    padding-right: 40px;
}
/*#bookmarks-panel .bookmark-container .bookmark-item a:hover {
    background-color: #eaf5f5;
}*/


/*#zakladky-panel*/ .заголовок{
    background: rgb(245, 207, 210);transition:background 0.5s
}
#zakladky-panel button, #домашки-panel button{
    color: white; -webkit-transform: rotate(0deg);transition: 1s;  margin-left: 5px;width: 32px;height: 85px;   border: none;padding: 0;background: transparent; vertical-align: middle
}
#zakladky-container>div{
    border-bottom: 3px solid white; font-size: 16px; cursor: pointer;
}
.side_menu_bmarks_edit_area{
    overflow: hidden; height:0px; transition:0.5s;
}
#zakladky-panel textarea,#домашки-panel textarea{
    height:calc(100% - 40px);
    padding: 20px 29px;width:calc(100% - 60px); border:none; /*text-transform: capitalize;*/ vertical-align: middle;resize: none;font-family: inherit;  font-size: 18px;
}
.bookmark_page{
    font-size: 14px; font-weight: 700;
    margin-left: 11px; display: inline-block; text-align: center;  /*box-shadow: -1px -1px gray; */   line-height: 38px;border-radius: 38px;  width: 36px; height: 36px; background: #FDE4E1; margin-top: 26px;margin-bottom: 26px;vertical-align: middle;
}
.bookmark_text{
    font-size: 18px; margin-left: 10px; /*text-transform: capitalize;*/  display: inline-block;vertical-align: middle;margin-top: 26px;margin-bottom: 26px; /*width: 250px;*/
}
.bookmark_text + button>i{
    transition:transform 1s;
}
.fi-arrow-up    { transform:rotate(180deg); }
.fi-arrow-down  {  }
@media print{ .закладка-на-сторінці{display:none} }

.закладка-на-сторінці{
    position:absolute; z-index:300000; top:0px; height: 54px;
}

.поточна-сторінка{
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

#thumbnails-panel>.thumbnail:nth-child(2n) img { border-right: none; }
#thumbnails-panel>.thumbnail:nth-child(2n) {margin-left: 30px;}
#thumbnails-panel>.thumbnail:nth-child(2n+3) img{ border-left: none; }
#thumbnails-panel>.thumbnail {display: inline-block; min-width: 141px;}

#thumbnails-panel>.thumbnail:first-child {display: block;}